The Web Design SIG kicked off 2018 by doing what every other web design ‘think-tank’ does – talk about web design trends for 2018. Our fearless leader combed through countless online journals looking for just the right collection of projections and ideas, but settled back on some old favorites as a jumping off point of the discussion.
The WPMUDEV blog is an awesome WordPress information source, but its not just for WordPress. The topics they cover are applicable to a variety of web technology areas and a recent post regarding web design trends in 2018 had just the right tone.
The top three ideas the author noted …
- color palettes
- typography
- hand drawn graphics
… were found to be included in many of the articles that I skimmed through while preparing for the SIG.
Beginning with color palettes, we reviewing the two websites referenced in the article and discussed the differences and similarities the two offered. The discussion lead us to an excellent interactive Q&A on accessibility standards for website, and how to pick the right colors.
Using the adventurous color palettes of lush.com and injob.com for inspiration, we looked at how to use the ColorZilla browser extension for Firefox and Chrome to pick colors off a existing website. We dropped the colors picked into a cool color gradient site – 0to255.com – to see how shades of the selected colors could be easily identified. Be mindful of the extra # symbol that will get dropped into the color code box. The ‘#’ symbol indicates we are working with hex color codes. We looked at way to flesh out our color palette using a free Adobe color tool. Using the wheel, along with our picked colors we selected the complimentary wheel guide and were surprised by the results.
The color picking exercise led us to trying to figure out contrast ratios as it relates to web accessibility. The contrast checker at //webaim.org/resources/contrastchecker/ proved to be just what we needed. We tested our own view of contrast using an accessibility checker from Penn State.
The discussion went so well, we soon found ourselves out of time. We didn’t even have much of an opportunity to talk about typography or graphics. Maybe next time.
Resources and tools mentioned
Color psychology – https://premium.wpmudev.org/blog/color-psychology/
Color Info-graphic: https://blog.kissmetrics.com/color-psychology/?wide=1
Colorzilla – Chrome/Firefox browser tools
Test colors – http://www.0to255.com/
Contrast checker – https://webaim.org/resources/contrastchecker/
Excellent Graphical Tool: http://colorsafe.co/
Accessibility Checker – http://accessibility.psu.edu/color/brightcolors/
Good topic, and a lot of spirited discussion. I am looking forward to next month.