S18 Assignment 6: Develop a sketch or basic wireframe for your Mudcat redesign (15 points)

Assignment Description:

Use your prior assignments/discussions and a Wordpress theme as a basis for developing a preliminary sketch or basic wireframe for your Mudcat redesign that fits the project dimensions: 1280 pixels wide x 1024 pixels high. This does not have to be a perfect mockup! Just indicate where you plan to place the various pieces of content. Keep contrast and alignment in mind. This layout will almost definitely change as you get further into the project. It's just a starting point for now! 

Assignment Instructions:

1. Taking Stock of your Content:

Look at the images and required text file in the Mudcat Project Assets folder: 

Text: You'll need to look at the required text for the Mudcat project (text file is provided in the Assets folder) and decide what is most important and what should be grouped together. You have to work with the provided text but can make small additions if necessary for clarity.

Photos: Look at the photos in the assets folder and decide on a feature photo. Maybe you could use this in the background. If you do plan to have a background photo, select one that is flexible enough to allow text to be readable over it.

Additional images: Consider where you might put smaller images in your layout.

Navigation buttons: Refer to your new navigation structure and think where you'd like the navigation to go (top bar or side bar perhaps)? Are you going to separate and/or emphasize any button so a user can find it quickly? Maybe "shows" or "book the band"?

2. Getting inspiration from a Wordpress template:
Many designers have to use a template on a CMS (like WordPress or Wix) for their clients' sites. Use the following link to find a WordPress theme. It is a page of "best of" designs for music WordPress themes. 
Find a theme that has a basic interface that might be adaptable for your ideas for a redesigned Mudcat home page. 

Music WordPress Themes 
Click on the word DEMO or MORE INFO to display the actual theme hosted on the theme developer's site. 
Note: You may then have to scroll through some thumbnails to find the actual theme you're looking for (the link sometimes doesn't take you right to the theme itself).

• Select a suitable/appealing theme and make a note of the theme name. 
• Click on Live or Demo Preview to see the theme in action. Copy the URL from the browser's address bar. Check how the interface and navigation works (layout, dropdown menus, active page indicator etc.). Is it a good fit for Mudcat's needs? Does it work for the navigation structure you've devised?
• Make a screen shot of the live preview of the Wordpress theme (approximately 700 pixels wide). If the theme has a long single page, just make a screen shot of what might be displayed when the site is first viewed in the browser.
• In MS Word (or equivalent), create a new document in landscape format. 
      A.  Type in the theme name and URL at the top. 
      B.   Insert the screen shot you made of the theme.
• Below the screen shot in about 30 words describe what features the theme has that work for a music site's needs and say how the Wordpress theme's navigation suit the new site navigation/structure you developed.

3. Creating your wireframe sketch:
Use whatever tools you wish to create a basic layout for your redesign.

• Show your new navigation structure/labels
• Indicate the basic placement for important text content/photos. Label your boxes/shapes.
• Make sure I can interpret your scratchings! Don't just draw random boxes!
• The layout should be in the correct proportions (landscape at approximately 1280 x 1024)
• Insert your wireframe into the Word (or equivalent) document underneath the WordPress screen shot and your comments.
• Upload to Canvas

Suggested tools for creating your wireframe:

• Pencil on paper is fine but you will need to scan or take a photo of your sketch. 
• MS Word, Powerpoint or even Excel might work
• InDesign, Illustrator and Photoshop are good options but don't get too detail oriented. This is just a sketch!
• A list of mockup tools was provided in the Week 2 Page 6: Start the Design process.
  You might take a look at this site: https://moqups.com/ Links to an external site.
• Articles with suggestions: 
  http://99designs.com/designer-blog/2012/04/26/4-ways-to-wireframe-web-designs/ Links to an external site.
  The above article is a little older but has nice visual examples!
  https://www.codementor.io/design/tutorial/getting-started-with-wireframes Links to an external site.
  
  

Sample wireframes/sketches:

From: blog-media.chromaticsites.com

From: http://99designs.com/designer-blog/2012/04/26/4-ways-to-wireframe-web-designs/ Links to an external site.