Jan 11

via GIPHY

Project 1: Website Redesign

Following process was due today:

  • all 3 usability tests (you were supposed to finish outside of class)
    • for final case study – be sure to include the key takeaways
  • 3 user personas
  • brand, business, and user goals
  • strategy statement
  • site-map

Next Design Steps

  1. Moodboard
    Collect images, colors, type, and any any other visual inspiration that represents the character of your brand. Then compile them into a moodboard that you will use to inform your web design decisions. Understanding your organizations’s values will help you choose appropriate color palettes (as well as, typography, images, etc.).

  2. Sketches/Wireframes – for homepage & secondary page (Options: Print Template | Sketch freely on paper | Create a Freehand board in InvisionApp.com and drag this PNG into it | or use Figma or Adobe XD with column grid layout)

    Knowing what content goes on each page, create rough sketches/wireframes to help with grid structure, hierarchy, and consistency. Develop multiple sketches for desktop and mobile layouts.
    Sketched UI Mockups 
    Wireframe Showcase
    How to Read a Wireframe | How to Evaluate | How to Design
    More Printable Sketch Sheets

Usability

Responsive/Mobile First

UI Design

Exercises

Use actual paper.

Wireframe current sites to identify patterns that are out there and how content breaks down. Look through examples of responsive designs.
https://designmodo.com/responsive-design-examples/

  • What are some common patterns among the layouts?
  • Where is the navigation? Is it vertical or horizontal?
  • How is the text treated?
  • How are the images treated?
  • How is overall organization of content treated?
  • Are there any innovative layouts?
  • Is the experience consistent across desktop and mobile?
  • Why are these choices effective for the brand and content of the site?

Crazy 8’s – speed sketch exercise
Take your strongest ideas for content and rapidly sketch eight variations of same idea in eight minutes. It forces you to push past your first reasonable solutions and make them better, or at least consider alternatives. You can also use this as a partial writing exercise and try out different ways of phrasing things.

  • Begin with a single sheet of letter-size paper and fold it in half 3 times, so you have eight panels.
  • Sketch for 1 minute for each panel.

Due Next Class

Project 1: Website Redesign Process

Keep uploading to Slack #project-1 channel or if you get your U:Drive working – you can start uploading there and link it to your Sandbox.

  • moodboard
  • sketches/wireframes of both desktop and mobile versions of your redesigned homepage & secondary page
    • Choices for how to turn in:
      • Print templates and scan or take a photo
      • Sketch freely on paper but keeping grid in mind
      • Create in Figma or Adobe XD using columns/grid layout
      • Create Freehand board in InvisionApp.com and drag this PNG into it

EXERCISE 1: HTML

Make adjustments to your HTML page based upon the feedback I sent you via DM on Slack. You don’t need to turn this in, but it will need to be updated/corrected in order to start the next CSS exercise on Thursday.