Inspired by photos by emlyn and clarita from morgueFile.com

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

Today’s Class

  • Talking About Inspiration and Good Design
  • Reflection Tutorial – Photoshop Workshop (in class)

Talking About Inspiration and Good Design

Following up on last week’s conversation about inspiration: I was extremely pleased with some of the works seen by students for student diary entries as well as the GUI workshop. It is good to see that you are being inspired by works that I introduced in class and that you take feedback on board.

It is important to question your work, to seek feedback and to refine it. It is never easy to produce work that will satisfy your own standard. You are actually lucky if you set a high standard for yourself, I often teach students who do not set a high standard and therefore just aim for mediocrity. Their work is generic and looks like something they have found on Google.

You want to aim to first understand a question.You can do this by looking at the design problem and creating a clear project outline, including a design brief, a close look at the target audience and the overall technical details.

Next you look at providing an answer, that suits the brief and that covers all the points of the project outline. If the answer reflects your style or has your signature, that is an added bonus.

Illustration by Kate Miller, found on DzineBlog.com
Illustration by Kate Miller, found on DzineBlog.com

As stated before you will find some inspirations in the artwork and design work of current practitioners and past masters. I have selected an inspiring post from Dzineblog for today:  Some Amazing Retro Style Illustrations Part 2

It looks at retro style illustrations and I appreciate the amount of texture and depth that can be found in a lot of the works.

Gary Neill

Below are illustrations by Gary Neill. His illustrations are rich in texture and show depth in the use of colour, tone and pattern. All his works are simple in shape and visually engaging. I like to look at his work, it makes me feel something, may this be happiness or a sense of wanting to explore the work in more detail. The orange and blue illustration is such a strong statement, it makes me think of online chatting, online dating or any form of digital interaction.

Gary Neill has created illustrations for impressive publications, such as The Guardian, The New York Times, The Economist, Business Week, New York Magazine, Wall Street Journal, The Times, The Independent, Saatchi & Saatchi, Mens Health, Wired, Sunday Telegraph, National Geographic, The Washington Post and many others. Explore his work in more detail on Gary Neill’s SiteGary Neill’s Tumblr SiteGoogle Image Search

Illustration by Gary Neill found on Dzineblog.com - http://garyneill.com/  http://garyneill.tumblr.com/
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/

The illustration below is a more sinister and serious work by Neill. It was used by The Economist and has a focus on torture applied by a government. We have all heard the saying an image says a thousand words and this illustration is a powerful attempt at raising awareness of torture happening nowadays and how different Western countries view it. I like the simplicity of the image and the use of only black and red. Red is always a strong colour to represent emotion and it is used here symbolic for blood. This is a link to the article The Dark Pursuit of the Truth – Spies, Torture and Terrorism.

Illustration by Gary Neill found on P.A.P.-Blog - http://garyneill.com/  http://garyneill.tumblr.com/
Illustration by Gary Neill found on P.A.P.-Bloghttp://garyneill.com/ http://garyneill.tumblr.com/

Tavis Coburn

The illustrations below are works by Tavis Coburn. His works look very retro and represent a style and feel often found in book cover illustrations and comics of the 1940s and 50s. The style is often referred to as Pulp Fiction – see this Google link for examples for Pulp Fiction book covers.

I find his work very appealing, the stylised use of halftone patterns can look cool – even though it has been overused in recent years. The image of the newly-weds has depth – the back ground is blue and white and mostly flat (except of a few scratch marks above her head), the couple are very textured in an over exposed halftone pattern, the dotted line and suitcase with money sit above it all and suggest that the bride is focusing on the money. The work is a dynamic play on figure/ground relation or negative and positive space.

Here are two links to video tutorials on how to create halftone patterns:

The images he uses look friendly as in the advertisments of the late 40s and 50s, but placed in our time they seem to criticise and poke fun at the consumerism of the 50s.  Explore Tavis Coburn’s work in more detail: Tavis Coburn’s Site, Google Image Search

Illustration by Tavis Coburn found on DzineBlog.com
Illustration by Tavis Coburn found on DzineBlog.com

The second illustration by Coburn is from an article predicting the future of iOS in 2011. What appeals to me is the bright colour scheme, the icons representing the infographic nature of mobile app design. Yet, the image looks like a SciFi take from the 1940s or 50s if not even earlier. I feel reminded of Fritz Lang’s Metropolis. Again, it seems that Coburn looks at our time through a mirror of the past.

Illustration: Tavis Coburn - Illustration for for an article predicting trends in Apple's mobile strategy. Found on: TavisCoburn.com
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com

Jessie Ford

The illustrations by Jessie Ford have an appealing softness to them. Her work is retro and yet very contemporary. Her work looks very vector-based, it is rich in overlaying textures. I like how she uses dirty looking textures to add to an otherwise plain background. Her generous use of white space and rich textures with her vector graphic or stamped shapes is very attractive. It has depth and I always feel like looking at her work longer and a second time to see what it actually is.

Find her works at: Jessie Ford’s Site, Google Image Search

Illustration by Jessie Ford, found on DzineBlog.com
Illustration by Jessie Ford, found on DzineBlog.com

The second illustration has that simple texture that I described as dirt above. It is like rolling a drying roller brush with black paint over a rendered wall. The texture that she has applied to her illustration makes it more interesting and gives it depth. Without it it would look more digital and clean, maybe flat and polished. The grittier look of her work is strong.

Illustration by Jessie Ford, found on DzineBlog.com
Illustration by Jessie Ford, found on DzineBlog.com

Reflection Tutorial – Photoshop Workshop

This tutorial was listed in previous classes and will be presented today. It is a Photoshop tutorial that shows several easy to follow steps that will allow you to create the illusion of a glossy finish and reflections. This is very suitable for creating a glossy interface, buttons or logo, as well as adding a fold line to your work to make it look more realistic (as if scanned of a poster).

I suggest some alternative shortcuts to the steps used in the tutorial by Tutorial9.

Tutorial9 - Glossy Reflection
Tutorial9 – Reflection Tutorial

Follow the in-class presentation of this tutorial The 5 Essential Photoshop Reflections or complete it yourself.

1- Upload PSD

Upload the PSD file for the tutorial or use a PSD of your choice. You will need a basic button against a dark background.

2 – Create Basic Surface Reflection

  • Select Group 2, the layer with the cloud in it. Duplicate the layer by pressing Ctrl+J (Cmd+J).
  • Press Ctrl+T (Cmd+T) to activate Free Transform. Right click on the selected cloud and select Flip Vertical. The cloud will have flipped over.
  • Drag the cloud down manually while holding shift (to keep it aligned) or use your arrow keys (with shift – to go in larger steps) to move the cloud down.
  • Complete the Free Transform by pressing Enter or double clicking on the cloud.
Image 1 - Add a Layer Mask
Image 1 – Add a Layer Mask
  • Add a layer mask (click the button for layer mask – see image 1)
  • Press D (to reset the standard foreground/background colours to White and Black)
Image 2 - Apply a Gradient Mask
Image 2 – Apply a Gradient Mask
  • Activate the gradient tool (press G) and drag (while still in the mask mode – the mask needs to be outlined) from point 1 to point 2 (see image 2). Your reflection should be partly invisible.
  •  Last steps: apply the layer mask(right click on the layer text and select apply layer mask) and change the layer opacity to suit (I chose 65%).
Image 3 - Change Layer Opacity
Image 3 – Change Layer Opacity

3 – Create Environment Reflection

The Environmental Reflection is white on top and gets lighter towards the bottom.
The Environmental Reflection is white on top and gets lighter towards the bottom.

This reflection works in 2 mayor steps:

Make the Selection

  • Select the cloud on the layer Group 2. The fastest way is to hold Ctrl while you click the layer thumbnail.
  • Make a round selection with the Elliptical Marquee Tool (Shortcut: M or Shift+M to toggle between Rectangular and Elliptical Marquee) and drag it over the top part of the selection of the cloud. Make sure to hold Shift+Alt (or pressing the Intersect with Selection button in the options panel) while dragging your round selection.
  • The result should be a top part selection of the cloud with a arch at the bottom.

Apply a Gradient Fill

  • Create a new layer on top of the cloud layer (Group 2). Call it Env Reflection.
  • Make sure to have white as foreground colour.
  • Fill the new layer with a white to transparent gradient. Select Gradient Tool (Shortcut: G) and choose the option: Foreground to Transparent (in options panel). Drag the cursor from above towards the selection. This will apply the white. Try it a few times until happy.

Adjustments

  • Reduce the Opacity setting in the Layers Panel to reduce the intensity of the gradient.
  • Save your file for the Web: as a PNG.

4 – Create Glossy Reflection

The Glossy Reflection is transparent on top and gets whiter towards the bottom.
The Glossy Reflection is transparent on top and gets whiter towards the bottom.

Do everything as in the steps for the Environmental Reflection, except: call the layer Glossy Reflection and apply the gradient fill from the bottom up. This will make the cloud shape look like a glossy object.

Save your file for the Web: as a PNG.

5 – Create a Fold Line

The Fold line is doubled up and the flare gives it a bit of depth. Look at the Tutorial9 link for the flare.
The Fold line is doubled up and the flare gives it a bit of depth. Look at the Tutorial9 link for the flare.

The fold line is a good way to create the illusion that your artwork is a poster that has been scanned in. The illusion of the fold looks like the shade in a photo or worn.

Make the Selection

  • Select the cloud on the layer Group 2. The fastest way is to hold Ctrl while you click the layer thumbnail.
  • Make a straight selection with the Rectangular Marquee Tool (Shortcut: M or Shift+M to toggle between Rectangular and Elliptical Marquee) and drag it over the lower half of the selection of the cloud. Make sure to hold Shift+Alt (or pressing the Intersect with Selection button in the options panel) while dragging your selection.
  • The result should be a lower half selection of the cloud.

Apply the Darkness

  • Create a new layer on top of the cloud layer (Group 2). Call it Fold Line.
  • Make sure to have black as foreground colour (or simply press D).
  • Select the Brush Tool (Shortcut: B) and a size of 170 or more with a hardness of 0% (this can be found in the Options Panel under the brush tip (called brush preset picker).
  • The next bit is important: Do NOT draw inside your selection but a bit above it. The thickness and softness of the brush will still provide a hint of black.

Adjustments

  • Reduce the Opacity setting in the Layers Panel to reduce the intensity of the colour.
  • Copy and move that layer to get a more natural and slightly overlapping or blurred fold.
  • Save your file for the Web: as a PNG.

Feedback

I hope that you have enjoyed the tutorial. Please leave me your feedback in form of a comment. If the tutorial did not make sense to you, I would like to find out about that, so that it can be made clearer. Thanks!

Inspired by photos by emlyn and clarita from morgueFile.com

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

Today’s Class

  • Talking about inspirations
  • Web Design – Photoshop Workshop (in class)

Talking about Inspiration

While you are a student you should be able to experiment as much as you can. I mean, you should claim your right to experiment in your work. Rather than always going for a conservative option.

On the other hand you never want to stop searching for inspiration in the work of others and in society, the built environment and nature in general.

As you could see with the first assessment – taking close-up photos can lead to unexpected results. Objects never look the same on screen as they do on the floor or in real life.

Close-up at Fed Square, Federico Viola 2013
Close-up at Fed Square, Federico Viola 2013, Found at p.ic

Some inspirations you will simply find in the artwork and design work of current practitioners and past masters. For current designers you want to look at sites and magazines such as Computer Arts and Computer Arts Projects, Mashable,  Design Envy and Dzineblog are just a few inspiring resources.

This week’s Visual Design Component Class covered links and some descriptions of some styles and movements that I relate to very much:

  • Swiss International Style
  • Constructivism (often called Russian Constructivism)
  • Vietnames Propaganda Poster
  • Photomontage

I highly recommend reading up on each and particularly looking at examples of the works. It is good to find out what stylistic choices each movement made and what ideas were big in their days.

Swiss International Style - Joseph Müller-Brockmann - Beethoven - found at www.designhistory.com
Swiss International Style – Joseph Müller-Brockmann – Beethoven Concert Poster – found at http://www.designhistory.com
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 - click image for more information and link to her blog
Contemporary design in style of Constructivism by Teo Brito found at LauraGreen92 – click image for more information and link to her WordPress blog

It is fine to be inspired by other artist’s and designer’s work. Actually, you should look for greatness in other works and reference their works. This is done by paying a tribute to the original artist in form of a homage.

Experimental Photomontage by Robert Heinecken
Experimental Photomontage by Robert Heinecken

Web Design – Photoshop Workshop

In-class workshop. We will continue to apply the grid system to a website design. This time we will apply the grid to a gallery. The design will depend on your choices of layout and number of thumbnails that you want to feature.

Screenshot - applying 960 Grid 12 Col layout from 960 Grid System
Screenshot – In-class Tutorial: Applying 960 Grid 12 Col layout from 960 Grid System
  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.

    Setting the grid up.
    Setting the grid up.
  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).

    Concept for Gallery Screnshot
    Concept for Gallery Screenshot

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.

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

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 4     Class 5

Task – User Centred Design

Today we will focus on UCD or User Centred Design. UCD is also called Human Centred Design and is a way of designing interfaces and websites in general that places the user in the centre of all design efforts.

Please read the excellent text from W3C – Web Accessability Initiative and create a list of points (like a check list) that you can use to check if you have made the GUI user centred.

Assignment 1

I will check each student’s work for Assignment 1 (GUI Workshop) and provide feedback in class.

Please ensure to keep working on your assignment.

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 3     Class 4

Assignment 1 GUI Workshop

1,000 – 1,300 words

Due: 7th of June 2013 – 7/6/13

Format: Interactive PDF, PowerPoint Show or Word Document

1- Define a GUI – write what it is, what the purpose is, what graphic interactive components can be part of it, draw a diagram explaining the different components or aspects (in the style of a mindmap/flowchart). This is about your informed understanding of a GUI, after conducting some research, but it is not about definitions found in a book or online.

Mixed Textures based on photos from morgueFile
Mixed Textures based on photos from morgueFile

2 – Discover tactile qualities in textures – discover 10-20 different textures that can be found in the home. Describe the material, how it feels to the touch, what sounds it makes, how it behaves when used appropriately and when used inappropriately. How does it react to pressure (pressing), rubbing and pulling? A paragraph per texture is the minimum.

3 – Collect the Good – Collect several images of 5+ GUIs that you enjoy using and or like the look and feel of. Write an overall description of the aspects that appeal to you. You do not need to write one for each, but one overall discussing the overall aspects that you like.

4 – Collect the Bad and the Ugly – Collect several images of 5+ GUI that you dislike, that either annoy you or that are not enjoyable to use. You may include interfaces that you find visually uninteresting or poorly designed. Describe the negative aspects.

5 – Conclusion – draw a conclusion of your research. Describe what inspired you and what influences you will incorporate in your future designs. Describe some of the ideas that you have had for GUI elements.

Carpet Textures based on photos from morgueFile
Carpet Textures based on photos from morgueFile

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 2     Class 3     Class 4

Welcome to your first class on Create User Interfaces.

This class is about the creation of a user interface in these steps:

  • Clarify project requirements
  • Generate ideas
  • Plan approach
  • Produce user interface
  • Evaluate user interface

Clarify Project Requirements

This stage of the process is all about developing a good understanding of the client brief, the target audience, the needs of the client and target audience and the purpose of the interactive media product.

You will also need to look at technical aspects, such as the delivery platform, file output format.

Generate Ideas

Research interactive media product interfaces, designs, images, artwork and other creative sources that may inspire design ideas.

Use sketches and concepts as the basis of your design ideas,.

Incorporate brainstorming and other creative idea generation methods when developing concepts. Spider diagrams, word maps or morphological analysis are other methods that can be used in exploring directions.

Copyright clearance needs to be obtained and recorded where necessary.

The initial concepts for the interface design need to be presented to relevant personnel and the client for discussion and feedback.

Plan Approach

Select final design and incorporate the feedback.

Use an appropriate industry standard graphics software that will suit the needs and requirements of the project.

Explore a range of typographical ideas, as well as visual design elements that could be used for the interface design.

Produce User Interface

Use graphics software to develop the structure for user interfaces based on the final design concept.

Source, create and integrate all graphic interactive components.

Apply visual design and communication principles to the development of the user interface.

Ensure that user interfaces meet the principles of user-centred design and relevant standards.

Document styles for text and presentation for use in style sheets and templates or themes.

Save user interfaces in appropriate output format suitable to the technical needs of the project.

Evaluate User Interface

Review the final design to be able to assess effectiveness of the user interface, appropriateness to the user and audience and technical feasibility.

The 5 Planes of a Website Project

Please view the presentation below about the 5 Planes approach by Jesse Garreth when designing a website or other interactive product.

UX Design_Federico Viola

Below is a link to an article from Smashing Magazine which is an excellent overview and introduction to user interfaces. Read it:

http://www.smashingmagazine.com/smashing-book-1/user-interface-design-in-modern-web-applications/