Today’s goals:
- Finish discussion of use of color in web design
- Discuss current web design trends and review different sites
Today’s featured website:
- https://palette.okaybueno.com/p/59ce42163a5905064c32b6e6– Enjoy original art and find some colors to use in your design!
Use of Color for Communication and Visual Effect
- Help with colors: This site, https://coolors.co/app, will help you create a color scheme to use for your website. You can even generate a color palette from an image, which could come in handy if you’re building a site from scratch and have been given a logo or header image to start. This site, https://www.sessions.edu/color-calculator/, has an interactive color wheel to help you choose colors based upon their position on the color wheel (contrasting colors, similar colors, complementary colors,
etc.) - Questions to consider: How do you pick colors for your website? How do you choose colors that “go together?” How does color affect a user’s impression of your website? How can you effectively use color to communicate your website’s goals or message?
- Review: Monotone (one dominant color), Duotone (two dominant colors), Overlay (transparent color over design), and Gradient (fading of colors together)
Web Design Trends
Bad Design as a Choice?
- Sometimes unconventional design practices are used deliberately- let’s check out http://brutalistwebsites.com/ and http://hoverstat.es/ for examples.
The 90’s are Back!
- NYT article
- Examples: http://www.everythingnow.com/, https://www.balenciaga.com/countries/index, http://www.solangemusic.com/, http://www.salazarla.com/
Other Selected Trends
- Big, bold text/typography: https://www.helloheco.com/, https://www.apple.com/
- More color, brighter colors: http://le-mugs.com/en/, http://www.ot-24.co.uk/
- Video/animated backgrounds: http://www.weareuprising.com/index, http://www.because-recollection.com/
- Geometric designs: http://www.creationsnamale.com/, http://dreamteam.pl/
- Modern yet retro: http://www.rleonardi.com/interactive-resume/, http://www.sweetmagnoliagelato.com/
Evaluate sites:
- Pick a site from here: https://www.thebestdesigns.com/designs/color. Choose something under Filter to view sites with that particular design (Retro, Minimal, Animation, etc.) and then choose one of those sites to review. Write down your observations somewhere and then we’ll share as a group.
- Load time– is the site fast or does it take a long time to load?
- Interaction– how do you get through the site- scrolling, clicking, or using a menu?
- Colors– Warm, cool, or neutral colors? Monotone, duotone, gradient, or overlay used?
- Typography– is the text large and an important part of the design, or more typically sized?
- Mobile-friendly/responsive– shrink your browser window to see how the site adjusts itself to smaller screen sizes AND then try it on your phone (are the animations as smooth? does that site take longer to load? what else do you notice?)