Project 1: Website Redesign
Following process was due today:
- moodboards
- sketches/wireframes
Next Design Steps
3 desktop home pages Example
- After you have chosen sketches/wireframes, flesh them out in either Figma, Adobe XD, Photoshop, or Illustrator
- Design 3 distinctly different variations demonstrating your website’s look-and-feel. Try different placements for content, different color schemes, different language, different typefaces…
- Desktop width can be between 1024px-12oopx and mobile width can be between 320px-400px. Length can be anything – show full scroll page – don’t cut it off.
- Try using a 12-column grid for desktop and 2-4-column grid for mobile.
- Use only Google Fonts or Typekit Web Fonts
- Turn in Instructions: See how to turn in at bottom of the page.
Design Considerations
Concept/Innovation
Communication
Composition/Layout
Typography
Color Scheme
Design Consistency
Content/Organization
Usability
Responsive Translation between mobile and desktop
User Interface Design
Visual Inspiration
- Building Better UI Designs With Layout Grids
- 8 Innovative Web Design Trends for 2022
- 20 Web Design Trends from 2022
- Best Web Design on Awwwards
- Webby Awards
- The FWA Awards
Web Typography
Tips and Inspo
Web Fonts
- Google Fonts (list of best ones on Awwwards.com)
- Typekit Web Fonts
Font Pairings
Cascading Style Sheets
CSS Introduction
CSS Class Lecture
CSS Cheat Sheet
Tutorials
You can follow along and practice here at W3Schools.com
Watch the following video tutorials for more help from W3School:
Videos CSS Syntax through CSS Padding.
You can skip Tables and Outlines and everything after Padding.
Free Code Camp to test your skills and learn along the way
Exercise 2: CSS Basics
Practice styling the type and divisions of your sandbox page using CSS.
- Upload files to the U-drive and turn in screenshots of code and webpage to #exercise2 Slack Channel.
DUE NEXT CLASS
Project 1: Website Redesign Process
- 3 desktop home pages – Example
See specs/details under “next design steps” towards top of this page.
- How to Upload for Tuesday: If you use Figma or Adobe XD – then share the project link on #project1 Slack Channel. Click here to see a demo on each tool.
- If you do it in Illustrator or Photoshop for now, then export a jpg or png and import it into InVisionapp.com. Sign up for Invision. Then click on the plus sign to create a new Freehand. Then import each homepage variation image set into Freehand. Then click on the Share button and link to the Freehand on #project1 Slack Channel. Example 1 / Example 2
- Be prepared to give a clear elevator pitch (strategy statement) about your organization’s website, so your classmates know how to respond to your design variations. (including audience, brand values, prioritized goals…)
Exercise 2: CSS Basics
- Upload files to the U-drive. (Try to bring “360” folder over to the “myweb” folder on the U:Drive if you haven’t yet)
- Upload PDF of CSS and HTML and screenshot of web browser to the #exercise2 Slack Channel