Class 2: The New Process

The Plan

Discuss: Readings

• The difference between front-end languages
• Websites vs. Webapps

Lecture: The New Process

• What was the old process?
  • PSD to HTML
  • No code
• The New Process (different for everyone, this is based on Stephen Hay’s Responsive Design Workflow and all things Brad Frost)
  • Designing in text
    • Notes for DiJiFi and MTNmeister
    • Markdown and creating hierarchy
  • Breaking content into components and form a layout systems
    • Atomic Design and templating
  • Now the visual design layer (Photoshop, you can come out now)
    • Style Tiles
    • Element Collages
    • Tools
      • Sketch
      • Photoshop/Illustrator/InDesign (ID can be good, encourages typography systems)
  • Style guides (developers love these)
    • Pattern Lab
    • Styleguides.io
      • Lonely Planet
      • Mailchimp
• A middle ground: Code generators (meh.)
  • Maccaw
  • Adobe’s Project Parfait

Exercise: Do it!

• Select a project (could be an existing website or something you are working on)
• Create a text list of the information
  • Is there a consistency in the type of content across all pages or views? (hint: yes)
  • How can you group that content, into what kind of modules?
• Turn that list of text into a diagram-ish thing that indicates modules

Break

Demo: Code questions

• Demo any questions, or style a pretty button and form.

Exercise: Continue on Process exercise

• Add markup to the page