Personal Project Instructions - Updated Fall 26

Using AI on This Project Allowed

You MAY use AI to help plan, design, and build this site, but you don't HAVE to.
I will ask you at the end what you used AI for, and how things went.
The requirements below have not changed, whether you use AI or you do not.
For my assessment, I will take into account how much AI was used on each project, if any.
AI is a tool you can use, but has it's own learning curve .
The hints below are not a recipe: part of the assignment is figuring out how to work with AI well.
Watch the clip from the Matrix at the end of this page so you know what you are getting into :)

The free version of Claude is enough for this project. It includes Projects (a workspace that remembers your files and instructions) and Artifacts (live previews of the HTML/CSS it writes). You must be 18 or older to create an account.

A Typical AI-Assisted Process

Set up a Project. Create a Claude Project for your site. Add your topic, audience, and the Specifications from this page as project instructions so you don't have to repeat them in every chat. (Free accounts can have up to five Projects.)
Plan with it, not by it. Use AI to stress-test your content inventory and sitemap. Try asking it what your audience would expect to find that you're missing — then decide for yourself.
Keep sketching by hand. Your sketches and wireframes are still yours. Photograph them and upload them to get feedback on composition and hierarchy, or ask how a layout might change between mobile and desktop. You CAN use AI to do the wireframes as well, but do not just accept what pops out.
Prototype one page at a time. Describe a wireframe (or upload it) and ask for an HTML/CSS version as an Artifact. Small, specific requests work much better than “build my whole site.” Iterate in small steps.
Move it into VS Code. Copy the code into your own site folder, split the CSS into its own file, and add your real content and optimized images. This is where your human skills and style are needed.
Make it explain itself. For the CSS Grid, breakpoints, responsive images, and web font, ask the AI to explain each part line by line. Switching Claude's style to Learning makes it guide you with questions instead of handing over answers. You can also start with a prompt like this:
“Act as a tutor. Explain this code in small sections, ask me questions to check my understanding, and let me answer before continuing. Do not rewrite the code unless I ask.”
Verify everything. AI makes mistakes and sometimes uses outdated code. Test in device mode, run the HTML validator and CSS validator, and ask the AI to review your finished pages for accessibility and usability problems.

Your responsibility: Try to understand every line of code you turn in and be able to explain your design and code choices. Make sure all images and text are yours, properly licensed, or credited IF you plan on publishing this site for real.

References

Getting started with Claude

Claude – sign up for a free account
How can I create and manage projects? – Claude Help Center
Examples of projects you can create – Claude Help Center
What are artifacts? – how Claude previews the HTML/CSS it writes
Publishing and sharing artifacts – Claude Help Center

Learning with AI, not just from it

Configure and use styles – how to turn on the Learning style
Claude's Learning mode is available to everyone – Engadget
AI Fluency for Students – free short course from Anthropic Academy
Prompt engineering overview – tips for writing clear, specific prompts

Checking AI-written code

W3C HTML Validator and CSS Validator
MDN: CSS Grid Layout – compare AI code to the official reference

OBJECTIVE:

To Develop a well designed HTML project that presents information on a topic of public interest that you feel strongly about or effects you personally. If you have another type of site you would like to do, just run it by me. This is the major solo project for the class, so if you have a website you have been wanting to do for yourself or someone else, this would be the time.

You have a lot of freedom on this one as far as the topic of your site

The process is similar to the previous project

Do a content inventory/list for the site
- You do not have to turn this in, but it will be valuable in your process
Do information architecture for the site
- This is to organize the information and content you came up with while doing the content inventory. You can use draw.io, or whatever app you like for the site diagram/sitemap, or word for an outline in text form listing your pages and their relationship to each other.
- You do not have to turn this in
Do at least 16 sketches for design ideas
- Do some quick, small drawings to get ideas for your design.
- Do at least 2 desktop versions for at least 4 screens.
- Do at least 2 mobile versions for the same 4 screens.
- Again, thumbnails are small sketches used to explore ideas for your design.
- Get blank horizontal thumbnails here.
- Get blank vertical thumbnails here.
- To turn in the sketches, post them in the Personal Project Sketches Discussion forum in Canvas. You can take a photo with your cellphone or scan the sketches, add them to your files in Canvas, then post them in the Sketches Discussion forum.
  - Here is how to upload files for Canvas so you can post them in a discussion
  - Here you can see how to add images to a post from your files after uploading
  - See Specifications for points
  - Check the Canvas calendar for due dates
Option 1: Do at least 8 Wireframes
- For the wireframes, do desktop and mobile versions of the main screen and at least 3 other screen types (8 total minimum).
- The wireframes should be fairly detailed, using actual text as much as possible, especially for headings.
- Here is a link to the GDS 072 class from Spring 23 with links to tons of videos and articles about figma and design in general. Feel free to take a look in your free time ;) especially if you are having trouble using figma for wireframes. I think some of you have taken GDS 072, and some haven't, but the videos and links are available to you.
- Here is the link to some sample student wireframes and comps from previous semesters
- Good wireframe examples can be seen here.
- You can do the wireframes online in figma, or using whatever software you want (figma would be best).
  - You can use figma.com again for the wireframes.
  - Here is a video on the basics of Figma, Introduction to Figma.
  - Here is another video Introduction to Wireframing in Figma.
    - Here is the link to the start file used in the video, and that you can use as a starting point for wireframes if you wish :)
  - You can use other software instead if you wish. If you use figma, you can share the wireframes with me instead of uploading them.
  - You can turn these in by sharing the figma files by clicking the share button in the top right while in figma.
  - Sketch
    - Sketch is another tool for creating comps/mockups, but can also be used for wireframing.
    - Here are some wireframing resources for Sketch
  - Article: The best wireframe tools in 2021
  - http://gomockingbird.com/
  - https://app.diagrams.net/
- You can download sample, wireframes, comps, templates and resources here (LOTS OF GOODIES!), although some are dated.
- You can turn in either the wireframes, OR, the comps below
- See Specifications for points
- Check the Canvas calendar for due dates
Option 2: Do at least 4 comps
- For Comps, do desktop and mobile versions of the main screen and at least 1 other screen type (4 total minimum).
  Comps are mock-ups of your pages usually done in Figma, Photoshop or Sketch. They can also be done in other applications. They should look like the final version of the html page will look, so you can show the client what their site will look like. You can turn these in by sharing the figma files by clicking the share button in the top right while in figma.
- See examples of thumbnails and comps here.
- You can turn in either these, OR, the wireframes above
- See Specifications for points
- Check the Canvas calendar for due dates
If you use Figma for the Wireframes and/or Comps, please turn in exported image files in Canvas and put a COPY of your figma file in our class Figma team, in the appropriate project.
Create the site pages
- See Specifications for points
- Check the Canvas calendar for due dates

Project Description and Examples. This video does NOT address AI use.

Point Breakdown

Project Grading Scale	Possible
Sketches	5
Wireframes or Comps	10
Project Specifications	15
Design and Finesse	20
TOTAL POINTS:	50

Specifications (15 points):

The Minimum Requirements Are

4 linked web pages
Turn in Wireframes OR Comps (See below)
Use CSS Grid somewhere in the site
Use responsive images
Use at least 1 Web font by either including and using the font files in your site folder, or by using a font service that hosts the fonts remotely (This requirement may not be in the video description on this page, but it is required.)
Create a responsive design with at least 2 breakpoints (3 design changes)
- For example, you start with a mobile, 1 column design, and then make changes at 2 more browser/viewport widths
- You can see how your page would look on different devices by using these browser features (instructions are linked below)
  - Chrome Device Mode
  - Firefox Responsive Design Mode

Suggestions

Make sure to choose proper graphics, text and colors for the intended audience and content
Again, hopefully you already have been using these, but make sure to check your sites in mobile design/RWD modes in browsers
- Simulate Mobile Devices with Device Mode in Chrome DevTools
- Responsive Design Mode (in firefox)

Design & Finesse: (20 points)

Communicate the message
Design fits the content
Proper optimization of images
Good composition of pages
Good color harmony
Good functionality/usability
Intuitive and functional navigation
Type should be legible, use appropriate fonts for the design
Final Presentation to the class

GDS 46