Visual Design Components – Class 7

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

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

Today’s Class

  • Feedback on both Assessments
  • Assessment Files
  • Adding Meta-data to an Image in Photoshop
  • Inspirations

Feedback on Both Assessments

I will walk around and provide feedback on your work. Make sure that you consider the Visual Hierarchy of your work.

Create a layout of your work from basic outlines and place numbers against the different elements or pieces.

Is there one element that stands out the most? Are they all equal? Boring!!! You want to create a piece that is dynamic! For it to be dynamic it needs:

  • some movement
  • an entry point to the work (this is the first piece or element in your visual hierarchy)
  • a second, third, and other pieces in your Visual Hierarchy
  • A focal point – this can be achieved by an arrow pointing, a person pointing, a person looking at the focal point, the direction of text, etc
Example for Visual Hierarchy - based ‘Think small’ Advertisement for VW Beetle by Helmut Krone, 1960

Example for Visual Hierarchy – based ‘Think small’ Advertisement for VW Beetle by Helmut Krone, 1960

The image of the Beetle advertisement by iconic graphic designer Helmut Krone is a good example for a clear Visual Hierarchy.

  1.  Product image – due to position (we are trained to look at the top left first), high contrast (darkness of the beetle against the white background helps to make it stand out), generous use of white space (makes the image visually more important).
  2. Heading – due to position (it is positioned on the path to the next elements), bold and larger than body text, high contrast.
  3. Body textposition and size of text area. You could argue that the logo is visually as important.
  4. Logo – position, size (opposed to text) and white space around the logo.

The advertisement can be found at the AIGA Design Archives (and many other sites).

Scale – play with the size of things! Do not accept the first concept that you create. Rearrange it and change the scale of one element. How does the work look if one element is much larger?

Playing with the scale should be a lot of fun! In illustrator you might need to group some elements (Ctrl+G/Cmd+G) and select with V, the Selection Tool and drag to increase or decrease.

Assessment Files

Below are copies of both your assessments:

Assessment 1 – Student Diary Cover

Assessment 2 – Design a GUI

Adding Meta-data to an Image in Photoshop

The easiest way to integrate Meta-data into a file in Photoshop is to open the File Info Sheet: click File>File Info from the drop menu or use the short cut: Shift+Ctrl+Alt+I to open the window.

Next enter your information into the text fields. You want to add a title, name of author (creator), description, keywords and a copyright status.

Shift+Ctrl+Alt+I or File>File Info...

Shift+Ctrl+Alt+I or File>File Info…

Example of File Info being filled in.

Example of File Info being filled in.

PS Screenshot - File Info 02

Inspirations for Your Assessments

We were discussing different trends and inspirations in class. Here are some ideas and inspirations. Click on the images to activate a Google Image Search for the type of images in the thumbnails.

Retro Book Cover Illustrations 50s - Click the image for a Google Search

Retro Book Cover Illustrations 50s – Click the image for a Google Search

Retro Futurism - Click the image for a Google Search

Retro Futurism – Click the image for a Google Search

Vintage Book Illustration - Click the image for a Google Search

Vintage Book Illustration – Click the image for a Google Search

Advertisements

Visual Design Components – Class 6

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

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

Today’s Class

  • Feedback on your Student Diary Cover for Assessment 1
  • Work on Student Diary Cover
  • Inspirations

Progress with Assessment 1

Please open your assessment 1 – Student Diary Cover; I will walk around and look at everyone’s progress.

You will receive feedback and be able to work on your assessment.

Inspirations for Assessment 1 – Student Diary

You want to visit and bookmark these two online resources:

Typographic images can be a strong visual treatment of thought and ideas someone may have. The thoughts could be made visual in a comic-like sense.

The Face by drfranken

The Face by drfranken, found on ChromoArt.de

What Time is it Now? by King_Bobbles

What Time is it Now? by King_Bobbles, found on Templates Blog

Visual Design Components – Class 5

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

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

Today’s Class

  • Discuss your assessment progress with Assessment 1
  • Discuss your approach to your target audience
  • Inspirations

Progress with Assessment 1

Please open your assessment 1 – Student Diary Cover; I will walk around and look at everyone’s progress. Please open up anything you have done.

I would like to see some ideas and concepts at this stage, a description of the target audience and possibly you might have started on the project in Photoshop, Illustrator or InDesign. I will spend approximately 20 mins on this.

Inspirations for Assessment 1 – Student Diary

Swiss International Style – an iconic style of graphic design from the 1950s, strongly influenced by the ideals of the German Bauhaus – Click the image for a Google search on Swiss Style:

Swiss International Style Screenshot Google

Swiss International Style

Swiss International Style

Constructivism – The immensely graphic art and propaganda style of Communist Russia, or to be more precise, of the Soviet Union. Early 1920s – 1940s. Click the image for a Google search on Constructivism:

Constructivism

Constructivism

Vietnamese Propaganda Posters – this is a particular style popular in Communist Vietnam. Visually very flat with the use of rich patterns and stunning in colour scheme. I feel very attracted to this style. Vietnam particularly in 1960s and 1970s. Click the image for a Google search on Vietnamese Propaganda Poster:

Vietnamese Propaganda Poster

Vietnamese Propaganda Poster

Photomontage – Artform that became extremely popular in the early 20th Century. Particularly popular in German Expressionism and Dadaism. Click the images for links to the original images or sites:

Photomontage: Amir Ebrahim Photography

Photomontage: Amir Ebrahim Photography

Massive Attack - The Essential Mix

Massive Attack – The Essential Mix

ruthworkx -http://ruthworkx.files.wordpress.com

ruthworkx -http://ruthworkx.files.wordpress.com

Mosaic of Sofia Coppola - by Maurizio Galimberti - www.mauriziogalimberti.it

Mosaic of Sofia Coppola – by Maurizio Galimberti – http://www.mauriziogalimberti.it

Photo Montage by SGlider12 on Webdesign.org - Click image for great Gimp tutorial

Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial

Assessment 2 – Design a GUI

This assessment covers this class for these units: Create Visual Design Components and  Analyse Information and Assign Meta-Tags and Create A User Interface.

Due Date: in July

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:
Platform consideration – basically decide on the output platform and write it down
Dimensions – at what size will the user view your GUI?
Target Audience – Visit class 3 for ‘Visual Design Components’ for ideas on how to develop your target audience.
Influences – ‘screenshot after screenshot’, capture screenshots of influences, look up sites that influenced you.
UCD considerations, design your GUI around User Centred Design considerations
Follow a step by step approach for your design process – Visit class 2 for ‘Visual Design Components’ for examples of a design process

You will need to supply original photos taken by you! Each photo needs meta-data assigned to it. Include photographer details, tags, image title, copyright statement. Include a folder with the edited images with meta-data.

Tutorial9 - Glossy Reflection

Tutorial9 – Glossy Reflection

Glossy Reflection Tutorial

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

EDSS – Class 4

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class 2     Class 3     Class 5

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

In today’s class you will learn about XML.

Today’s Class

Use the XML section on W3Schools and/or Tizag to 1.research and 2.document the points below.

Please document your XML research by  answering all questions in the document:>Class 4 – XML Documentation. Upload the completed document to MyKangan!

List of Questions/ Tasks

These questions can be found in the attached Word File.

  1. For what purpose was XML created?  Link: W3Schools – Home
  2. List some of the uses and benefits of XML!  Link: W3Schools – How canXML be used?
  3. XML documents are quite sensitive and the syntax (arrangement of words) must be followed exactly.
    Describe XML syntax:  what does it need to include and what is the structure?  Link:W3Schools – XML Tree Link:W3Schools – Syntax Rules
  4. What is an XML element and what may it contain? Link: W3Schools – XML Elements
  5. What are attributes? Give an example of the syntax (how it is used in XML). Link: W3Schools – XML Attributes
  6. What advice is given in regards to using attributes and elements in XML? What does the writer say about storing meta data and  storing data? Link:W3Schools – XML Attributes
  7. Define ‘Well Formed’ XML document and paste the example supplied on W3Schools! Link: W3Schools – Validation
  8. Define ‘Valid’ XML document and paste the example supplied on W3Schools! (Use previous link)
  9. What is the difference between a Well Formed and a Valid XML document?  (Use previous link)
  10. What does DTD stand for? What is its purpose? Paste the example of a DTD used on W3Schools.  Link: W3Schools – Validation    Link: W3Schools –Introduction to DTD
  11. W3Schools has a validator for XML. What does a validator do? Find other online or downloadable validators and provide links. Link:W3Schools -Validator
  12. View how CSS can be used to display XML. Explain what the CSS does by using an element and describing the outcome. Use the code provided at the link and a screen shot of the outcome. Link:W3Schools – XML with CSS
  13. What is XSLT? What does it do? Link:W3Schools – XML and XLST
  14. Imagine that you have an online shop and you need to adjust the prices. Use the supplied link and adjust the prices as this: Belgian Waffles:$ 4.95, Strawberry Belgian Waffles:$ 8.95, Berry-Belgian Waffles (SPECIAL):$ 7.95, French Toast $5,95, Homestyle Breakfast – $8.95
    Insert the XML code in the blue box! Link:W3Schools – TryIt Editor XML/CSS

W3Schools > We will use W3Schools when learning about the Markup languages.

Note: Your comments and feedback are as always welcome. Please leave additional information for other users. Thanks!

Visual Design Components – Class 4

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

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

Today’s Class

 

Based on image by hotblack on morgueFile.com - F.Viola

Based on image by hotblack on morgueFile.com – F.Viola

 

EDSS – Class 3

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class2     Class4     Class 5

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

In today’s class you will do more JavaScript research by using W3Schools:

Read up on HTML on W3Schools

Read up on JavaScript on W3Schools

JavaScript - F.Viola

JavaScript – F.Viola

Today’s Class

Use the JavaScript section on W3Schools to 1.research and 2.document the points below.

You can document your research and definitions in a Word document. Use this template >JavaScript Documentation2  or create your own!

  • Describe what a Variable is in JavaScript terms. Give an example when you could use a variable.
  • Define Data Types in JavaScript! W3Schools refers to 7 Data Types.
  • Define Objects in JavaScript!
  • What are Comparisons and what are they used for!
  • What are Functions and what do they do?
  • Describe Loops!
  • What types of Loops are there and what are they used for?
  • Research examples for JavaScript use! List a 10+ uses and describe what the JavaScript does. >30 Brilliant Examples of JavaScript Use
  • What is JQuery and what does it do?
  • Try a JQuery Effect in the TryIt Editor, eg jQuery slideToggle(). Change some elements, eg text. Describe what it does. Do you like it?

W3Schools > We will use W3Schools when learning about the Markup languages.

Note: Your comments and feedback are as always welcome. Please leave additional information for other users. Thanks!

Visual Design Components – Class 3

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

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

Today’s Class

  • Applying Step 1 of the Design Process: The Project Outline
  • Target Audience Workshop

Applying the Design Process –

Step 1: The Project Outline

  1. You must clearly define what is required to be designed.
    What requirements/problems must the design solve? – inform, promote, sell. define a mood, etc.
  2. Define the target audience?
  3. Determine format and delivery platform. Are there any specifications or constraints? Think about size, format, cost, time, colour, etc.

>

Based on image by hotblack on morgueFile.com - F.Viola

Based on image by hotblack on morgueFile.com – F.Viola

Target Audience Workshop

When defining your target audience you might fall into the same trap as most people, you might define your target audience to broadly. It is a common mistake to assume that (potentially) everyone is your target audience. The mistake is the assumption that a larger target audience gives you a larger gruop of potential customers, buyers or clients. The reality is unfortunately different and I would like to clarify it with a metphor:

Love in the making… Cupid 1 says that he wants to shoot an arrow and hit any person in a park. He assumes that he will hit one eventually. He closes his eyes and shoots an arrow.

Cupid 2 aims for a specific couple, he studies them, estimates the distance, the direction and strength of the wind and then (and only then) takes aim on that particularly couple.

Cupid 2 has it right, he will get the target audience that he anticipated, his product (the arrow) is custom made for the task. Furthermore Cupid 2 takes the time to find the right people for each other, not just anyone…

Source: GraphicsFairyBlog - click image for link

Source: GraphicsFairyBlog – click image for link

When defining your target audience you need to be specific and aim to get into the mindset of your audience. Understand what excites them, what interests them, what issues are important to them, how they communicate verbally and in social media. You want to understand what style appeals to them, what colour scheme is suitable and what other products, websites, apps, social media they purchase or frequent.

Clear Goal Media advises to find a niche market and ask yourself these 5 questions about your target audience:

  • Desires (things they aspire to but not necessarily need)
  • Values (a code of behaviour they define as ‘good’, ‘cool’ and /or  ‘appropriate’)
  • Needs (things within your niche they cannot do without and if you provide solutions will ‘hook’ them)
  • Can they pay for the products you promote or sell?
  • What is their level of expertise (you need to pitch your ideas slightly above that, but not too far above that).

Read the complete post by Clear Goal Media: How to define the target audience for your website?

Define Demographics and Psychographics

Inc. advices to define a target audience by looking at demographics (aspects related to the persons status and whereabouts) and psychographics (personal characteristics of a person).

Read the complete post by Inc. : How to Define Your Target Market

Think about demographic factors:

  • Age
  • Location
  • Gender
  • Income level
  • Education level
  • Marital or family status
  • Occupation
  • Ethnic background

Think about psychographic factors:

  • Personality
  • Attitudes
  • Values
  • Interests/hobbies
  • Lifestyles
  • Behaviour

‘Determine how your product or service will fit into your target’s lifestyle. How and when will they use the product? What features are most appealing to them? What media do they turn to for information?  Do they read the newspaper, search online, or attend particular events?’ Inc.

Create Personas

Finally, another important step in making your target audience more real and being able to reach them on a more personal level is creating personas. Personas are a customised target audience. What it is you are actually naming your target audience segment and give them a personality. The idea of personas is to make your target audience more real and to give them a face with needs and characteristics.

Read more about Personas on: Raventools’ How to define your target audience the right way

Create 2 -3  personas for the target audience of the student diary cover.

EDSS – Class 2

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class 1     Class 3     Class4     Class 5

EDSS is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D). This class is a cluster of the two units, that will be delivered together.

Overview

XML is a central aspect of this class. We will use W3Schools to learn XML.

XML is connected to HTML and JavaScript. You need to learn the basics of both:

Read up on HTML on W3Schools

Read up on JavaScript on W3Schools

Today’s class is about JavaScript.

JavaScript - F.Viola

JavaScript – F.Viola

Today’s Class

Use the JavaScript section on W3Schools to 1.research and 2.document the points below.

You can document your research and definitions in a Word document. Use this template > JavaScript Documentation  or create your own!

  • Definition for JavaScript, including the purpose and context of other Markup Languages
  • Definition HTML DOM and example of a HTML DOM tree found on W3Schools
  • Can JavaScript be inserted into the Head or Body section of an HTML document?
  • How is JavaScript inserted into HTML?
  • Give an example of a Script Tag
  • What file extension will you need for an external JavaScript file?
  • Do external JavaScript files use <script> tags?
  • Write document output: Look at this example on the TryIt Editor and  change the Script so that it writes the <h1> and not the <p> content, change the <p> to HTML.
  • What is a JavaScript statement? Define and give an example!
  • How do you separate statements?
  • Is JavaScript case sensitive?
  • Write document output 2: Look at this example on the TryIt Editor and  change the Script so that JavaScript creates the <h1> Good Morning and an additional <h2> What I love? while HTML is responsible for <p>The smell of coffee.
  • The For Loop: Use the example provided for cars on the TryIt Editor and change it to write 6 brands of chocolate. Make sure to change the string (or text value=cars to something more appropriate).
  • Data Types – define: dynamic (data) types, JavaScript Strings, JavaScript Numbers, JavaScript Booleans, JavaScript Arrays, JavaScript Objects.

W3Schools > We will use W3Schools when learning about the Markup languages.

Visual Design Components – Class 2

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

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

Assessment 1 – Design of a Student Diary Cover

See the Brief: 2014_Cover comp guidelines

It is important to apply the steps of the design process when designing. Jumping on a computer and creating whatever comes to mind excludes your ideas and limits you to what you are able to do with the software.

Make sure to include steps that allow you to analyse the project (Project Outline), research the topic, generate ideas (brainstorming, using Kickcard method, using spider grams, creating a Metaphorical Analysis, The Inverse, sketch, doodle, etc) and discuss them with someone else on the project (eg teacher, friend or other student). You want to sketch and label your ideas.

Now refine them and work them on the computer.

Use the examples below as a step by step design process (the second one is more Web design focused, so ignore any coding references):

Design Process – Graphic Design    Design Process – Web Design

Make sure to write more about the Target Audience than just a sentence. I have attached an example of my own work. The Target Audience is for a Photography website: Example Profiling Target Audience

Note: You will receive an assessment cover sheet.

EDSS (Extensible Document and Style Sheet) – Class 1

Based on photo by dhester from morgueFile.com

Based on photo by dhester from morgueFile.com

Link to all EDSS classes     Class2     Class 3     Class4     Class 5

Welcome to your first class of EDSS, which is a combination of Create an Extensible Document (ICPMM491D) and Create an Extensible Style Sheet (ICPMM492D).

This class is a cluster of the two units, that will be delivered together.

Create an Extensible Document

… requires the individual to create an extensible markup language (XML/PPML)
document for content publishing that is well-formed, free of errors, meets the needs of the
business and is extensible to meet future business needs.

In more detail, you will learn to:

  1. Define document structure
    > details required for the job are checked and confirmed against the job specifications
    > mark-up language version and the character encoding used in the document (or declaration statement) are defined and/or inserted in the document
    > an external or internal Document Type Definition (DTD) or mark-up language schema is chosen and correctly wrapped and referenced depending on project requirements
    > root element is correctly defined and all elements are accurately nested
    > attribute types and default values are declared, where necessary
    > occurrences of elements are stated and elements of mixed content declared
  2. Confirm validity
    > start and end tags are included and closed to ensure no element errors
    > namespaces are used to resolve name conflicts
    > the document is well-formed, error-free and conforms to the mark-up language syntax rules
    > the document conforms to the rules of a Document Type Definition (DTD) or the mark-up language schema
  3. Finalise and test document
    > character data (CDATA) sections are added to the document structure
    > the final document is viewed with a mark-up language parser
    > the mark-up language document is well-formed, free of errors and meets the needs of the business
    > the document is linked to an extensible style sheet and template and tested
    > the document is extensible to meet future business needs

Create an Extensible Style Sheet

… requires the individual to create extensible style sheets for electronic publishing or online documents including computer screens and handheld devices.

In more detail, you will learn to:

  1. Prepare the source document:
    > by validating it as free of errors,
    > by confirming the style and transformation requirements of the source document,
    > by confirming the required advanced styling requirements,
    >
    by confirming the different media, display formats and target audience
    > preferred platforms and abilities
    > by preparing the source document for the style sheet
  2. Create the style sheet:
    > design multiple templates and apply them to the style
    sheet
    > use the required presentation styles
    > incorporate transformation requirements into several style sheets
    > link or associate the style sheet with the source document
    > test the link
  3. Test the style sheet:
    > validate style sheets are to ensure correct presentation and transformation
    > update the style sheet is if errors occur and validate again
    > link the style sheet to a data-store and to a digital template and test
    > make the style sheet extensible to meet future business needs

Assessments:

There will be 2 assignments, for each you will have to

  • create an extensible mark-up language document, that is well formed, free of errors, meet the needs of the business and is extensible to meet future business needs.
  • create extensible style sheets for online documents or electronic publishing
  • create a testing method (eg a flow chart).

Direct questioning and in-class participation will be included as a form of validation. If you participate well in class it will make it easier for me to mark you as competent.

In-class Task:

Research the acronyms below! You can present your findings as a table.

  1. What does the acronym stands for?
  2. What does it mean, or do or what is the function?
  3. Find an example of coding or document structure and copy or screen print it!

HTML XML PPML SGML CSS XSL PRISM DSSSL

For in-class discussion and submit your document on MyKangan (available by next class).

W3Schools > We will use W3Schools when learning about the Markup languages.