Project

Project 04 Step 01
Web Page Design: Paragraph & Character Styles

What are we doing?

Find an article about web typography. Re-typeset the article using Paragraph and Character Styles to define the hierarchy.

Why are we doing it?

The hierarchy of typography is a major—if not the major—requirement for a successful Web page that presents information. Choosing articles focused on the content of Web typography is intended to introduce current topics involving typography and the Web.

This project introduces the concept of separating content from style. This one concept will save print and Web designers time and frustration. While the concept is difficult to get your head around, it is vital for Web and print design workflows.

How are we going to do it?

We will choose, evaluate, design and reset an article about Web typography.

Download

• Download the Project 04 Resources from the Project 04 page.

Choose an Article

• topic: typography in web or mobile design
• size: 1,000 word minimum (two smaller articles may be combined to reach the minimum word count, if necessary)

Evaluate the Article

• Read it.
• Find the inner structure.
• Make a list of the styles that will be needed.

Below are tutorial videos which explain how to complete the assignment:

Process Blog Post

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 P4S1 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.

Reading

Reading/Quiz 07

• Text | Thinking with Type by Ellen Lupton (2nd edition)
• Pages | 124–147