The RGB colour spectrum must be accounted for when designing for screen
Websites use 5 digit hexidensinal codes #12345
There are also 3 digit hexidensanal codes #123
Through RGB, specify RGB colour (255,0,0)
RGBA, the alpha chanel, working with opacity and transparency (255,0,0,0.5)
Look into colour codes for drop shadow, glow etc...
Use a colour that can be transferred to CMYK exactly to use for the stickers and promotional work etc...
Greyscale images are minute in terms of GB MB, colour is a larger size
This can be a contributing factor when considering the speed which a web page or app will open
The app needs to be ready to pass over to a developer to be created, therefore prototype versions using software such as Adobe XD or Adobe Muse would be helpful to illustrate how the interface would work.
Typography -
Websafe fonts -
Helvetica
Helvetica Neue
Comic Sans
Times
Times New Roman
Impact
Ariel
Georgia
etc...
Helvetica Neue is the second most used typeface on the internet, this could be an indicator that it is the most user friendly typeface. Using this typeface in my logo or interface could make the interface more approachable towards the user.
This information has been found using the website Fontreach.com
80% of the typefaces are also sans serif whilst 8% are serif fonts, this could be another indicator of usability within the consumer. These statistics suggest that modernist aesthetics would be the most appropriate guidelines to follow, books such as Josef Muller Brockmanns 'Grid Systems in Graphic Design' or researching into the Swiss International Typographic Style could inform my design decisions within this project.
Type size suggestions for designing for screen and print are as follows,
minimum for print 8pt
minimum for screen 12pt
this is due to high contrast between the light and colour
Minimum line length is Massimo Vignelli's 8-12 words per line however, minimum for screen can be slightly shorter. This is due to grid systems and screen transition within mobile devices, the line length is drastically reduced on many occasions if websites have partnering apps.
Layout -
Columns and rows
All website interfaces should be designed to a 12 column grid, 12 columns give you the flexibility to have a range of different layouts whilst also keeping structure and consistency.
This can be justified with theorists such as -
Josef Maler Brockman
Vignelli
As can be seen by the mobile grid system comparison below, even though this 12 column system can keep consistency, it most likely will not transfer directly onto a partnering mobile app.
A better solution would be to split the app into a 4 column grid system as shown on the image below.
The last decision to take into consideration is visual hierarchy, closely tied to the principle of simplicity, visual hierarchy entails arranging and organizing website elements so that visitors naturally gravitate toward the most important elements first. Within the application, there must be an order which draws the viewers focus onto the most important buttons or areas.
Remember, when it comes to optimizing for usability and UX, the goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can structure your site in such a way that visitors will be drawn to those elements first.
Quote taken from https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-Guidelines-for-Exceptional-Website-Design-and-Usability.aspx#sm.001lvizw0184sd2zvc02igxx8bu0s
No comments:
Post a Comment