Web Design Basics Flashcards
Apple and Microsoft pushed what type of design that changed the game?
Flat design. Elimination of shadows, gradients, etc. to create a clean, modern look
What is the definition of typeography?
The art and technique of arranging type to make written language readable and beautiful
What are some rules for web design?
1) Use a font size between 15 and 25 px for range of body text
2) Use bigger font size for headers, headlines (60px for main 32 px for sub works well)
3) For headlines, use REALLY big font sizes (90px), however, make sure the font weight is lessened
4) Use line spacing that is 120 to 150% of the font size. 100 to 200 percent is too little or too much line spacing
5) 45 to 90 characters per lline is the optimal amount to make reading easier
6) Use good fonts
— Sans-serif - more neutral, clean, simple, modern websites — Open Sans, Lato, Raleway, Monsterrat, PT Sans
– Serif - traditional purposes, storytelling, long reading – Cardo, Merriweather, PT Serif
What font should I use?
1) Choose a font which reflects the look and feel you want for your website
2) Decide: sans-serif or serif?
3) Use a good font
4) Use only that font
What are some rules for color?
1) Use only one base color (recommends flat UI colors)
2) For your palette it’s good to use 0 to 255 for your shading
3) Use Color to draw attention
4) Never use complete black as a design color
What are some of the emotions or psych effects from different colors?
Red - strenght, passion, excitement
Orange - cheerfulness and creativity
Yellow - intelligence, curiosity,
Green - harmony, nature, life and health
Blue - patience, peace, trustoworthiness, professionalism trust and honor
Purple - nobility, wealth
How should you proceed working with images?
1) Text over images, you can use a back color, or you can use boxes,
2) You can also blur the image and place the text there
3) You can also use floor fade
What are the basic guidelines of using icons?
1) Use icons to list features/steps
2) Use icons for actions and links, make sure to label your icons
3) Use icon fonts
What are some important rules / guidelines for spacing and layout?
1) Utilize visual hierarchy6, whitespace describes invisible relationships between the elements of your website
2) Define where you want your adience to look first, establish a flow that corresponds to your content’s message, use whitespace to build that flow
What is user experience? User Interface?
User interface is the presentation of a product, how it looks and feels
User experience is the overall experience the user has with the product
A great example of designing the product vs designing the experience is looking at the different ketchup bottles.
User goals vs the business goals need to be determined in harmony by the UX designer
What is the dsecret ingredient for stunning web design?
Use other websites as inspiration to see what other leading designers are doing right
1) Collect designs that you like
2) Try to understand everything about them
3) Why do they look good?
What do these sites have in common?
How were they built in HTML and CSS?
What are the 7 real world steps to a fully functional website?
1) Define your project - what are your goals? Who is your audience?
2) Plan your content - text, images, videos, icons. etc. Start thinking about visual hierarchy. Content first approach. Define the navigation. Define the site structure if it’s a bigger project
3) Sketch your ideas before you design - these are sketches not artwork, so once you have some structure and ideas of where you are going, you are good, don’t make it perfect
4) Design and develop your website - design your website using guidelines and tips you’ve learned in the webdesign sections. Desig in the browser, lots of people are leaving PS
5) Optimization - Site speed, Search engine optimization
6) Launch - You just need a webserver that wil host your website
7) Site maintenance - Monitor your users behavior and change your website if necessary
What are the three main ingredients to a responsive web design?
1) Fluid grid: all layout elements are sized in relative units, such as percentrages, ijnstead of absolute units like pixels
2) Flexible images: are also sized in relative units
3) Media queries: allow us to specify different CSS style rules for different browser widths
