The diagram below shows the files that should be in your
GD50 directory on the server, and how the file structure should be organized.
/ +--> GD50/ | +--> hw7-1/ | +--> hw9-1/ | +--> hw10-1/ | +--> hw11-1/ | +--> hw11-2/ | +--> type-specimen/ | +--> info-site/ | | | +--> mood.jpg | |--> home.jpg | |--> interior.jpg | |--> markup.html | +--> index.html | +--> final/
All codepen assignments should be in your GD50 collection in you codepen account.
Make a copy of you team's entire website redesign project folder and save it into your
GD50 folder on the server. Rename the project folder
final. Be sure to check your personal portfolio page to ensure that everything is exactly the same as your group's website.
For this final project, you will be working in groups to redesign a website for a local non-profit organization.
Visit the websites listed below to preview their content and design.
Now use this link to choose which site you would like to work on. You will asked for a first choice and a second choice. I will use the results to form your teams.
|Arte Americas group 1||Arte Americas group 2||Rock Climbers||Meux Home group 1||Meux Home group 2||Bully Rescue||Feral Paws||Centro de Folklor group 1||Centro de Folklor group 2|
As a group, thoroughly go through the site you will be redesigning. Talk about the different people who would use this site and what their needs and interests are. Create an inventory of the site by listing all of the content you find, even things that might not be in the navigation. Make a list of all the different tasks a person can do or would want to do at this site. This list will become your cards for the card sorting.
Using the techniques you learned in class and from the Lynda playlist, set up and conduct a card sorting experiment. You may use physical cards or ux testing software such as Optimal Sort. Conduct the test on a minimum of five people. Make sure you have the final data saved in some sort of spreadsheet (if using physical cards) or online.
Collect all of the content for your website into an HTML file. Every element should be inside some sort of semantic tag. This is the same thing you did in assignment 10, so check out that description below, and the helpful reference links.
Name your page as
markup.html and save it into your
info-site folder on the server.
When you begin the process of designing a website, a good first step is to create a set of website mockups to communicate the structure, user interface, and overall "look and feel" of the site. These mockups are simply images we create that show what the website will look like without needing to dive straight into coding. These mockups are just flat images that cannot be interacted with, but look like a screenshot of a website page. We use these mockups as a way to communicate design ideas back and forth with our clients and also as a “blueprint” to develop the website once design is approved.
Mockups aren't always used during the design and development process. Some people use other methods, such as style tiles or frameworks and templates.
Create at least two mockups of your website. One should be the homepage and the other should be an interior page. Often, the interior pages of websites have the same layout, so you don't have to mockup every page. Make sure your mockup contains all the detailed elements you will need on the site. Your final coded website will look as close as possible to these mockups.
Save your mockups as jpgs named
interior.jpg and save them into your
info-site folder on the server.
IMPORTANT TIP: Designing for the web in Illustrator is not the same as designing for print. You need to set up your artboard in pixels and stay in a 100% view as much as possible. Here's a how-to article about all that: Use Adobe Illustrator to Create a Clean Website Layout. However, STOP when it the article gets into "slicing" (section 4). That method is very antiquated.
A Mood Board is a collection of images that are tied together by a particular theme, keyword, or concept. Think of this as a collage, like an interior design would gather photos and swatches to convey the mood of the space they are creating. In addition to photos, you can include color palettes, typography, and textures.
Start by gathering as many inspiring images as you can find. Then filter them down to those that seem best suited for the project you are working on. Organize them visually and play with different combinations and compositions. Be sure to include a color palette and type choices.
Create a folder named
info-site inside your GD50 directory. Save your mood board as a jpg named
mood.jpg and upload it into the
info-site folder. Make sure that you optimize your jpg for web viewing.
Sign up for this free course on CSS Flexbox.
Watch videos 2,3,4,6,7,8, and 9. I encourage you watch more if you have time or would like more instruction.
Play the FlexBox Froggy game.
Watch this short video in which Jen Simmons gives an overview of the relationship between CSS Grid and Flexbox.
I'm giving you two versions of a typical web layout where flexbox could be used to properly place the navigation and social media elements. This is what they look like now: horizontal layout, vertical layout
Your assignment is to make them match the screenshots below using flexbox, plus other CSS properies for styling.
Name the folder with the horizontal layout
hw11-1 and the folder with the vertical layout
hw11-2. Upload them both into your
GD50 directory on the server. Make sure the HTML file is named
Watch this Lynda playlist about HTML semantics. Duration: 38 minutes
Take the content of this word document and turn it into an HTML page using only sementic tags. There isn't just one way to organize this, so use the tags that make sense to you. Do not apply any CSS styles — only basic HTML.
Name your file
index.html, save it into a folder named
hw10-1, and upload it into your
GD50 directory on the server.
Here is a zip file with an unfinished webpage. Download it and apply styles to all the different link elements. You will need to create four different syles for the following types of elements:
Save the files into a folder named
hw9-1 and upload it into your
GD50 folder on the server.
Watch this Lynda playlist about the CSS pseudo selectors. Duration: 12 minutes
Starting with the pen I have created for you (embedded below), add the necessary pseudo selectors to make the squares change color when hovered over and when clicked, like in the animated gif underneath. Use whatever colors you like. Save the pen in your GD 50 codepen collection.
Need more instruction? Check out the w3schools' pseudo class tutorial.
Now that you know how to upload files to a server and link them in your html with specific file path names, you are able to include more media assets into your pages, such as images.For Thursday, do the following...
index.html, save it into a folder named
hw7-1. Place your images inside a folder named
imgs. You can name your image files however you like, as long as the file path names are correct in the html.
On Thursday you should bring two project folders to class.
hw7-1folder with you image gallery page in it
Your final type specimen should be in html and css and uploaded to the server (see Resources section for FTP instructions). Be sure that it includes all the elements listed in the mockup instructions.
Save your html and css in a folder named
type-specimen and upload it into your
GD50 directory on the server. Be sure to name your html file
Watch this Lynda playlist on CSS fundamentals. Duration: 34 minutes
Now create a grid that will serve as the overall structure of your type specimen website. Start by analysing your mockup. Identify the larger sections and create a grid in HTML and CSS, based on those lines. Here's the example I did in class. It doesn't have to be perfect, and you'll probably make changes later, but you gotta start somewhere right?
It might help to add a border to the divs, and maybe some height, so that you can actually see the grid. Here's an example in codepen.
Save your work in your GD 50 collection in codepen.
Watch this Lynda playlist about the way HTML elements are aligned and displayed. Duration: 14 minutes
Starting with the pen I have created for you (embedded below), recreate the screenshot using what you learned from the videos. You can also find the pen in the "50 — in-class exercises" collection in my codepen account.
In typography, type specimen refers to a presentation of a certain typeface to showcase its design and/or use.
For this extended project, you will be creating a web version of a typeface specimen. You may use the typeface of your choice, as long as you can provide information about its history and/or designer, so be sure to do your research and select carefully.
The first part of the project is to design a mockup of the specimen, using the design tool of your choice (PS, AI...). Your design needs to contain the following elements:
Your overall layout and design should evoke the spirit of the typeface and be an example of the type of design it is best suited for.
Upload a jpg of your mockup here. no larger than 10MB
Work through these exercises at your own pace. Focus on understanding the mechanics of what's going on.
For a review of linking HTML files to CSS files, this tutorial might be helpful.
Finish the quiz website you created, with CSS styles applied. All of the HTML pages should be linked to an external CSS file.
Watch this video tutorial I made about using web fonts.
Incorporate a web font into the styles of your quiz website.
Here are examples of the quiz site at the three different stages. This is just my example. Yours might look different.
This is what you've all been waiting for — Cascading Style Sheets (CSS)! This magical language let's you actually control the visual design of your web pages. No more Times New Roman and ugly blue underlined links. From now on, YOU are in control.
Below is a Lynda playlist that will introduce you to CSS. Watch it, then complete assignment #2 (a simple coding exercise).
Lynda Playlist: CSS 1: GD 50, duration: 41 minutes
In this exercise you will write a few simple styles to the HTML that's already there (do not edit the HTML). The first one style has been written for you. The results should look like the screenshot below.
Under the screenshot there is an embedded pen. Click "Edit on Codepen" to open it in codepen. Then click "fork" to save a copy for yourself. When you are finished, add the pen to your GD 50 collection in codepen. You can also find the pen by going to my codepen page and looking in the "50 — in-class examples" collection.
For a quick CSS reference, here's a cheat sheet. Or just google stuff like "how do I make text turn purple in css?"
First, watch the screencasts that I made reviewing the HTML basics. Then, using the HTML tags we have learned so far, complete the three exercises below. Save your work in codepen and place the pens in your GD 50 collection.
Create a list of your choosing (i.e. grocery, to do, pet peeves, favorite baked potato toppings...). All the items should be numbered (hint: the numbering with be created automatically if you use that right tag). Give your list a heading.
Compose a letter, using HTML tags as your typesetting tools. The letter should have at least two paragraphs in the body, and five of the words or phrases should be italicized. Make it fun by using some creative dummy copy.
Using the HTML codes for special characters, produce the "word" you see below.
Unit 1: Intro to HTML >> Lesson: HTML basics (codecademy tutorial)
Video 1: Not a Series of Tubes (from dontfeartherinternet.com)
Video 2: HTML: Hamburger Text Markup Language (from dontfeartherinternet.com)