I wanted to learn how to design for different screens.
I started with research on designing for different screen sizes and found out some tips and information like:
· Start with the smallest screen size
· Have similar structure on the different sizes
· Keep in mind how the font size should change according to the screen
· Keep it short: massive texts on small screens will put the user off
· Etc.
After that I research some more into for what devices I want to design for. I looked at different screen resolutions and added those to my stylesheet afterwards.
Before creating Wireframes, I looked online for inspiration for different wireframes
but especially for smart watches because I found doing design for those the hardest.
I looked at the old design that I made for the website, that I was not happy with and made some new sketches for different layouts. I wanted to get some different Ideas and looked at inspiration online as well.
I created wireframes form the chosen sketches to give myself a better idea on the look and to know how many different sites I would need for each screen size.
Also, I noted down what icons I would need to make extra and marked all the clickable items on each site.
Wireframes:
After I had all the Wireframes, I started to make a stylesheet for the
prototypes. That way it was
easier for me to create 4 different prototypes that still look like they belong together.
I looked up most commend font sizes for each screen size and noted them down on the style sheet as well.
In Adobe XD I created 4 prototypes for 4 different screen sizes, smart watch, phone, tablet and web browser.
For Example here is what the phone prototype looks like in Adobe XD:
Those 4 Prototypes got tested by different people, that gave me feedback as well.
I took all the feedback to account and talked to the testers afterwards about their experience.
I changed some things like font sizes on the web version, it was too big and looked out of place.
Also, some Pictures were not sized right.
And here are the final products: