This week's Musical Prelude:
The Romantics - What I Like About You (1980)
https://youtu.be/Rqnw5IfbZOU?si=MMgVaS_ebIZEtrrI
The Vibe: The Power-Pop Bridge
Info: Released right at the dawn of the 1980s, this track serves as the perfect bridge between the raw, three-chord aggression of 1970s punk rock and the radio-friendly hooks of the incoming New Wave era. While it only achieved moderate chart success upon initial release, its timeless, high-energy rhythm made it an enduring pop culture staple.
Fun Fact: The infectious harmonica solo and gritty vocal delivery keep the song grounded in traditional garage rock, capturing the raw energy of a live band just before synthesizers and highly polished production completely took over the music industry.
The Web Design Class Prelude Playlist Theme is to celebrate some of the best New Wave/Pop music of the 80's.
Web Design Summer 2026 Playlist here (each week's new song will be added as the semester continues):
https://youtube.com/playlist?list=PLyha4OquaA4JvgySiRoyK-yxr0YKcKn6d&si=ot4qgmJTCFAwXvbR
WHO am I?
WHAT is this class
WHY are you taking this class anyway?
[upload job listing] Use link text: Graphic Design Job Listing (2024)
Brand / Graphic Designer (2025)
NEW & IMPROVED WEB DESIGN CLASS
Seating Chart - starts next week.
Be Respectful of Each Other & Professional: Talking, Swearing, Food, Leaving Early
----------
Syllabus
----
Web Design Class Grading Criteria
Web Design Projects (every 3 weeks except final project)
Each project worth 175 pts except final project worth 350 pts
Project moodboard is due after one week: 25 pts. Late = 10pts
- Project mockups are incomplete or have a minimal amount of work = -11 pts
- Completed all requirements of the project? (includes turning in all required elements) No = -11 pts
- Turned in project late? -11 pts for each day late.
Minimum project score due to late fees (assuming it is complete): 70 pts
Small Assignments (1 – 2 weeks): 20 - 40 pts
- Incomplete: -10 pts
- Late fees: -5 pts for each day late
I put a floor of 50% for points on all assignments (assuming the assignment was done correctly).
---
Domain & Hosting
Final project will be a working portfolio website for yourself. I want you to have your own domain and hosting account that you can keep online after have graduated. I will have more info next week.
Here is the link to the Google Slides for this lecture:
https://docs.google.com/presentation/d/1jGvQT5L7QckmMIB9Rwd3lb6hQbZdjfXUuH7fvrPupYs/edit?usp=sharing
Here is the link to the Google Slides for this lecture:
https://docs.google.com/presentation/d/1UtGUmqaOUowa1STgeNqxkmn-Prpp09nxMrbfENr8B8g/edit?usp=sharing
Due: May 14, 2026 - 8:00 am
Points: 20
Find website examples for all of us to examine next week: 1 overall well done website, 1 poorly done website, must be different from the website of your Web Design Project 1 and you can't choose these websites because I always get these:
Craigslist
https://seattle.craigslist.org/
Lings Cars
https://www.lingscars.com/
Aww, they updated their website, this is how it used to look:
https://web.archive.org/web/20240111095625/https://www.lingscars.com/
Yale School of Art
https://www.art.yale.edu/
Try to find fairly contemporary websites for your examples. Picking a website leftover from the 2000's for your bad example is too easy. There are plenty of bad new sites (although not as many as there used to be).
Provide a brief statement about each website you pick:
Why the well done website works, plus a statement about one element that could be improved.
Why the poorly done website doesn't work as well. Also describe one thing this site does well.
Post the links to your sites and your statements about each in this Canvas assignment module.
Due next week.
I plan to review your website finds next week with the class and might ask you about them.
Figma is a cloud based tool you work with directly in the browser. I posted a poll in 2022 on Reddit what people were using for web design and got these numbers:
Now the tool is huge and used by a wide audience.
Get your free account set up this week:
You are required to use Figma on all projects. Web design projects will not be accepted that were not built in Figma.
Next week I want to take a quick tour of Figma in class with you guys and I want you to have it available to you so you can try it out. If you want to dive into this week feel free, it's not very difficult to do the basics.
Due: May 28, 2026 - 8:00 am
Points: 175
Find a small business website that is poorly done. Redesign it w/actual copy, reuse their copy or edit, write new. Make the sale. You will only design the home page, so don't worry about interior pages. I want you to create a design for the desktop and mobile. Design the entire home page, top to bottom (including the footer).
Find 5 examples of nice websites that you want to use for inspiration. Maybe websites in the same field, websites outside the field, cutting edge or formal designs. You can use a little of several inspiration websites, but make them somehow fit the client brand.
MOOD BOARD:
Create a Mood Board - Select photos, graphics, fonts, colors that help create the emotional resonance you are trying to project.
Examples of mood boards (don't feel you have to follow anyone's format, these are for you so put them together how you want):
https://www.newmediacampaigns.com/blog/what-is-a-mood-board-and-our-web-design-process
https://www.justinmind.com/blog/mood-board-examples-design-website-app/
MOOD BOARD IS DUE NEXT WEEK
WIRE FRAME:
Create a wireframe of the home page layout. Don't worry about making it complex or filling in a lot of detail. Just keep it simple. Some examples:
https://cacoo.com/blog/8-must-see-wireframe-examples-inspire-next-design/
https://careerfoundry.com/en/blog/ux-design/how-to-create-your-first-wireframe/
To create the wireframes, use whatever method works for you. You can sketch on your iPad, or use pencil and paper. In the past I have done them in Illustrator but now I do them in Figma.
Design your finished mockup in Figma, Photoshop or other graphic software. Starting with project 2, you are required to use Figma. Your mockup should look like a finished website, so use images, graphics, typefaces, etc.
REQUIRED DELIVERABLES:
When complete, upload all your work to the LRS: NCAD Instructor Files > Michael Wilford > Student Projects > Web Design. Create a folder for yourself that is Last Name-First Name and drop in there.
Due: May 14, 2026 - 8:00 am
Points: 25
MOOD BOARD:
Create a Mood Board - Select photos, graphics, fonts, colors that help create the emotional resonance you are trying to project. Use any platform you want to build it.
Examples of mood boards (don't feel you have to follow anyone's format, these are for you so put them together how you want):
https://www.newmediacampaigns.com/blog/what-is-a-mood-board-and-our-web-design-process
https://www.justinmind.com/blog/mood-board-examples-design-website-app/
MOOD BOARD IS DUE NEXT WEEK
REQUIRED DELIVERABLES:
When complete, upload all your work to the LRS: NCAD Instructor Files > Michael Wilford > Student Projects > Web Design. Create a folder for yourself that is Last Name-First Name and drop in there.
https://social-impact-capital.com/
https://www.newvalleylabs.com/
https://viewbook.collegeforcreativestudies.edu/
https://christiansonsheating.com/
https://www.kanaknaturals.com/
https://estudiosvictorcordon.pt/
https://traveloregon.com/oregon-still-slightly-exaggerated/
http://jumex.com/international/products/
https://www.crateandbarrel.com/
https://apexperformancegym.com/
https://creativemediaalliance.com/
https://www.stumptowncoffee.com/pages/brew-guide-aeropress
https://www.nespresso.com/us/en/home
https://www.currentaffairs.org
https://metropolitan-market.com
https://templetondistillery.com
Work on your project or other assignments from this class. I will try to check in with everyone each class.
This week's Musical Prelude:
Gary Numan - Cars (1979)
https://youtu.be/Im3JzxlatUs?si=bCFzoBeUP5YKCYyj
The Vibe: The Icy Synth-Pop Birth
Info: Gary Numan was a pioneer who completely abandoned the guitar-driven sounds of his punk contemporaries in favor of futuristic, alienating synthesizers. Cars was an absolute smash hit, proving to the mainstream music industry that electronic instruments could carry a pop melody all on their own.
Fun Fact: The song’s robotic, detached sound perfectly matches its origin; Numan wrote it after an incident of road rage where he locked himself in his vehicle, realizing the car was the only place he felt truly safe from the outside world.
The Web Design Class Prelude Playlist Theme is to celebrate New Wave music from the late 70's throughout the 80's.
Web Design Summer 2026 Playlist here (each week's new song will be added as the semester continues):
https://youtube.com/playlist?list=PLyha4OquaA4JvgySiRoyK-yxr0YKcKn6d&si=ot4qgmJTCFAwXvbR
Here is the link to the Google Slides for this lecture:
https://docs.google.com/presentation/d/1eZ6oJtQVjzw5uDKe-fnhCmvlcEOwDoT1Hy8auTrw-Ik/edit?usp=sharing
I am going to show you the basics of working in Figma. You should sign up for an account to try things out.
- FIGMA RESOURCES -
Figma Website Design Tutorial 2026 (Youtube)
https://youtu.be/23lJ2YAnlC8?si=xwdyyN-OVR0K9q5V
A Figma Course for Beginners:
https://help.figma.com/hc/en-us/sections/30880632542743
Here's a Resource Library from Figma that discusses design topics while using Figma:
https://www.figma.com/resource-library/
Here is the link to the Google Slides for this lecture:
https://docs.google.com/presentation/d/1xa2Xk6-RoCgRzw3IyD-G_ZWOxzi7vd40tDagsntoXzY/edit?usp=sharing
Here is a neat recreation of how the early internet web pages looked:
https://halloween.rgthree.com/movies/
Here is the cheeseburger flash website captured in video:
Due: June 11, 2026 - 8:00 am
Points: 25
Final project will be a working portfolio website for yourself. I want you to have your own domain and hosting account that you can keep online after have graduated. So I have found very inexpensive options for you:
Domain
(feel free to shop around, but don't use Godaddy)
https://www.namecheap.com/domains/
https://www.namesilo.com/
Usually the first year price is very cheap, but the price for every year after that could be expensive, so keep that in mind when purchasing.
Hosting
I researched hosts and came up with this as the best option, very inexpensive and support seems to be pretty good.
https://www.iwebfusion.net/shared
The starter plan will be all you need. I contacted them and let them know that my students would need hosting and asked what kind of discount we could get.
Use code: wilford20
That should give you a 20% reoccurring discount, for either monthly or yearly purchases. I make no money off of this, it's not an affiliate code. I just wanted you guys to get a deal. Just order the cheapest hosting at $5.15 per mo. so with your discount you can get it for $4.12 mo. You can always cancel it after class is over, but leave it up for a least a few days after class is over so I can grade it.
CONNECTING YOUR HOSTING AND DOMAIN
Here is a video showing how to connect your domain to your hosting:
https://www.youtube.com/watch?v=3g3e-2-itI4
These need to be completed by 4 weeks from assignment.
To turn this in, I want you to provide me the link to your web address on a document and turn in to the LRS. Drop your 1st HTML assignment (assigned next week) into the root folder so that it displays when I load your site. (Or some comparable indication your domain and hosting are hooked up).
We will look at some of the sites you guys picked out.
Work on your project or other assignments from this class. I will try to check in with everyone each class.
This week's Musical Prelude:
U2 - I Will Follow (1980)
The Vibe: The Earnest Post-Punk Rebellion
Info: Before U2 became stadium-rock legends, they were deeply embedded in the "post-punk" wing of the New Wave movement. This track demonstrates that early New Wave wasn't just about synthesizers; it was also about taking traditional rock instruments and playing them with atmospheric, echoing textures and relentless, driving energy.
Fun Fact: This live video from Red Rocks Amphitheatre became legendary on early MTV, helping cement the band's reputation as a transcendent live act, with the song's intense lyrics actually focusing on Bono's mother, who passed away when he was a teenager.
The Web Design Class Prelude Playlist Theme is to celebrate the evolution of New Wave music from the late 70's throughout the 80's.
Web Design Summer 2026 Playlist here (each week's new song will be added as the semester continues):
https://youtube.com/playlist?list=PLyha4OquaA4JvgySiRoyK-yxr0YKcKn6d&si=ot4qgmJTCFAwXvbR
Here is a secret website example, don't open this web page or your head might explode:
https://www.cameronsworld.net/
Here is the link to the Google Slides for this lecture:
https://docs.google.com/presentation/d/1soAQTTbYcag18_vlTRwkj32lzmYL0FnP5oJs3HEv88k/edit?usp=sharing
Due: May 28, 2026 - 8:00 am
Points: 20
I have recorded a video where I will guide you in typing out your own basic HTML page. We're just going to be doing very simple stuff for this assignment. You will then use this basic HTML page as a starting template for future coding assignments.
Please use the Brackets program for writing the html code if you can, it will be very helpful in coding. It is installed already on your class computer, but it is free and works on both Mac and Windows so you can install it:
Or you can use this online tool here:
Upload your HTML file to your folder in the LRS.
Due next week - 20 pts
Here is the link to the Google Slides for this lecture:
https://docs.google.com/presentation/d/1a89Tyxr0q3mhMMtliTYX_0uuS6Qn0osYSXnVVz3eNC8/edit?usp=sharing
Here are some resources that talk about 2026 trends (some trends are bs):
https://www.theedigital.com/blog/web-design-trends
https://pros.squarespace.com/blog/design-trends
https://elementor.com/blog/web-design-trends-2026/
Here's compilation of websites that aggregate design examples:
We will continue to look at some of the sites you guys picked out.
Work on your project or other assignments from this class. I will try to check in with everyone each class.