- For Today: Discuss: Designing for the Web + Studio for P1 (mind mapping session, sketches, mood boards, and blog 2)
Designing the Web
Designing the Web Resources:
- One Page Love
- Asymmetrical design: Creating beautiful, balanced layouts
- The designer’s guide to grid theory
- A brief history of grids
- The Elements of UX | by Jesse James Garrett
- UX Design.cc – Curated articles and case studies on UX/UI best practices.
- Whitespace in Web Design
- Collect UI | A collection of beautiful UI shots from Dribbble, categorized for easy browsing
- Landbook | A collection of high-quality landing page designs for inspiration.
- Photoshop Etiquette | A Guide to Discernable Web Design
- TypeWolf | Typography Inspiration
- CSS Nectar, Admire the Web, Best Website Gallery, | Web Design Inspiration
Project 1: Typographic Storytelling
P1 Process – 2 Mind Maps: Explore 2 different potential content directions* by creating a mind map for each. Post images directly in Medium post. *Include a photograph of each mind map
2 Mood Boards (on 1 narrowed content choice) and post to same Medium post for Project 1 (resource: one page love)—remember to include typography and keywords!
18 Thumbnails: Draw 18 thumbnail sketches (6 desktop, 6 tablet, 6 mobile)
Project 1 Timeline (tentative):
t 2.24 week 5 18 thumbs (6 mobile/6 tablet/6 desktop) + 2 mood boards (visual research) + 2 mind maps
tr 2.26 week 6 1 persona + storyboard + lo-fi mobile prototype for User Testing + identity sketches
t 3.3 week 6 2 style tiles
tr 3.5 week 7 mobile/tablet/desktop mockups (3 mockups total + must include logo) using selected style tile for homepage
t 3.17 week 7 revised mobile/tablet/desktop mockups + dev plan (wireframes)
tr3.31Final Project Due Date
Examples:
- Yorgos Lanthimos
- onepagelove.com/tag/storytelling
- onepagelove.com/the-haircut
- onepagelove.com/the-pitch
- onepagelove.com/the-story-of-dovetail-and-afterpay
- ernesthemingway.tilda.ws
- cats-louis.ru/en
- paulfurey.com
- chizzy.singula.teampistola.in
- atlas-bespoke.com
- omid.bio
- ikilledacactus.com
- ripeplanet.com
- whereispoland.com
- aftermetoo.com
- react.gg
- sbs.com.au/theboat
- Past student examples:
- Roswell Butina
- Paige Crawley
- Sarah Mullarkey
- Roan Wilkins
- Grace Turk
- Jacob Sukhenko
- Aaron Ly
- Braden McCormick
Due Next Class:
- P1 Process: (post all process working to “Project 1” story on Medium
– Theme selection: Determine what kind of content will go on your website. Refer to this article to inform your initial ideation. Consider the content that will go on the homepage. You will expound on this in Blog 2.
– 2 Mind Maps (on 2 different content choices)
– 18 refined layout sketches (6 mobile/6 tablet/6 desktop) – (on 1 narrowed content choice)
– 2 mood boards (on 1 narrowed content choice) and post to same Medium post for Project 1 (resource: one page love) (on 1 narrowed content choice) - Continue Blog 2
Due 3.3 – Blog 2: Selecting and Analyzing Your Website’s Content – post to D2L (or Medium “Blog 2” Story + then post to D2L)