Assignments > Lab 6. Visual Design
Due on Fri, 02/19 11:59PM.
In this lab, you’re going to instantiate some rules of usability and composition while continuing practicing your front-end web dev skills.
Part 1: Background
Please review the rules we discussed if needed:
| Usability Principles |
|
|---|---|
| Visual Design & Composition Principles |
|
Then, download and take a look at the sample code I have provided you. You don’t have to use any of these samples, but if you’re new to front-end design, these files can help you to get oriented with some HTML / CSS / JavaScript strategies.
1. layout-techniques
The layout-techniques folder contains some simple layouts and cards that you can adapt, modify, and style to fit your needs. In my opinion, CSS / HTML layouts are the most difficult part of CSS.
- demo01-grid: simple layout
- demo02-grid: alternative layout
- demo03-flex-cards: laying out cards that flow
- demo04-flex-cards-styled: cards alternative
- demo05-cards-photos: cards with photos
- demo06-hamburger-menu: responsive menu for mobile navigation (shrink screen to test)
To get some additional support with layouts, refer to the course website, and in particular:
- The box model
- Media queries for mobile layouts
- CSS Grid
- Flexbox
- Text & fonts
2. mockup-techniques
The mockup-techniques folder contains some JavaScript - DOM interactions that can help you to show / hide screens and/or dynamically adjust how your screen looks visually.
- font-switcher: adjusting styles based on user interactions
- theme-switcher: adjusting classes based on user interactions
- page-turner: showing / hiding content on mouseover (or any user event).
3. third-party-integrations
The third-party-integrations folder contains some demos that show how you might integrate external data into your UI using the JavaScript fetch API.
- 01-photo-gallery: using inline data.
- 02-gallery-ajax-flickr: using flickr data.
- 03-spotify-demo: more advanced interactions using Spotify API.
Part 2: Your Task
- Pick one of the screens that you’re planning to build first (for your P4 deliverable).
- Create a layout for your screen (using today’s samples or other resources).
- As you do so, apply the composition and usability principles that we discussed this week, with particular attention to the rules of composition – and particularly the principles of alignment and contrast. Keep your screen organized, use white space liberally, and ensure that you’re communicating what is background / foreground. Less is more! It’s usually (though not always) better to have multiple screens and/or regions that you show and hide than to show the user all of the options / features at once.
What to Submit
Submit what you came up with (just submit a zip file) to Canvas. It doesn’t have to be perfect. Just a good faith effort to instantiate some design principles.