Website Design – Instructions (DF)

NOTE: You do not need to do critiques for this project.

1. Read the Overview, Grading Checklist, & Best Practices

Overview

For this project, we’ll create a portfolio website using only HTML and CSS coding. Don’t worry, you won’t have to memorize long strings of code, or even type it in. You’ll be using my code and merely tweaking it to add your own logo, navigation categories, photo, and images.

Our main goal
will be to introduce you to an HTML website and explore how the fundamentals of design work with web design.

We’ll explore:

  • How to deliver an appropriately focused message to your target audience.
  • How to use layout, chunking, unity, emphasis, balance, rhythm, colors, and typography to design an effective website
  • What an appropriate design for a website looks like

The Website you’ll create

Here’s the home page of my website. It features the holy grail website layout. It also features nine photo examples of my work. You’ll change a lot of it to make it your own. I’ll show you how in the tutorials below.

Best Practices

The Holy Grail Website Layout

This is the most commonly used website layout. It’s so common it’s usually referred to as the holy grail website layout.

It utilizes many of our design principles:

  • It unifies its content blocks with a consistent layout.
  • It chunks together small pieces of information and delivers them in little bits to the viewer.
  • It emphasizes the larger categories, namely the header and main article subject.
  • It provides a nice visual hierarchy, leading the viewer’s eyes through the page from top-left to bottom-right.
  • It allows the chunks of information to be realigned and reordered when the website is viewed on different sized screens.

I’ve tweaked the holy grail layout template a bit to look like this:

Grading Checklist

  • Design one portfolio website with three web pages (home page, and 2 additional category pages linked in your nav.
  • Use only HTML and CSS coding
  • Use my HTML website template (download template below)
  • Software: TextEdit on the Mac (or another simple text editor like Brackets, Notepad, etc.)
  • Show at least 9 photos/images per page
  • Header: Change the logo to be your own (use .ai template below)
  • Navigation: Choose three related categories (photos, painting, drawings, cookies, flowers, dog breeds, etc.)
  • Article: Use 27 of your own photos/images (9 per page) or get photos from unsplash.com, pexels.com, or pixabay.com
  • Aside: Change the photo, welcome sentence, and email link to be your own
  • Footer: Change to be your own
  • Change the typeface and colors to be your own

2. Download the HTML and CSS Template

You’ll use these HTML and CSS files as the foundation of your portfolio website. This .zip file has everything you’ll need to get started designing your first website.

IMPORTANT: Once you download this website template folder keep it in a safe place. This will be your copy that you customize for this project and show me for a final project grade.

tutorial_website_DF.zipDownload

What the template looks like
Here is what your three web pages look like when you open them. You’ll replace many of these elements to make this website your own.

It’ll be fun, so let’s get started with number three.

3. Watch this introductory video

This video will show you how to open your HTML and CSS Files in TextEdit on the Mac, and how to view your website in any browser. It will walk you through the basics of web design and what each area of the HTML and CSS code does.

PC/WINDOWS/MAC users watch this video too

(And Mac users who want to use the code editor Brackets)

https://brackets.io/

This video shows how to download and use Brackets, an alternative code editing software. This works well for students using a PC/Windows computer. Be sure to watch the video above as well, you’ll need both to complete this assignment.

Download the file below and open it in Illustrator. Change the name, typeface, and colors to make it your own.

Then, save it to use on your own website folder
File > Export > Save For Web (Legacy)…
PNG 24, Transparent
Save it into your images folder named: website_header_name-logo.png

website_header_name-logo.ai.zipDownload

5. Choose your website’s topic

Decide what you’re website will be about. Write down your three categories that will become your three web pages. They will also be the three categories in your navbar.

6. Find 27 photos

Use unsplash.com or pexels.com to find 27 photos to use on your website. Each category should have at least 9 photos. Download these photos and keep them in one folder.

7. Make all your images web-friendly, 1080×1080 px

Web-friendly images are run through a special process in Photoshop to greatly reduce their size. This makes them load faster on a web page when it’s viewed. This process will also properly names your files and organizes them as you prepare to add them to your website.

1. Gather all of your images first. I have all mine in a folder on my desktop.

2. Open Adobe Bridge and find the folder with all your photos

3. Select all your photos and open them as layers in one Photoshop file. Be patient, this might take a few minutes.

4. Here’s how my photos look as multiple layers in Photoshop

5. In Photoshop, change your canvas to 1080 x 1080 pixels

6. Now all you have left is to choose a layer with a photo and Command-T to transform it. Reduce each photo and crop it the way you want it to look in the 1080×1080 size.

7. Now we’ll save your photo as a web-friendly JPEG.

8. Hide all layers except the photo you want to save. Click the little eye next to the layer to make it invisible or visible.

9. Now save your photo as web-friendly

10. Choose JPEG, High Quality, and Optimized. Double-check that your size is still 1080×1080 pixels. Click Save.

11. Save all of your photos as web-friendly photos into your images folder (in your website folder). I named mine to correlate with the categories on my three web pages. This organizational forethought makes it much easier later when you add them to your web pages.

Here’s how my images folder looks. Be sure to include the file extension (.jpg on photos, .png on your header)

8. Customize the website to be your own

You’ll change the highlighted areas in the HTML text on all three web pages.

OPTIONAL: In the CSS code, you can also change the colors of the header, footer, h1, etc. if you want.

Video: How to Customize your Website

Watch this video to see how to add your own photos and customize your website further.

9. Send me your .zip website folder to grade

Once you’re done customizing your website,

  • Rename the main folder tutorial_website_DF to: website_first_lastname
  • control-click this newly named folder and choose:
    compress “folder name”
  • That will make a .zip file of all your website files
  • Email me or upload the .zip file to the Blackboard assignment area for me to grade.

Nice work!