ID01: Interaction Design & Development 01

Icon

Thom Meredith

Week 08

Assign Final project

Midterm Project / Due Today

Reminder: You must submit and be present during critiques for both the Midterm Project and Final Projects to pass this class.

Specifications: Design a prototype website home page and first-level of another section (landing page) for a client** of your choice. Focus on creating an interesting navigational interface that allows the user to navigate the site in multiple ways. Use HTML and an external CSS file to build the prototype for your home page and first-level page of your site. Post your thoughts and decision-making process for this project on your WP blog.

I want you to use the knowledge and skills we’ve covered in class — and hopefully you’ve supplemented on your own — to build a prototype of these two pages for a website. I do not expect the site to be built perfectly — your technical skills will improve over time. But I do expect you to use the knowledge you’ve acquired to construct a functioning site that lives on a server environment.

Deliverables:

  1. Home page
  2. Landing page of a main section (first-level of another section) with sub-navigation.

You need to upload your midterm project to the class server in order to present your project to the class. Please do this BEFORE class on Monday, March 7.

The client should be a real or fictitious company that is nation-wide and provides product(s) and/or service(s) to the general public. You should avoid picking small, local companies that do not have interest in a large public audience. You should also think about what kind of interactivity could eventually be added to the site. In what ways can the brand be developed to create a sense of community and build a relationship with the user? How can you engage the user of the site in a conversation with the brand?

Gone are the days when brands could effectively broadcast one-way messages to an audience with no expectation – or means – of a response. The most beloved brands today engage in conversations with people that can feel personal, even private. To aid the dialogue, marketers are using data in order to create simple tracking tools that help customers gain insights about themselves and even change their behaviours for the better: to lose weight, get more sleep, consume less electricity, save more money, or run a marathon. These tools are the beating heart of successful digital brand platforms, deepening customers’ self-awareness and strengthening ties between peers.

Please read the following articles to help explain what I mean by creating a sense of community and building relationships.

Branding in a New Dimension

How to build a brand and a relationship in a Web 2.0 world

http://www.rga.com/news/article/2008/branding-new-dimension

Mother of Invention

It’s not enough to exploit technology, you need to create it

http://www.rga.com/news/article/2008/mother-of-invention

We are now in the era in which brands must create new transformational technologies. Don’t think about how to exploit Facebook as a media venue or stick a TV ad on YouTube—think about how to create new ways that serve your customers and your brand. As a guide, think about it in terms of the four C’s: content, commerce, community and customization.

Think about how you could apply these types of online interactions for the products and/or services provided by the company you choose as your client.

The midterm project web site specifications are:

  • home page and landing page for a major section of the site.
  • A clear navigation system.
  • A successful sub navigation system.
  • A strong visual design and concept: A theme and visual concept that carries through the site.
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560).
  • You must use mostly HTML text in the site.
  • You must use either a two column or three column div structure. (Do not build your site completely in tables or completely with AP divs!)
  • You must use an external CSS file.

How do I create unique styling for different parts of my web page. Do all my paragraphs need to be styled the same?

No.You can have unique styling throughout your website.

You can create unique styles throughout your website with the use of descendant selectors. You are not limited to all paragraphs of text (or any other element) looking the same everywhere on a particular page or throughout the site.

Descendant selectors

How to Use CSS Descendant Selectors

It’s all in the CSS syntax

Step 1

A simple HTML document tree

A web page is organized in a hierarchy. The document hierarchy begins with html and descends through a tree structure that could include many elements within the body. Here’s a simple tree diagram.

Step 2

In the document tree, elements descend from the parent element that encloses them. In the example, there are lists that are the descendant elements of either the content div or the sidebar div. Furthermore, the lists are the ancestors of an A element (a hypertext link).

Step 3

The CSS syntax for a descendant selector is to list the selectors separated by a space, (but not a comma). For example:

#content ul a {rule here}

This selector targets an A element that is contained within a UL element that is contained within the CONTENT div. Other A elements on the page, perhaps one in a paragraph or in the SIDEBAR div, would not be affected by this selector.

Step 4

To style a list or list item in the sidebar, use a descendant selector like this:

#sidebar ul {rule here}

or

#sidebar li {rule here}

To style a hyperlink in the sidebar that is not nested in a list, use selectors like this:

#sidebar a:link {rule here}

#sidebar a:visited {rule here}

Step 5

To make P elements appear differently in the content area and the sidebar area, use descendant selectors like this:

#content p {rule here}

#sidebar p {rule here}

Step 6

Descendant selectors can also be based with classes. For example, if every post on your blog was assigned to the class “blogpost” you could write a descendant selector for an em (emphasized) element in an h3 element that was part of a div in the class blogpost like this:

div.blogpost h3 em {rule here}

Step 7

Descendant selectors can become quite lengthy when you are targeting a very specific element on a complex page. For example:

#blogpost blockquote p em {rule here}

It is the ability to get completely focused on one and only one element on a page using descendant selectors that give you the power to style your page in any way you desire.

Above material about How to Use CSS Descendant Selectors from eHow website. Content written by Virginia DeBolt.

Final Project Assignment (Due Week 14)

Your final project presentations are Tuesday, Week 14. 

No late projects accepted.

Using the prototype you developed for your midterm, the focus of the final project is to create a portfolio quality web site that incorporates design, strategy and interactivity. Your web site design should have a strong design aesthetic along with a strong concept. The site design should also reflect the technical skills you learned in this class

The final project web site specifications are:

  • 6 complete pages (and placeholder pages for other pages when applicable).
  • A clear navigation system.
  • A successful sub navigation system.
  • A strong visual design and concept that carries through the site.
  • A design that works well on 1024×728 displays (i.e. navigation & primary content inside 990×560).
  • You must use some html text in the site.
  • You must use div structure. (Do not build your site completely in tables! — or use Photoshop to save out HTML)
  • You must use an external CSS file.
  • Create a Snapz Pro (.mov) demo of your site (10 mins maximum).
  • Completion of all Process Documentation: Communication (Creative) Brief, Personas, Sitemap, and Wireframes. You need to have this “portfolio-ready,” meaning you will be graded on your presentation of this documentation. You will bring print-outs of this documentation to hand in to me and will also post digital versions to your process blog.
  • You are also responsible for documenting your entire process on your process blog.

You need to upload your final project to the class server in order to present your project to the class. Please do this BEFORE class on Monday, Week 14.

Category: Classes

Tagged:

Comments are closed.