Web Design Class - Summer 2026

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.

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:

•  Provide the links to your inspiration sites
•  An image of your wireframe.
•  Web Design Mockups (Desktop & Mobile) - Output a .jpg of the design mockups at actual size.

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:

•  An image of your mood board

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: 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).

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.

https://youtu.be/KOE6RgYmqAk

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:

https://brackets.io/

Or you can use this online tool here:

https://phcode.dev/

Upload your HTML file to your folder in the LRS.

Due next week - 20 pts

Due: June 18, 2026 - 8:00 am

Points: 175

Websites are expected to do a job, and that job is to be a 24/7 salesperson. Making the sale is the focus of this project.

You will design a sales landing page for a real product, service, or event. Unlike a business homepage that introduces a company, this page has one purpose: conversion. Every element should push toward making the sale.

This landing page will be the destination for users who have clicked an ad about your product. They're already intrigued, you just have to sell them.

Product Selection: Sell Something Real

You must sell something real: a tangible product, SaaS subscription, or conference/event sold by an actual company. No invented products.

Why? Portfolio pieces for real products demonstrate transferrable skills and look more impressive to employers than fictional websites. You're learning to think like a professional, not designing in a vacuum.

Requirements

Maintain existing branding: logo, brand colors, overall brand voice. You are redesigning the landing page, not rebranding the company.

Do something different: new layout, colors, fonts, structure. You are not replicating what currently exists.

Identify what's not working: articulate problems with the current online sales presence and what you would do differently.

SALES COPY

One twist to this mockup is that I want you to use actual working sales copy for the entire page, from headline to CTA (Call To Action) to body text. I want you to make the sale! I want you to organize the page so it flows from the beginning, and carries the web visitor (user) all the way through to the CTA button.

USE AI AS A TOOL

Modern Workflow & AI Collaboration

AI tools are now part of the professional web design workflow. This isn't an AI class, but I want you to experience how modern designers work, using AI as a collaborative partner for research, structure, and copy generation.

How AI Fits This Project

You are encouraged to use AI tools to help you:

Research — competitive analysis, customer insights, brand voice analysis
Structure — outline your page, organize sections for conversion flow
Generate — draft headlines, copy, calls-to-action
Refine — edit and improve generated content

Get Multiple Generations of AI Text

When developing copy for the page, use the same prompt on 2 or more ai models, such as Claude, Gemini or ChatGPT. Then take those 2 or more versions of your copy and edit a new version based on those.

The Critical Rule

No AI output should reach your final landing page unedited. You must demonstrate critical evaluation, curation, and editorial judgment. AI is a drafting partner, not a final author.

A Note on Choosing Your Path

If you are philosophically opposed to AI, you may complete all writing and research manually, but you will be held to the same standards for research, analysis, and copy quality. This is a legitimate path, but it requires more time and effort.

I'm not requiring AI because I think it's inherently good or because I want you to love it. I'm requiring it because it's now embedded in professional workflows, and understanding how to work with it strategically, while maintaining your own creative judgment, will differentiate you from designers who can't. The genie is out of the bottle. If you build your own independent practice, you can choose your tools. If you ever hope to get a job with health insurance, you better understand this workflow.

MARKETING RESEARCH REPORT

Research Requirements

Every student must conduct and submit research, whether using AI assistance or not.

1. Competitive Analysis

• Research 2 comparable products/brands
• Analyze how competitors position themselves and sell similar products
• Use this to inform your own design and copy decisions

2. Current Brand/Marketing Analysis

• Research how your product is currently sold and branded
• You may change the brand's approach to selling if you believe your strategy is better, but justify the decision
• Do not simply recreate the company's existing sales materials

3. Customer Research

• Use reviews, forums, support documentation, or other sources
• Identify customer pain points, objections, motivations, and needs
• The best landing pages address real objections that customers actually have

4. Brand Voice Analysis

• Collect 3-5 examples of your product's existing marketing content (homepage copy, product descriptions, emails, social media, ads)
• Analyze the brand voice: describe tone, sentence structure, vocabulary, positioning, and 5-7 adjectives capturing the brand's personality
• 150-300 word summary that informs your copy decisions
• (AI tool assistance recommended for this step)

LANDING PAGE ELEMENTS

HEADLINES

Headlines are critical, especially the first one. The user on your page is skeptical, they need to know what's in it for them, quickly. A good headline hooks them in and gets them to continue reading.

THE OFFER

You want a strong offer that makes your user think "Duh, I would feel stupid for not taking this up." Provide massive value in your offer.

CALL TO ACTION

With just a few words, it should be very clear what you want the user to do and the incredible value they'll get by clicking. Example: ORDER NOW (or something creative, but it must be obvious they're ordering).

SOCIAL PROOF

Social proof is one of the biggest levers to increase conversions. People are influenced by other people. Your user should see themselves in product testimonials. The best testimonials are clear on:

• The crappy "before" state
• What else they've tried
• What they were skeptical about
• The results they've had
• What their life looks like after using the product

Displaying logos of companies that use your product is another way to show social proof.

OPTIONAL SECTIONS

• Demos and "How It Works" section (especially for SaaS)
• Product Specifications
• FAQ Section

CONVERSION ELEMENTS

Your page must include mechanisms that drive action:

• Limited time offers or urgency
• Testimonials and reviews
• Limited stock/availability
• Social proof markers
• Other persuasive design techniques

Design Priorities

Not only are you creating a well-structured page leading to a conversion, I want you to design a page that is amazing and gorgeous. Design the typography as if you are the Leonardo da Vinci of type. The design could be understated and classy (think jewelry ads) or exciting and vibrant (think Skittles commercials).

But don't lose track of your #1 priority: keep the user reading and make them click the CTA.

LANDING PAGE DESIGN LECTURE

https://docs.google.com/presentation/d/1iqBkXOu7BMMhGjFkga3fBHnYEobmCD7WZ8itjjIGQOc/edit?usp=sharing

REQUIRED SUBMISSIONS (DELIVERABLES):

Here are the project elements to turn in and any formatting comments:

1 - Marketing Research Report

2 - Mood Board - Submit this as a .jpg or .png file.

3 - Website Wireframe - Submit this as a .jpg or .png file.

4 - Desktop Mockup: landing page mockup - Submit this as a .jpg or .png file.

5 - Mobile Mockup: take the same elements as desktop and squeeze them into a mobile sized screen. - Submit this as a .jpg or .png file.

LANDING PAGE EXAMPLES

https://ecgemsxmarvel.webflow.io/

https://akutostudio.com/

An example of a poor landing page:

https://airvidachambers.com/

https://www.amandalanford.com/pages/trash-animals-offer

https://www.themesystem.com/

https://www.lesbrownmasterclass.com/march-event

https://conceptcapers.com/

https://poetry.camera/

https://iambic.co/executive-experience/

https://www.supaglue.com/

https://www.ancestry.com/name-origin?surname=wilford (try your own last name in the URL)

https://www.aindo.com/

https://webflow.com/

https://www.timetackle.com/

https://www.loom.com/

https://mercury.com/

Due: June 4, 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:

•  An image of your mood board

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: 2 weeks from now. June 25, 2026 - 8:00 am

Points: 40

For this assignment you will put together some html and css code into a very small web page project, not like a full website page, but more like a web poster. This web page will feature either a quote, a short poem (or poem snippet), or a song lyric and it will have a full page background image.

I demo how to do this in this video, so follow along and type out the code as I give it to you:

https://youtu.be/y4TqavBdafg?si=fIZQnuTgr2y83CB5

Pause the video as needed to get the code or instructions.

That demo is just to give you the framework and tools to customize the page to create your own Quote/Lyric Page. To complete your assignment, you will need to pick a quote of some kind, find a background image for your page, and set up your quote to float in an appropriate spot on the page.

Your version is due in 2 weeks. We'll probably take a look at the submissions to the class and admire them, although it will depend on time available.

Put both your html file and your background image into a folder and then compress the folder into a zip file and upload it to your folder in the LRS.

Resources:

Background image from demo (you're not required to use this):
https://i.pinimg.com/originals/64/51/dd/6451ddd138554e83483a505798b2e457.jpg

https://css-tricks.com/perfect-full-page-background-image/

https://freefrontend.com/css-text-effects/

https://freefrontend.com/css-text-shadow-effects/

https://freefrontend.com/css-glow-text-effects/

-----------

For writing your code, you can either download the Phoenix Code Editor or use it in the browser:

https://phcode.io/

Put both your html file and your background image into a folder and then compress the folder into a zip file and upload it to your folder in the LRS.

Due in 2 weeks - 40 pts

Due: 3 weeks from now. July 9, 2026 - 8:00 am

Points: 175

For this project, you will create an original website brand and homepage design inspired by one of your interests, hobbies, or favorite things. Unlike Project 1, this is not a redesign of an existing website. Unlike Project 2, this is not a pure sales landing page for a real product.

This project is about creating a believable new brand for a non-physical product or service, with a clear purpose, a specific audience, and a strong Call To Action (CTA). Your final design should feel like a real website someone might actually pay to have designed.

You will design:

• 1 desktop homepage mockup
• 1 mobile homepage mockup
• 1 mini style guide
• plus the normal required process work (mood board, wireframe)

Project Guidelines

1) Create an original website brand

Your site should be for a non-physical product, such as: event, service, experience, app, or media brand that you invent.

Your concept should fit into one of these categories:

• events
• bookable services
• coaching / training / programs
• experiences
• digital products / apps
• media brands (ex: Youtube-based media company)
• memberships
• specialty service businesses

2) Your site must have a purpose

This is not just a website "about" something. It needs a real goal and a clear user action.

Examples of CTAs:

• Book your first session
• Get tickets
• Register now
• Join the waitlist
• Reserve your spot
• Enroll now
• Subscribe
• Get passes

3) Include a simple brand identity

Create a brand name and a simple logo, wordmark, or text treatment for the website header. This does not need to be a huge logo project, but it should feel intentional and fit the design. Let's assume the client is not paying for a logo redesign but their current one is so terrible you are redoing it and coming up with the colors and typography of the site to match it.

4) Do not choose these directions

Please avoid:

• redesigning an existing company
• generic online stores / ecommerce
• single-product sales pages
• vague fan sites
• simple informational sites with no real goal

Possible Directions

You do not have to choose one of these, but these are strong examples with CTAs:

• Beginner-friendly climbing gym program — Book your first session
• Independent music festival or concert series — Get tickets
• Esports tournament brand — Register your team
• Fan convention or themed event — Get passes
• Guided outdoor adventure or specialty tourism experience — Reserve your spot
• Wellness, fitness, or personal coaching service — Book a consultation
• Interest-based mobile app or digital platform — Join the waitlist
• Cause-based campaign or mission-driven organization — Get involved
• Cooking workshop series for busy adults — Enroll now
• Independent film festival — Buy festival passes
• Podcast network or media brand — Listen now or Subscribe
• Adventure race / specialty sports event — Register now
• Wedding planner — Book Your Free Consultation

Required Process

1) Project Summary

Submit a short text file that includes:

• your brand/site name
• what the website is for
• who the audience is
• the site's main goal in one sentence
• the primary CTA

2) Design Inspiration

Find 3 websites that inspire your visual direction, structure, or branding.

3) Mood Board

Create a mood board showing the visual direction of your site:

• images
• colors
• typography ideas
• design style / vibe
• UI inspiration if helpful

4) Wireframe

Create a simple wireframe for the homepage layout before you begin the final mockup.

Final Design Requirements

Desktop + Mobile Homepage Mockups

Your homepage should include:

• header/navigation
• hero section (does not have to be one big hero image)
• clear CTA
• supporting content sections
• footer

Mini Style Guide

Create a style guide for your design that includes:

• brand name + logo/wordmark/text treatment
• color palette
• H1, H2, H3, body text
• button styles + hover state
• link style
• modules/components/sections used in your design (if applicable)

Keep this practical. Think of it as a mini design system for your homepage.

A common approach these days is to create 3 or more Artboards with each one covering a different design aspect, like this:

Artboard 1: Brand core

• logo/wordmark
• color swatches with hex codes
• a short brand description
• maybe a mood or tonal reference

Artboard 2: Typography

• H1 / H2 / H3 / body / small text
• shown as actual text, not just font names
• sometimes on light and dark backgrounds

Artboard 3: Components

• buttons (default and hover)
• links
• maybe form fields
• maybe a card or module

You can then export each Artboard into an image. This format is not required, just make it look clean and organized.

Assignment Deliverables

1. Project Info — text file (see above for details)
2. Mood Board (Due in one week)
3. Website Wireframe
4. Home Page Desktop Mockup
5. Home Page Mobile Mockup
6. Mini Style Guide

Due in 3 weeks - 175 pts

Due: June 25, 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:

•  An image of your mood board

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: July 9, 2026 - 8:00 am

Points: 40

In this assignment you will learn to create a navigation bar using Flexbox and build out a content section below it. Use your first assignment with the basic HTML structure as a starting point.

I demo this assignment in this video, so follow along and type out the code as I give it to you:

https://youtu.be/xk2iU-Eorns

Pause the video as needed to get the code or instructions.

CSS Flexbox generator:

https://www.mycssbuilder.com/

Images I use in Demo (zip file)

Now to complete your assignment, I want you to edit this page so it is your own crazy fast food item with your own creative description. You can change the restaurant, colors, fonts, text and images. Make us laugh.

Your HTML file, CSS file and your images folder should be enclosed in a folder (and only those items in the folder). Compress the folder into a zip file and upload it to your folder in the LRS.

Due in 2 weeks- 40 pts

Due: 5 weeks from now. August 13, 2026 - 8:00 am

Points: 350

This is what we've been leading up to all semester. A portfolio website of your own. You should have your website domain and hosting purchased and in place by now.

I want you to spend this week putting a mood board together and hopefully start designing a mockup of your portfolio home page in Figma. At this stage don't worry too much about how you will build it. When you do end up building your design in Wordpress, you may have to make some compromises to get it to work, but that's ok.

This week is not about building yet. I want you to design first. Next week we'll all be getting our websites set up for production.

If you want to install Wordpress now that's fine. I am going to recommend the Blocksy theme to create a customized site.

Deliverables:

• Mood Board (As usual - Due next week)
• Home page wireframe
• A JPG of your Figma mockup
• A customized home page built in Wordpress. (provide me the domain in a text file)
• Organized galleries of your work - can be on separate pages.
• Some way for someone to contact you about jobs/work

Final completed website is due the last day of class.

Portfolio Website Examples

https://www.madelinekendallart.com/
She just landed a part-time job about a week ago

https://www.sarvesh.co.uk

https://www.sebastienkaro.com

https://www.evanmadden.com

https://www.badcharacter.ca

https://victorpared.es

https://sephsota.com/portfolio

https://thomasdarbydesign.com

More Portfolio Resources

https://www.reddit.com/r/graphic_design/comments/u14sxx/portfolio_advice_for_new_designers/

https://www.reddit.com/r/graphic_design/comments/zloe42/ten_portfolios_to_study/

 

Due in 5 weeks - 350 pts

Due: July 16, 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:

•  An image of your mood board

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: August 13, 2026 - 8:00 am

Extra Credit Points: 100

In this assignment you will learn to create an interesting grid structure using CSS Grid, then customizing the project to your own topic with photos, animated gifs and videos. Use your first assignment with the basic HTML structure as a starting point.

I demo this assignment in this video, so follow along and type out the code as I give it to you:

https://youtu.be/jg34-WCnyDY

Pause the video as needed to get the code or instructions.

- RESOURCES -

Viewport code (copy this line and paste into your html file in the head section):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Grid Generator

https://cssgrid-generator.netlify.app/

Images I used for my demo: 

images.zip

Now to complete your assignment, I want you to edit this page so it is your own topic with photos and clips to match. You can change the CSS grid structure to your own or keep it as I have.

Your HTML file, CSS file and your images folder should be enclosed in a folder with your name on it. Compress the folder into a zip file and upload it to the LRS.

 

Due in 3 weeks- 100 Extra Credit pts