Planning a Website Redesign: Week 2: Design Laura Solomon @laurasolomon www.meanlaura.com laura@designforthelittleguy.com

Series Agenda 1 2 3 4 Planning Design Content Why? Who? Goals, platforms and metrics Series Agenda 2 Design Fonts, colors, logos, working with a designer, and more 3 Content Content audits, inventories and writing 4 Usability, Testing and More Usability, accessibility, and more

WEEK 2 Design Factors

“Though art may be subjective, Web design is not. In Web design, there is a right way and a wrong way to approach layout, navigation, copy, white space, and other critical website components.” Andrew Follett

Look at your “competitors”

How to handle COLOR

Limit the number of colors Design in greyscale first Avoid using pure black Set importance using color contrast Try to follow 60–30–10 rule Follow the rule of continuity Start with the emotions you want to convey Consider accessibility aspects Of design https://www.shopify.ca/partners/blog/best-website-color-schemes

https://medium.com/wd-tips-tricks/infographics-why-good-website-design-is-so-important-5a1682c6ef07

How to handle FONTS

Legibility versus readability

 Legibility Readability  https://www.smashingmagazine.com/2011/03/how-to-choose-a-typeface/

https://writemarketdesign. blogspot https://writemarketdesign.blogspot.com/2011/08/marketing-mishaps-using-too-many-fonts.html

How big should your BODY text be?

https://www.ualibrary.org/

www.webdesignerdepot.com/2009/02/10- web-typography-rules-every-designer- should-know-2/

Doing an INTERFACE INVENTORY

http://bradfrostweb.com/blog/post/interface-inventory/

How to do an inventory interface Brad Frost Set up a blank template. Collect headings, text fields, radio buttons, carousels, accordions, tabs, images, icons, video players, graphs, etc. Categorize the screenshots. Present the interface inventory to your boss/client/organization and watch them cry realistic tears. http://bradfrost.com/blog/post/interface-inventory/

Keep these in MIND

Do not fear WHITE SPACE

Link color

Get a favicon

10 Mistakes Logo Designers Should Avoid (https://inkbotdesign Infographic: How Your Brain ‘Sees’ A Logo (http://designtaxi.com/news/370039/Infographic-How-Your-Brain-Sees-A-Logo/?interstital_shown=1 ) Designing a Logo with Staying Power (http://www.designsphere.info/2015/03/10/designing-a-logo-with-staying-power/) When Should You Be Redesigning Your Logo? (https://martech.zone/logo-redesign) How to create a brand style guide (https://99designs.com/blog/tips/how-to-create-a-brand-style-guide/)

https://piqualibrary.org versus https://piqua.lib.oh.us

How to work with a WEB PROFESSIONAL

www.buzzfeed.com/itscalledcreativity/web-designers-vs-web-developers-14n5

Independent vs. shop

Costs: hourly vs. project www.swissarmylibrarian.net/2009/05/19/upcoming-workshop-cms-day/

www.webdesignerdepot.com/2009/03/40-comics-strips-for-web-designers/

www.webdesignerdepot.com/2009/03/40-comics-strips-for-web-designers/

 Watch out for: Prioritization Timelines Feature creep

WEEK 2 The Big Take-Aways

Be aware of how fonts and colors affect your design Little things aren’t so little Listen to your designer. You pay them for that knowledge.

Next week: CONTENT Laura Solomon @laurasolomon www.meanlaura.com laura@designforthelittleguy.com