Project 04 Step 03 Web Page Design: Header & Navigation
What are we doing?
Design several header and navigation options for a website named Type Matters.
Why are we doing it?
To learn how to develop branding and navigation for websites. The visual design of a Web page delivers a message in fractions of a second. The user makes judgments about the page before they have ever read one word of the content. The header contains branding that identifies the name of the site and what it does.
How are we going to do it?
In Adobe Illustrator, create a new document with 5 artboards, sized 800 pixels wide by 150 pixels tall.
Design 5 different headers that contain:
the site branding
a navigational menu with five page options
a search bar
The header can be any width that you would like. Just because the art board is 800 pixels wide, doesn’t mean your design needs to be 800 pixels wide.
Adding the Header to the Web Page
Continue building your Web page by adding the new header.
open template_01
rename template_01 > template _02
place the new header
revise the typography based on class feedback
Completing the Workbook
Place each header in the space provided in the Project 04 workbook on page 6.
Choose your most successful header and place it into your Web page file.
Below are tutorial videos which explain how to complete the assignment:
After you have completed all of the steps listed above for this lesson, you are ready to complete your process blog post. Blogposts should be structured like a presentation with a beginning, middle and end. Each step will involve it's own process and its own unique challenges and successes. Introduce the assignment, talk about what worked for you and what didn't, explain which of your solutions are working using design principles to back it up. If you have specific questions about how to move forward, you can ask them in the blogpost.
Please include the following in your blog post:
Write a 200-word blog post that includes a JPEG image exported from Adobe InDesign.
Copy the text from the blog post and paste it into Project 04 workbook.
Include paragraph breaks, subheads or other typographic elements to make the post visually accessible.
The post should be designed and encourage a reader to engage.
Include a featured image
Once the Process Blog Post is complete, submit a link to the post in I-Learn. To submit the link in I-Learn, click P4S3 link in the left navigation and then click on the Open button at the bottom of the I-Learn window.
After you have submitted your assignment in I-Learn, you will need to provide feedback to your team members in WordPress. Your feedback to team members will be on the following areas:
Idea: Rate the uniqueness of the overall idea. Is it ordinary and expected or original and unexpected?
1–3 pts: unimaginative – confusing
4–6 pts: ok – great
7–10 pts: great – amazing
Formal design choices: Rate how well the design principles are used.
1–3 pts: unimaginative – confusing
4–6 pts: ok – great
7–10 pts: great – amazing
Typography: Rate font choice, size, kerning and spacing, add to the communication of the concept.
1–3 pts: not at all
4–6 pts: doesn’t help or hurt
7–10 pts: significantly adds to the overall communication
Portfolio: Would you put this in your portfolio? Base this on the quality of the work, not whether it would be appropriate for your personal portfolio.
1–3 pts: no
4–6 pts: maybe with changes
7–10 pts: yes with no changes – absolutely
Blog Post: Rate the quality of blog post.
1–3 pts: messy, unclear, major errors
4–6 pts: understandable, organized, rambling, spelling or grammar errors
7–10 pts: clear, thoughtful, engaging, free from errors
You should list the item, your rating, and any comments you had to help your team member improve. Your feedback on process blog posts will not be used as part of their grade but will help you to teach one another to improve their work.
In Web Page Design | Step 1: Typesetting with Paragraph Styles, you created a list of styles and applied them to at least three pages of an article. These styles can be used beyond this document. For this exercise, you will apply your styles to at least one other article.
Share your Adobe InDesign document with at least 1 of your team members and acquire at least 1 new article that you can work with from your team members.
Apply your styles to the documents you received from your team members.
If the document you are applying the style to has been formatted using Paragraph styles, this should be a relatively easy task. If it isn’t set up correctly, contact the team member you got the document from and make sure that they know how to apply the styles.
Place the first page of your document and the first page of the new document in in your workbook.
Write a blog post describing how using Paragraph Styles can help in a design workflow. Include an image showing the 2 opening pages side by side.
Submit the URL for the Exercise Blog Post in I-Learn by clicking on the "Open" button below and pasting your blog page URL in the space provided. Then, click submit.