Web Design/Web design challenges

Web Design → Web design challenges This page is part of the Web Design project.

These challenges are designed to be completed in around 3 hours, preferably as a small group activity (2-3) in a classroom situation where groups can compare their designs and coding during the review. The aim is that those people who are not confident can work together with those who are confident - even if it just means watching for the first few challenges - seeing a small project from idea to html/css prototype. Try to nurture each other and help each other learn wherever possible.

The challenges themselves are based around annual events so that they can be re-used while still remaining relevant. If you have any ideas, please add them!

Due to the limited time, the scope of the exercise will only include the following:

• Design sketches (annotated with structural info such as divs)
• Prototype graphics production where required,
• HTML/CSS prototype of 1 or 2 pages (depending on challenge), including dummy content (lorem ipsums).

The following will be defined for you for each challenge:

• The purpose of the site
• The primary target user audience

After completion, prototypes will be reviewed in a meeting.

A suggested time-plan was put together by some students as:

• Quick team meeting: 15mins (decide on a leader who will have the final call on decisions).
• Sketch design: 10-15mins
• Photoshop mockup (optional): 30mins
• Plan page structure (in terms of divs/layout)
• HTML + CSS coding 1.5hrs
• Team review: 10mins
• Validating + cross browser: 5mins (phew!)

• Flickr's advanced search allows searching of only Creative Commons images that you can modify.
• lorum ipsum generator for creating dummy paragraphs of text.

When: End of June (In 2007 it's 18-22 June)

Background: Drug Action Week is a national event in Australia, but your local city is preparing it's own advertising/marketing on the councils website with local events, posts by local celebrities, etc.

Purpose: Engage local youth and business with local drug action week activities.

Example goals:

• Increase physical participation in local Drug Action Week events by 15% over two year period.
• Increase business sponsorship by 30% over two year period.

Targeted audiences:

• Youth at risk of peer drug use,
• Local business owners who might consider sponsoring events
• Youth/Social workers who can contribute engaging content.

How should users perceive the site

• Fun, healthy, "no need for drugs" feel (whatever that means)

Content

• The Drug action week logo should be prominent but blend in with the design (the colours can be changed).
• The title/banner of the site is to include "Drug Action Week [your city's name]" in a fun, healthy font (not Comic Sans!), perhaps with an appropriate background of youthful fun.
• The navigation is to include home, local events, testimonies, sponsors (note: prototypes required for home and testimonies pages only).
• The footer area is to include a copyright statement as well as links to a privacy policy and terms of use.
• The home page is to include three main content areas:
  1. A brief summary of the site consisting of one short sentence (strong type), followed by a single paragraph with more detail (Just use lorem ipsums)
  2. A main content area with the latest 3 posts (each post is just a heading, a date-posted timestamp such as "Published April 15th, 2007 by James" and a few paragraphs of formatted text.
  3. A small local-sponsors area with space for three logos of local sponsors (linked to their websites).
• The testimonies page is to include only one content area which will display 3 testimonies of local celebrities. Each testimony consists of a heading, a few paragraphs of text and a suitably placed image of the celebrity. At the bottom of the page is to be a form that allows readers to with the following fields: Name, email, message (a text area) as well as a check box that is checked by default with the label "Subscribe me to Drug Action newsletter".

When: 3rd Saturday of September (in 2007: 15th Sept)

Background: Software Freedom Day is a global, grassroots effort to educate the public about the importance of software freedom and the virtues and availability of Free and Open Source Software. Local teams from all over the world organise events on the third Saturday in September. The most recent event involved over 200 teams from all over the world.

Vision: The vision of software freedom day is: "to empower all people to freely connect, create and share in a digital world that is participatory, transparent, and sustainable."

Website goals:

• Establish a local free software group that meets up quarterly in your area for software reviews and business applications.
• Establish a support network for new free software users in your area.

Targeted audiences:

• Beginner computer users who may benefit from free software such as Firefox and OpenOffice.
• Intermediate computer users who would benefit from free software such as Gimp, Inkscape and the Ubuntu operating system.
• Users of free software who might be able to help with local support.

How should users perceive the site

• Polished (definitely not tacky-free), vibrant and full of people (you might want to browse the 2006 Gallery for photos.

Content

• One of the 2007 Software Freedom Day logos should feature prominently on all pages (you can download the large versions from the 2007 logo page).
• There will only be three pages: the home page, an events and a "join us" page. You can place the navigation as you see fit.
• All pages are to include:
  1. A footer area with links for a copyright statement, privacy policy and terms of use (as well as valid XHTML/CSS if you're keen).
  2. 3 of the primary sponsors from the main site.
  3. Some kind of local feel for your city (maybe a prominent landmark)

• The home page needs to:
  1. reach the three targeted audiences, directing them to either the events page or the support us page, depending on the user. For example "Do you want a better browsing experience? Then come along at 11am for the <a href="events.html#11">Firefox demo</a> to see ... " Appropriately sized images may be important here.
  2. fter the above introduction to meet target users, the most recent blog post will be displayed (with a title, a date posted, followed by one paragraph and a "more" link which will go to the blog when it's created.)
• The events page will include:
  1. an intro sentence "Check out the details below to find out what's happening where!"
  2. a table with the first column containing the times of the events (11am, 12:30pm, 2pm, 4pm), second column will be the location and the third the description of the event (Events in your city are yet to be decided, just use dummy text for the descriptions).
• The "Join Us" page will include:
  1. An introductory paragraph along the lines of: "Are you new to free software and keen to find out more from locals here in [your city]? Sign up below to receive our occasional newsletter." followed by a small form containing a text field and a submit button with the text "Sign up!"
  2. An introductory paragraph along the lines of: "Perhaps you're already up to speed with free software and might want to join our support network to help locals in the area, or contribute a review to an occasional gathering here in [your city]? Add your details below and we'll contact you after the event" Followed by a form with name, email and 'particular interests' fields.

When: October each year (Pink Ribbon day is 20th Oct. in 2007)

Background: Breast cancer month is part of PinkRibbon, which is itself the official trademark of the National Breast Cancer Foundation.

Pink Ribbon Day is the signature day of the NBCF and is officially the fourth Monday in October. October is also internationally known as Breast Cancer Month.

Redesign Problem: The current Pink Ribbon site is excellent, but your client is keen to know whether it's possible to have a design that isn't so pink - perhaps being a little more vibrant (and perhaps not so similar to White Lady Funerals).

It's also been mentioned to your client on a number of occasions that the information/navigation of the site could be vastly improved to help people find what they're after when they hit the home page.

Redesign Goals:

• Find or create a colour scheme that is still has the correct pink as the dominant colour but uses complimentary or contrasting colours to bring more vibrancy to the site.
• Re-architect the site around the things that the identified audience might want to be able to do. This is particularly important on the home page, which is currently quite cluttered visually. Your client would like visitors to have three large visual options to choose from when they hit the home page (but he's not sure what they should be).
• In addition to the three un-changing options on the home page, the client would like just one prominent space for a featured campaign or product (such as the current pink mobile phone cover) rather than adding to the page every time there is a new campaign or product. If possible (ie. depending on the skills of your team), he'd like this to change when the page is reloaded.

Your team's task is to come up with a new home page design that incorporates the above goals. It must use the current branding (Pink ribbon logo, prominent link to national breast cancer foundation), but everything else is up to you.

Breaking down the tasks:

It's up to your team (your nominated leader) how you approach this challenge - you may all work together on each task or break up to get things done. The following task breakdown is just for reference.

• Create two or three options for the colour scheme (?? mins).
• Brainstorm what visitors might want to be able to do when they visit the site (?? mins)
• Define new site architecture (even though you're only prototyping the home page, your client still needs to know how users will get to the content through your new and improved home page) (?? mins)
• Sketch new and improved home page design (?? mins)
• Create required graphics / source images for home page prototype (?? mins)
• Code HTML/CSS for home page prototype (?? mins)
• Optional (depending on your teams skills): Research and integrate (or write) Javascript or PHP code for the rotating featured campaign/product (?? mins)

When: During the month of November each year

Background: From What is Movember?: At the start of Movember guys register with a clean shaven face. The Movember participants known as Mo Bros then have the remainder of the month to grow and groom their moustache and along the way raise as much money and awareness about male health issues as possible.

Design problem: [Fictitious] As successful as Movember is for raising money, it is currently quite a one-sided affair. Where Pink-ribbon raises money for breast cancer and anyone can be involved, purchase/wear a pink-ribbon or organise fund-raising, in Movember only the males can actively participate. There is a page on the site devoted to 'Mo sistas':

Whilst growing a Mo is left to the guys, Mo Sistas (ladies that support their guys or just love Mo's!) form an important part of Movember by recruiting Mo Bros, helping to raise funds and attending the highly anticipated Gala Partés.

Mo sistas can take part by:

Helping your Mo Bro to raise some awareness and money for men's health

Hmm. Can the females among us call out if you want to be involved as a support? The board has realised this and is actively after a way to modify the 'Movember' concept so that those who can't or don't want to grow a mo can actively participate in raising money and awareness for prostate cancer and male-depression without being reduced to a support role.

Your task: In your medium-sized groups of 4-6 people:

1. Develop a number of concepts for inclusively raising money and awareness of prostate cancer and male-depression. You might want to consider both complete re-brands (pros and cons) as well as adding or updating the current 'Movember' brand. It's important at this stage that everyone gets to express their ideas and is heard.
2. Decide together on your winning concept (either take a democratic vote, or leave the decision to your group's leader).
3. Work together to create a list of content/functionality that will enable your site to involve and encourage involvement from both those with mo's and those without. (The current site has a competition where mo-sisters can write why they are the best mo-sister to win a car).
4. Next, individually take your group's content/functionality ideas and take 30 mins or so to group the content (keeping your target audience in mind) and then design sketches (paper is fine or photoshop if you prefer) for all your significant/interesting concepts (home page, competition page etc.).
5. Coming back to your group, share and combine your ideas. Once decided you'll then create your final prototype (paper - large post-it notes or a photoshop prototype) for a number of your pages to communicate your concept back to the class.
6. Finally, decide how you will present your concept. For example, one person might introduce the concept, another outline the detailed thinking behind the concept, another demonstrate the concept, another summarise the pros and cons or even potential risks etc.