Create User Interfaces- Class 4

Inspired by photos by emlyn and clarita from morgueFile.com

Inspired by photos by emlyn and clarita from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 5

Today’s Class

  • Introduction to Assessment 2
  • Web Design – Photoshop Workshop (in class)

Assessment 2 – Design a GUI

This assessment is a combined assessment for: Create User Interfaces, Visual Design Components, Information and Meta-tags!

Design a Graphic User Interface. You can choose to design for a Website or App.

First: think about a project. What do you want the GUI to be for? Think about a client scenario, who is your client and what is the purpose of the site or app? What do you want the user to do after visiting it?

Develop sketches and refine your design in Photoshop.

You will need 4 pages (example Website: home, about us, portfolio, …)

Make sure to include:

http://960.gs - A button that is hard to miss

http://960.gs – A button that is hard to miss

Web Design – Photoshop Workshop

In-class workshop. We will look at how to apply a grid system to a website design.

  1. Access the 960 Grid System site: http://960.gs/ and download their 960 Grid System Templates by pressing the ‘Big ol’ Download Button’. This will start the download of a comprehensive folder by Nathan Smith with 960 Grid System templates and plug-ins for Photoshop, DreamWeaver and many other programs.
  2. In template>Photoshop open the 960_grid_12_col template
  3. Save the file under a new name and in your class folder.
  4. Make sure the guides are visible (Command+; or Ctrl+;)
  5. Add horizontal guides (View>New Guide) at 245px, 255px, 265px, 500px, 510px, 520px, 755px, 765px, 775px and 1010px. Lock your guides (View>Lock Guides or Alt+Ctrl+;) These guides will make it easier to arrange your content and to allow for 10px margins.
  6. Use the M (Rectangular Marquee) Tool to create spaces for a banner, text content, image content and a menu. Fill the spaces with colour (Shift+F5). Place each on individual layers. Name the layers (banner, text content, etc)
  7. Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
  8. Create Clipping Masks: make sure the banner image sits on top of the banner layer (with the colour space). Have only the layer with the image selected and right click on the active layer (beside the name of the layer) and click on Create Clipping Mask. Your image should take on the dimensions of the layer  below. – Alternatively you could use the short cut Ctrl+Alt+G (Cmd+Alt+G).

The 960_grid_12_col template is based on 12 columns. You can then place your text and images over 1, 2, 3 or more columns. The grid system allows you to organise your website in a visually pleasing way.

Inclass Tutorial - applying the 12 column based 960px grid to a website

Inclass Tutorial – applying the 12 column based 960px grid to a website

Examples of 16 col and 12 col variations of the 960 grid system - from 960.gs

Examples of 16 col and 12 col variations of the 960 grid system – from 960.gs

Advertisements

2 thoughts on “Create User Interfaces- Class 4

  1. Pingback: Create User Interfaces- Class 5 | RAE - Research and Exploration

  2. Pingback: Create User Interfaces- Class 6 | RAE - Research and Exploration

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s