Portfolio: My Favorite Thing Web Page Design

“My Favorite Thing” Web Page Design

This is the first of three projects completed in AVT217-001: Intro to Web Design, School of Art, George Mason University. Examples of student work available upon request.


Project Overview

Objectives

  1. Describe the concept for a web site.
  2. Identify, collect, and compose content for a web site.
  3. Create a series of design comps or mockups that communicate the visual design intent of a web site for a variety screen sizes.

Description

With this project, we dip our toes into the web design process. This project is comprised of a series of assignments geared towards highlighting parts of the design process.

You will design a series of comps or mock ups for a web page about your favorite thing. On the way to designing your comps, you will identify and describe the design concept and collect and organize content for the web page.

Deliverables

A web site is more than a collection of HTML, CSS, and images. It is the culmination of research and design efforts that produce artifacts and deliverables. Each assignment for this project has a deliverable or design artifact as an output.

For this project you will produce the following deliverables:

  • Project concept ideas
  • Creative brief
  • Content outline
  • Wireframes
  • Design comps

Along the way, you will present various stages of your project for feedback.

Review the individual assignments for deliverable details and due dates.

Grade

Your project grade is a culmination of grades from the individual assignments. Turning in a completed design without turning in the work from preceding assignments will not result in a passing grade.


Site Concept Ideas

Objective

  1. Describe the design concept for a single page web site.

Description

This challenge kicks off a longer-series challenge: create a design for a single web page that describes your favorite thing. You will create a design for a web page that promotes this favorite thing to us to persuade us, the audience, to adopt this thing as our favorite thing, too. In other words, persuade us to care about this thing as much as you do.

The page you design is crafted over a series of challenges: Concept, Brief, Content, Design, and Present. This challenge is the first of that series.

For this challenge, you will come up with (at least) three web page concepts. We will present, share, and refine concepts in class.

Materials & Technology

  • Internet access and Google
  • Word processor of choice
  • Materials for sketching and jotting

Instructions

  1. The topic for this project is “your favorite thing”. What is a thing that makes you happy or brings you joy?
  2. Start with brainstorming a list of things that make you happy or brings you joy. This initial list is a “blue sky” list, as in “the sky’s the limit”. If an idea comes to you, write it or sketch it down. Spend about five minutes working on your list. Then take a break.
  3. Return to your list with fresh eyes and a fresh brain. Review your list. Prioritize 3 to 5 items on your list as suitable candidates for your web page design.
  4. Do some preliminary research on each or your topic ideas. Can you find sufficient information to generate content and design ideas? If not, are you willing to do the leg work necessary to find the information you need?
  5. For each of the three topics you’ve selected, write down the ‘who, what, where, when, why, and how’ about these favorite things.
  6. Review your research on your topics. Select one of the topics as the most viable option for your web page design.
  7. Type up your concept using a word processor of choice. Include: Your name, course code, title of the favorite thing, a description of the thing (the who, what, where, when, why, how), and your argument on why this thing deserves a web site.
  8. In the same document, include the ‘runners up’ ideas as well.
  9. Save the document as a PDF. Upload the PDF to this assignment on Bb.

Deliverable

  • PDF explaining concept for your favorite thing website, submitted to this Bb assignment.

Grade

  • 100 points, Favorite Thing Web Page

Rubric

Describe the design concept for a single web page design.

  • Exemplary (4): Work presented goes above and beyond requirements. Concept is clear and precisely written. No errors in language, spelling, or grammar.
  • Above Average (3): Work presented meets requirements and may exceed requirements. Concept is clear and adequately written. Few errors in language, spelling, or grammar.
  • Average (2): Work presented meets minimal requirements. Concept may be vague or missing key details. Some errors in language, spelling, or grammar present.
  • Below Average (1): Work presented meets few, if any, requirements. Concept is unclear or confusing and requires additional thought. Many errors in language, spelling, and grammar are present.
  • Unsatisfactory (0): Assignment not submitted or submitted incorrectly.

Creative Brief

Objective

  1. Identify and describe a project’s reason for existence.
  2. Identify and list goals the project needs to meet.
  3. Identify and describe the users the project will reach.
  4. Identify and describe the project’s look and feel.

Description

Provide an overview and description of what the project is about, what the project needs to accomplish, the users the project is for, and how the project will reach those users.

Creative briefs can vary in formatting and level of detail or even in what they’re called. The important thing is the document meet these objectives.

You will draft a creative brief for your project. The document will contain:

  • A project statement
  • A list of goals the project will meet
  • A description of the target audience
  • A description of the project’s look and feel

This document is one of several process documents generated towards your project’s design.

Materials & Technology

  • Web browser
  • Graphics software of choice

Instructions

Include the following items in your creative brief:

Project’s name

Select a name for your web page based on the name of your selected thing.

Project statement

Complete the following ‘mad lib’ to create your project statement:

  • [Site name] is a [noun describing site] promoting and educating [favorite thing] to [adjective describing audience] [noun describing audience].

Project goals

Project goals are relevant, measurable, and realistic. They are the metric used to determine if the site is successful or not. Project goals are not necessarily the same as your goals.

Identify 2-3 goals for your page design to accomplish. Simple and straightforward is perfectly suitable for this project.

Target users

Target users are the people you are making this web site for.

You are not making a web site for just anyone or a general audience (that’s lazy thinking). Think about the group of people you intend to reach with your web site’s content and design. For example:

  • Are they people already knowledgable about this destination or people just being introduced to this place?
  • Are they people with expensive and sophisticated tastes? ‘Back-to-nature’ sensibilities? Academically minded? Artsy and eclectic?
  • Are they people looking to expand their knowledge? Complete a report? Settle a bar bet?

These are just a small sampling of possible questions to ask about your target users. The answers to these types of questions will help you define your target users.

Write a short, but concise description of the target users.

Look and feel

If your web site was a car, what kind of car would it be? How or why would this car appeal to your target users?

Verbalizing design aesthetics can sometimes be tricky. We all have our own concepts about what an adjective means or describes. My interpretation of edgy and quirky might be different from yours. Sometimes it’s helpful to use concrete objects to help describe what we’re going for.

The car question above offers a proxy for talking about a web site design. A Fiat, Beetle, Scion and Cube are all quirky, small cars, yet each are quirky with their own nuances in their own way to appeal to different people.

Analyze your answer to the car question. What is it about that car that makes it an appropriate analogy to your web site? Based on your analysis, write a brief description of the look and feel your website should get across to your target users.

You may also include a selection or collage of photos, color samples, typefaces, descriptive words, etc. to visually show or describe your design intent. You may even include a picture of the car.

Deliverable

  • Creative brief document saved as a PDF and posted to your course portal site. URL to creative brief submitted as a text submission to this assignment on Bb.

Grade

  • 100pts, “My Favorite Thing” web page project

Rubric

Identify and describe a project’s reason for existence.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Identify and list goals the project needs to meet.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Identify and describe the users the project will reach.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Identify and describe the project’s look and feel.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Content Outline

Objective

  1. Identify, collect, and compose content for the web page project.
  2. Organize web page content into discreet chunks.
  3. Proofread and edit web page content for clarity and errors.
  4. Provide proper citation of sources for collected content.

Description

This Crafting challenge is about gathering and organizing your content for your web site into a content outline.

A content outline document collects and organizes copy (text), images, and other media for inclusion on a web site. Like many other design documents, the content outline can vary in format and level of detail. Collecting the content into one location gives us the advantage of having everything accessible and findable in one place.

Materials & Technology

  • Internet connection
  • Web browser
  • Library card
  • Word processor or presentation software
  • MLA style guide

Instructions

As humans, we like to tell stories. We like to hear, read, and see stories. In fact, we are so wired for stories our brain makes up stories when just given a few random words or images.

Your web page tells a narrative, of sorts, about the data or information you are trying to convey. A narrative, for our purposes, presents a string of cause and effects to the user. It starts with the basic premise or hypothesis, leads the user along a linked trail of cause and effect to the conclusion or resolution of the initial premise.

Before you can organize content, you need to do some research to figure out what sort of content your site will include. Follow this basic list to flesh out your content/narrative:

  • Title section
  • Hypothesis or premise the web page addresses (why we should care about this favorite thing you want to tell us about).
  • Background/context/groundwork information that sets the stage for the premise
    • Repeat as necessary
  • Findings/insights that support or argue the case for the premise
    • Repeat as necessary
  • Conclusion to wrap everything up and tie it back to the opening premise
  • Call to action: what do you want the user to do with this new-found knowledge?

Organize the content you’ve collected into an outline form. Your top-level labels will ultimately be the main content sections of your web page. You should have at least 3-4 top level items, but may have more. You need as many as you need in order to get your point across.

Sub-level items represent main content sections broken up into discreet chunks of information.

Include all the written copy you intend to include in your web site.

Also list any images, graphics, photos, or other supporting material you will need. If you already have them available, include a thumbnail version in your outline for reference.

Optionally, you can create your outline using presentation slides (i.e. PowerPoint, Keynote, Google Slides) where each top level outline item is on its own slide. Keep formatting barebones and plain.

Append your list of sources at the end of your outline. It should be part of the same PDF document.

Proofread and have someone else proofread your content. Check for spelling, language, syntax, and grammar errors.

Review your outline as a complete document. Does the content present a narrative or thread that pulls everything together into a cohesive package?

Save your content outline as a PDF. Submit the PDF this assignment on Bb.

Deliverable

  • PDF of content outline and data, submitted as to this assignment on Bb.

Grade

  • 100 points, My Favorite Thing Web Page

Rubric

Identify, collect, and compose content for the web page project.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Organize web page content into discreet chunks.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Proofread and edit web page content for clarity and errors.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Provide proper citation of sources for collected content.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Wireframes

Objective

  1. Create a series of wireframes that show how a web page’s content is structured and organized.

Description

Wireframes, for our purposes, are blueprints that describe how content should be arranged on a web page.

You will create a series of wireframes for your Favorite Thing web page showing how content is structured and displayed at different screen sizes and orientations.

Below are a couple of articles for reference.

Reading/references

Materials & Technology

  • Index cards and pens for sketching
  • Illustrator, InDesign, or similar
  • My Favorite Thing Content Outline

Instructions

Building on the work started in class, you will create wireframes for the following sizes and orientations:

  • Small phone, portrait
  • Small phone, landscape
  • Tablet, portrait
  • Tablet, small laptop, landscape
  • Large laptop or desktop display, landscape
  • Very large display, TV or projector, landscape

Use your content outline as a guideline. Each slide of the outline represents one section of the page. You need to consider how the content is displayed in the individual sections and how the sections relate to each other.

Since this project starts with a blank slate, it makes sense to start with a mobile-first approach. Create a wireframe for the smallest device size, work your way up to the largest size. Keep context in mind (how a device is likely used)—not just size of the screen.

It’s generally faster to work through this by hand with paper/index cards and pen sketches as it allows you to rapidly think through and adjust ideas.

When you have sketches you’re satisfied with, create your wireframe documents using a program like InDesign or Illustrator. Presentation software (Powerpoint, Keynote, Google Slides, etc.) can also work.

Use actual content where it makes sense to. Use a rectangle with an X to indicate pictures. Label content blocks according to their content type. Eg:

  • Level 1 headline
  • Block quote
  • Social media icon

Export your wireframes as a PDF document. All wireframes should be in one file.

Post your wireframes PDF to this assignment on Bb.

Deliverable

  • PDF submitted on Bb assignment.

Grade

  • 100 points, My Favorite Thing Web Page

Rubric

Create a series of wireframes that show how a web page’s content is structured and organized.

  • Exemplary (4): Goes above and beyond requirements. Work  is thorough and shows careful, considered thought.
  • Above average (3): Meets requirements. Work shows thought. Few errors.
  • Average (2): Meets requirements. Some thought evident in work–easy paths obviously taken. Some errors.
  • Below average (1): Fails to meet requirements. Little thought or care taken. Many errors.
  • Unacceptable (0): Assignment not submitted.

Design Comps

Objective

  1. Create a series of high-fidelity wireframes/design comps that communicate the visual design intent of a web page.

Description

For our purposes, high-fidelity wireframes are interchangeable with the concept of design comps. They are a series of deliverables that communicate the layout and design of a page or screen at a particular state.

You will create a series of design comps based on your wireframes for your Favorite Thing web page.

Materials & Technology

  • Illustrator, InDesign, Photoshop or graphics software of choice
  • Internet access and browser
  • Scanner and/or digital camera
  • Creative Brief

Instructions

Use you favorite design software of choice. Each software package has pros and cons for creating design comps. Use what you are comfortable working in.

Just like you needed to research and assemble your content for your site, you also need to research and assemble your design requirements.

Review the target audience needs and the perception/tone identified in your creative brief.

Develop a series of design comps, based on your page wireframes and using your target audience/perception/tone from your creative brief as a guide.

Like the wireframes, you can approach this as ‘mobile first’. Design the mobile or small screen wireframes first. Then tackle each succeeding larger screen. Be sure to address different screen orientation needs (portrait vs. landscape) and viewing distances. For example, a large TV will have more display space but it is typically further away from the viewer than a large monitor.

You will have many versions of your design comps–at least as many as wireframes. Judicious use of symbols, styles, and color palettes will help keep things consistent. If using Illustrator, utilize multiple art boards for different screen sizes and orientations.

Combine all design comps into one PDF. Include any preliminary work (sketches, collages, notes, etc.) at the end of the PDF. Submit the PDF to this assignment in Bb.

Deliverable

  • Design comp documents combined into one PDF, submitted to this assignment.

Grade

  • 100pts, My Favorite Thing

Rubric

Create a series of high-fidelity wireframes/design comps that communicate the visual design intent of a web page.

  • Exemplary (4): Work presented goes above and beyond requirements. Concept is clear and precisely rendered. No errors in language, spelling, or grammar.
  • Above Average (3): Work presented meets requirements and may exceed requirements. Concept is clear and adequately rendered. Few errors in language, spelling, or grammar.
  • Average (2): Work presented meets minimal requirements. Concept may be vague or missing key details. Some errors in language, spelling, or grammar present.
  • Below Average (1): Work presented meets few, if any, requirements. Concept is unclear or confusing and requires additional thought. Many errors in language, spelling, and grammar are present.
  • Unsatisfactory (0): Assignment not submitted or submitted incorrectly.