search

ethereum / play

playproject
https://playproject.io
MIT License
22 stars 5 forks source link

Play UX and UI (design & themes) #52

Closed serapath closed 5 years ago

serapath commented 5 years ago

@todo

INSPIRATION (style)

We like:

wallpapers

videos

INSPIRATION (searchable listing)

INSPIRATION (editor)

INSPIRATION (landingpage)

INSPIRATION (playproject)

ninabreznik commented 5 years ago

We also need to define our communication/branding goals (professional?, playful?, functional?, magical?, artsy?, minimalistic?, ... -> what to focus on )

serapath commented 5 years ago

i like playful sci-fi magic, and minimalistic - i just don't know how to merge that :D

fionataeyang commented 5 years ago

Alex, I think we can use the color of playful sci-fi magic but the style uses minimalistic. Coz these two things are conflict a lot. So, basically we can pick up the point thing to decorate it.

fionataeyang commented 5 years ago

I found most popular effect js that you've been showed me some website are using it. https://vincentgarreau.com/particles.js/

I've been thinking maybe we can find some other very cool effect library to add it on the website.

fionataeyang commented 5 years ago

Hey, I made the inspirations on pinterest, and it's private that only ppl know the link can view the board. https://pin.it/quf6n3n6ucexey

serapath commented 5 years ago

yeah, let's take some time on tuesday to go through and gather some opinons from everyone to see what are pro's and con's and what would be nice to communicate with what we choose ...and also what makes sense or what is possible in the context of the actual tool we are trying to build

serapath commented 5 years ago

update for https://playproject.io/

here is the selection from your pinterest that i think is closest to what we imagine :-)

I added some extra and below is a list of additional relevant links

and some more color schemes ...not yet sure about the exact ones

fionataeyang commented 5 years ago

Looks very great. Thanks. I will follow these to create the concept for the editor first. And if maybe there will be enough time to concept for the search list in this week.

ninabreznik commented 5 years ago

Sounds great! Ping us if you need any input :)

On Wed, 10 Jul 2019, 06:29 Fiona, notifications@github.com wrote:

Looks very great. Thanks. I will follow these to create the concept for the editor first. And if maybe there will be enough time to concept for the search list in this week.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/ethereum/play/issues/52?email_source=notifications&email_token=AAIGZS6X7CGMGPG372VAED3P6VXUPA5CNFSM4GFSODO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZSKX3I#issuecomment-509914093, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIGZSZLJ66A3UTPUP2KZNDP6VXUPANCNFSM4GFSODOQ .

fionataeyang commented 5 years ago

Hey, Alex and Nina, This is so far that I've finished the wireframe prototype, and make the dark and white theme, also created the prototype for each themes.

I will design sign up, sign in and user profile pages. Please give me some advices, and check the behavior of prototype if there is not suitable or need to improve that we can discuss on the meeting or leave a message on slack to me.

Wireframe prototype https://projects.invisionapp.com/share/U9SZMK6J873#/screens/373710393_Editor_Solidity_Wireframe_-_Default

Dark theme prototype https://projects.invisionapp.com/share/U9SZMK6J873#/screens/373710476_Editor_Solidity_-_Dark_Theme

White theme prototype https://projects.invisionapp.com/share/U9SZMK6J873#/373710475_Editor_Solidity_-_White_Theme

ninabreznik commented 5 years ago

Hey, Fiona,

I like the themes for the editor. I think we should go with your suggestion and see how users will like it. I think what is also important to add is How will we show users that sending transaction is in progress (currently we have a little animation, because on blockchain executions (=transactions) are not instant, they take a bit time)... See my demo. https://www.loom.com/share/eda49b7304bf4e568b83f90d4b99a813

Also, we need to make a detailed view for each data type (string, integer, bytes, array, etc.). We should maybe have another call tomorrow before the meeting and we walk you through the editor and show you all the details that we thought through already.

I created 4 sub-issues so we can more in details discuss each part of the project.

I think that before going to user profiles, I would rather to back to collection page, since we'll need couple of months (more than 1/2 of a year) to have "backend" and the rest of the app ready for profiles page, so we are not in a hurry with this.

So, I think the best way to go forward would be to also make a UI/UX for collection page now and then we can slowly start with first round of implementation. I already prepared a basic collection page view with the basic logic, so after we are ready we can start brushing the html and css part (javascript part will most likely stay untouched, or we'll fix some minor issues and I will help with working on this.).

fionataeyang commented 5 years ago

Hi Nina, Yes, I also tried my way to capture some of the screens on editor. The results is you see on the prototype that I added a loading icon (That would be using animation, but not sure you'd like it. :D)

Because I've done the pages very quickly, thus I think to design other page. Lol You have any plan or idea, we can discuss always. :)

I would like to know more about collection what is there need to add more or take care the details.

I'm working on the wireframes of sign in/up, we may discuss it together or choose another day to discuss it. (It's not urgency.)