CLASS WEBSITE
Go over class website including the syllabus, policies, projects, resources, and so on.
HISTORY OF WEB DESIGN
- Web Design History
- Evolution of Web Design
- The History of Web Design
- History of Web Design for Designers
PROJECT 1: Website Redesign
Redesign an existing multi-page responsive website, making the site more user-friendly by rethinking the visual layout, usability, information architecture, content, audience, and responsive nature.
Spreadsheet with some links to local/regional non-profits, charities, and cultural institutions.
Web Design Process Steps
Start an InDesign file and save out as a multi-page PDF. Update this document and link to it from your Sandbox throughout the project. You will need to upload it to your 360 folder that you will create in the HTML exercise.
Competitive and Inspirational Research | Example
Find different websites relevant to your site. These sites are your possible competition and can be inspiration. In order to attract your audience to your site, see what’s possible, and stay current, you need to know what’s out there. Compare and contrast the sites you found:
- What is your first impression / first impulse?
- Is the site organized and consistent?
- Is there enough or too much content? Is the content interesting/relevant?
- Does the appearance of the site reflect the content?
- What stands out, both good and bad?
- Take screen shots of relevant pages of these websites and explain why you chose them.
Questionnaire | Download
Fill out the above questionnaire to help you initially brainstorm and get to know your website better.
Content Outline | Example
Complete an assessment of the primary level of the homepage and a secondary page on the current website. Outline/list the content that you see – this can be anything from links, navigation, written headlines, and categories of info – to assets such as photos, videos, illustrations, or interactions.
HTML
More Help
- What is HTML?
- Naming Conventions
- File Organization and Workflow
- URLs
- Basic HTML Structure
- HTML Terminology
Exercise 1: HTML Basics
Create class sandbox webpage using HTML by next class.
DUE NEXT CLASS
1. EXERCISE 1: HTML Basics – Upload PDF of code and screenshot of the visual page to Exercise1 Slack Channel.
To save PDF of code, install the “Print” Extension in Visual Studio Code. To do this, click on the bottom icon on the left side bar. Search for “Print.” Then when you are in the active editor on your html page, you can click on the printer icon on the top right bar to save a PDF.
To take a screenshot on a Mac, hold down Shift+Command+4 to drag a box around your selection.
2. PROJECT 1 CHECKPOINT: Website Redesign:
Start a multi-page process PDF and link to Sandbox web page or to the #project-1 Slack Channel if you didn’t get access to the U-Drive yet.