---

---

---

---

---

---

Web Page Mockup Design

---

---

Assignment

Your assignment is to design a web site to promote a musician or band. The aesthetics of the web site (look and feel) will be based off a single release (album, ep) by an artist of your choice. For example, if you were to choose Coldplay you would use photos, fonts and colours from one of their albums and not mix it up with aesthetics of another album.

The main purpose of this web site is to provide info about the band/musician and market their product (music). Strong imagery of the artist is necessary and a mood for the kind of music they create should be implied visually. Assume that you have the budget for any kind of programming and let your creativity loose. The goal is to create an experience.

---

The Timeline

Class #1

During the first class:

• We'll explore these Photoshop functions:
• • Kuler
  • Colour Swatches
  • Graphic Styles
  • Smart Objects
• We'll learn what UI patterns are.
• We'll scour the web for good band sites. They're rare. Take a screen shot of the web page. We'll dissect them to figure out what's good about them.
• discuss typography on the web.
• explore what responsive design is.
• learn about content management systems.
• You'll take your time to choose an artist. Submit your choice in the form below.
• start sketching ideas on the provided pages

Class #2

You'll come to class with many, many sketches of possible web pages. Also brainstorm ideas for your web page. What do you want the fan to get from the site? Think about it. Write it down. Bring it to class.

During class #2 of the project, you will create a mood board for your web page. I believe you've done this before.

In it, we will include:

• Font families
• Colours (Kuler!)
• Photography treatments
• Similar site designs for inspiration
• Individual design elements (i.e.: page curls!)
• Include three specific/precise words on your board which describe it. (i.e.: edge, soft, elegant, illustrated, bright, etc…)
• Usually, a mood board is created to help the client visualise the final design. In this case, we’re creating one to help you visualise the final design.

Create your mood board in any application you want. You'd probably use InDesign. Photoshop just isn't meant for this.

The dimensions don't really matter. I'd suggest a tabloid-sized page in InDesign, either landscape or portrait. You can save the whole thing as a PDF to submit it.

Class #3

By now, you should have a mood board and wireframes done. Here's what should be in my dropbox for the start of class.

• One PDF file with at least three pages.

• Page One:

  Page one will be your mood board. It should be 11" x 17" either landscape or portrait. It should have all the elements of this example.

  Page Two:

  This will be the wireframe for your computer screen page. It will measure 1024 pixels wide. It should show the layout of the page and which UI patterns you've used. You can use elements from this Illustrator file, plus add some of your own.

  Page Three:

  This is the same as page two, except it's for your mobile web page. It will measure 400 pixels wide maximum.

• Name your PDF "lastname,firstname,4X0"

Today we'll review our work to date. We'll make improvements where they're needed. We'll gather assets, like photos, text, logos, etc…

We'll work on your mobile page in class today.

Class #4

If my calculations are right, this lands on either week 14 or 15, depending which group you're in. This is when the project is due.

---

A Beautiful Example of Responsive Design

The plethora of devices which exist today impose an incredible technical burden on the designer. We need to publish once to so many screens. The answer is responsive design.

We'll think hard about this during this project. You'll design a computer display appropriate page and a mobile page. They're actually the same one. The page needs to respond to any screen without degrading.

---

Sources

You can acquire imagery from anywhere. I suggest Google Images, Flickr, The Stock Exchange or any other source on the Web. You can create your own art, if you wish. You can scan photos—your own, or from any publication. Again, make sure the quality is good. You can use lorem ipsum for large areas of text but there should be enough "fake" text for me to understand what type of text I'm looking at (ie: a news section should have fake headlines and dates with lorem ipsum body copy).

---

Requirements

All band web sites should have the following elements. This doesn't mean that you need a page for each. Use creative interface elements to present these. As an example, you could have a image viewer on the front page to shuffle through images. The easier it is for the visitor to sample your content, the longer they'll stay on the site.

• Band/musician logo
• Band/musician photos
• Navigation menu for the following sections:
• • Home
  • Tour dates
  • Bio
  • Music
  • Video
  • Gallery
  • News (blog)
  • Social media links
• Home page must include:
• • navigation
  • min. three news stories with link to the blog.
  • audio and/or video player
  • link to purchase album (with album cover mini)

---

The Process

A web page is a complex thing. It has many moving parts and interaction elements. As such, it cannot be produced in its final state from stage one. This is where prototyping comes in. We'll start with a low-fidelity prototype. Once we're happy with the result, we'll produce a high-fidelity version.

Lo-Fi Prototype

The lo-fi prototype will start on paper. You can sketch your ideas on the provided sheet. This is where you create many different versions of your design.

Before we start to draw, we want to list the elements which will be on our site. There's a list of requirements above, but they're pretty basic. We need to decide how they'll be implemented. For example, will there be a separate page for the Gallery? Or will it be a light box which overlays the current page. Also, how will you display all the albums your artist has released. Will it simply be a drop-down menu with a list of album names? Maybe it could be a carousel of clickable images.

All of these implementations are called patterns in user interface design. We'll explore what patterns are available to use.

Hi-Fi Prototype

This is the final document we'll show the client. It needs to satisfy two groups: the client and the developer. The client needs to see what they're final web site will look like. The developer needs to see the functionality.

Style

When designing the aesthetics for your web site, consider the style of music your artist plays. A Wayne Newton site will look very different than a Linkin Park web site.

Take your time to decide a style. Creating a digital mood board is a good idea. We'll do this during class #2

---

Building your File in Photoshop

Use one of these files to actually build your mockup. Each has a different grid. You'll build both the full-sized layout and the mobile layout in one file. The mobile layout must be a maximum of 400 pixels.

Create a layer group from the full-sized page and one for the mobile page.

This is a file I created to guide you. See the notes in the file for comments on individual elements.

---

Photoshop Tools

Everything that can be vector should be. We'll build this mockup in a way that the graphics can be edited if needed. The best way to do that is to use:

• Layers
• Adjustment Layers
• Vector Content
• Smart Objects
• Smart Filters
• Graphic Styles
• Colour Swatches

Layer Comps

You'll create both web pages in one Photoshop file. It'll be super important to keep layers organized. Layer Comps will be your friend here. You'll build your 1024 pixel web page completely. You will then be able to use layer comps to create your mobile page.

Once you are done, we should be able to cycle through two states in your Layer Comps panel to see the 1024 pixel page and the 400 pixel page. This is ideal for showing the client.

---

Deliverables

Make sure to include the album art upon which you have based your design.

---

How to Get an "A"

This project includes a combination of Photoshop skills, user interface design and general design savvy.

Half of your grade will be based on the appeal of your web design. How appropriate is the design, relative to the album release you are promoting? How well did you use UI patterns to create intuitive navigation?

The other half is based on effective use of the Photoshop tools you've learned this semester. You need to use vector content where possible. This will make the artwork re-usable in other media. As always, name all of your layers. Create layer groups where needed. Use layer styles, smart objects and more.