Thursday, 31 October 2013

DESIGN PROCESS - RESPONSIVE - TASK 2

At the end of our second session we were given a small task. 

Using the content covered in the session we are to review our five initial briefs and identify one brief with scope for substantial development, the selected brief must appeal to my interests on a personal and professional level. Once the brief has been selected answer the following questions;


  • Why chosen?
  • What do I want to get out of it?
  • What do I want to produce in response?
  • What do I need to produce in response?

After answering the questions asses the brief against the eight questions given in the studio session and then create some rough visual examples of the form the response could take.


CHOSEN BRIEF





Why chosen?
  • I chose this particular brief as the winning outcomes will communicate an ethical message promoting the importance of diversity within a community. As a very ethically motivated person the brief really stood out to me as something that I wanted to produce a response for. 

What do I want to get out of it?
  • Ethical recognition - I am an ethically driven person, I like producing work that has a positive social or political impact. Entering the brief will get me recognition for being an ethically driven designer, something that is very important to my professional practice.
  • International exposure - The winning designs are printed onto billboard sized material and displayed as part of an outdoor exhibition in America.
  • Experience - I will gain experience from analyzing the brief to formulate a functional appropriate response, and working to a deadline. 
  • Benefits my practice - The brief is very open in regards to creative freedom as there are no restrictions to media or how the response is created, this allows me to tailor my response to suit my individual design practice.  

What do I want to produce in response?
  • I want to create a very illustrative response that does not rely heavily on type to communicate its message (universally understandable).

What do I need to produce in response?
  • Responses need to promote a message of diversity and raise awareness of the benefits of inclusion and the rejection of prejudice. 
  • The response should visually capture the viewers attention and promote the intended message.
  • No restrictions in regards to media.
  • The response must be submitted at a specific size and format. 



ASSESSING THE BRIEF


What is the problem?
  • Lack of knowledge about the benefits of diversity and treating people in the correct manner.

What are they asking you to do?
  • Create a visual response that captures the viewers attention and promotes a positive message about the benefits of diversity.

What are they trying to achieve?
  • A raised awareness of diversity, hopefully causing people in the surrounding area to act more positively towards each other.

Who will benefit?
  • Firstly, I will benefit as I will gain  international exposure for an ethical piece of work.
  • Secondly, anyone who is affected positively by the messages communicated by the work.

What is the message?
  • Promote a message of diversity and raise awareness of the benefits of inclusion and the rejection of prejudice. 

Who is the target audience?
  • People living in the surrounding areas who act unjustly to each other.
  • More aimed at teenagers and young adults.

How will the message be delivered?
  • Through a large billboard advertisement.

Can you see a problem?
  • No

VISUAL RESPONSES


DESIGN PROCESS - RESPONSIVE - SESSION 2

At the start of the session we briefly covered some points that should be considered when selecting a brief.

Considerations;

  • Timescale.
  • Project size.
  • Is the brief relevant to my practice?
  • What are the challenges?

Next, we were asked to list what we wanted to achieve from the 'Design Process' Module. 

What do I want to achieve?
  • Work to gain exposure.
  • My work to make a change/difference, either social or political (ethical projects).
  • To gain experience working for actual clients.
  • Improve my ability to create an aesthetically appropriate and functional response.

Below are points generated by other members of the class;

  • Gain a better understanding of project timescale.
  • Effective professional communication.
  • How to not get exploited.
  • Identify individual practices.
  • Brief analysis.
  • Creative compromise.
  • Build a strong portfolio.
  • Build professional contacts.

After discussing the various points we were asked to answer a second question;

Why are the competition/live briefs useful?

  • Help you gain experience.
  • Enable students to develop industry contacts.
  • Gain experience analysing briefs and answering client needs.
  • They enable you to see the standard of work produced by other participants.
  • Builds confidence.

Below are some more points given by my class mates;
  • Commitment to being more than a student (going out your way to enter briefs and integrate into industry).
  • Improve professional design skills.
  • Help you to realize professional responsibilities (deadlines, communication etc).
  • Enable you to get professional feedback.
  • Professional experience.


Finally, using the points discussed we were asked to explain why we selected the briefs we did;
  • Relevant to personal interests.
  • Work produced could have a positive effect (social/political)
  • The outcome will be relevant to my design practice.
  • I will gain exposure.
  • It will help develop the quality of my responses through the experience gained. 


Next, we were divided up into small groups of five and handed an old brief from last years YCN student awards, ours was set by renowned toy company 'Lego'. After reading through the brief each group was tasked with dissecting the information to see if the brief was worth entering.



Fred listed a set of very useful questions that will help when assessing any future briefs;
  • What is the problem?
  • What are they asking you to do?
  • What are they trying to achieve?
  • Who will benefit?
  • What is the message?
  • Who is the target audience?
  • How will the message be delivered?

Below are our responses to each question in regards to the YCN Logo brief.




What is the problem?
  • The company has been experiencing confusion with competitors, this could give them a bad name and also means they are losing money.


What are they asking you to do?
  • The brief asked participants to give create a visual campaign to rejuvenate the  companies appearance and separate them from their competitors.

What are they trying to achieve?
  • Lego want to rejuvenate the company image to inspire more children/parents to want to buy their product.

Who will benefit?
  • The Lego company.


What is the message?
  • Lego is the best, better than its competitors. Buy Lego.

Who is the audience?
  • Parents & children.

How will the message be delivered? 
  • Some sort of visual campaign.

Can you see any problems?

  • Yes. 



Finally, we reviewed each groups findings from each brief. After each group had spoken Fred highlighted some very important points about each brief that nobody in the class had taken into consideration.

  • The majority of the big companies putting out creative briefs are often brands that are losing money and want to be re-branded without paying top dollar to a design firm.
  • They can harvest ideas from all the entries and sell them to companies for a fraction of the cost - Often when you submit work to these companies you have no intellectual property or copyright rights. 
  • The reason they put these briefs out there is not to offer students a chance for recognition but instead increase their companies profits.

It is very important to always thoroughly read the terms and conditions before entering live and competition briefs.

Tuesday, 29 October 2013

DESIGN PRODUCTION - BRIEF 2 - SESSION 3

We started the session by getting into small groups to discuss the two questions regarding website navigation.

What are the common conventions of navigation, what are uncommon conventions?

We started by splitting the question in two and listing the common conventions of navigation;


  • Navigation bar - Links bar.
  • Navigation indicator.
  • Title or logo link.
  • Side bar.
  • Photographic links.
  • Gridded photographic links - Often found on portfolio websites. 
  • Side scroll arrow.
  • Infinite scroll.
  • Drop down menu.
  • Search bar.

Next, we listed the uncommon conventions of navigation;



  • Interactive link - play to navigate. 
  • Random page generation - Stumbleupon.
  • Navigation bar - Placed at bottom of page.
  • Infinite upwards scroll.
  • Multi-directional single page scrolling.
  • Loading menus/pages.
  • Google street view navigation.

After creating our group lists we discussed the different methods of navigation that people had generated. After covering points relating to what makes a websites navigation successful we created a 'Flow diagram' to visually communicate the paths viewers will take when accessing our websites. 





Finally, towards the end of the session we drew out the underlying grid structure of our five examples collected for last weeks task. For each site we had to answer the following question;

How do these structures help/hinder the design of the website?

  • The structure is very simple, focusing the audiences attention on background image and surrounding links.
  • The website is functional and easy to navigate, the links placed at the top of the composition so viewer attention is attracted to them.
  • The page is aesthetically pleasing as there is an effective balance between imagery and links.


  • Again, the structure is very simple and directs viewer focus to the important date.
  • Similar to the first example, this website also places its links across the top of the sites composition. 


  • The structure creates negative space at either side of the websites elements, this focuses viewer attention on the images and information displayed.
  • Furthermore, the structure also centrally places an image browser on the page, this improves the sites functionality as the purpose of the website is to showcase and promote some upmarket villas.
  • Minimal aesthetic reflects the style of villa the site is promoting. 


  • Infinite scroll website.
  • Structure creates negative space that focuses the viewers attention on important page elements, this helps the audience navigate the page improving the sites functionality. 
  • Negative space is key to ensuring the website looks balanced.
  • Colours have been used to help viewers distinguish between pages, this is useful as the website utilizes an infinite scroll feature.



  • Infinite scroll website.
  • Structure helps guide the viewers eye across important page elements, this improves the flow and functionality of the site.
  • Different fonts have been used to attract the viewers attention, this also places importance on the key parts of the text to help communicate the sites message instantly.
  • The minimal aesthetic focuses the viewer attention on design elements such as the logos, type and imagery.





Wednesday, 23 October 2013

CREATIVE SUITE - SESSION 1

COLOUR

Different colour modes; CMYK, RGB

CMYK are referred to as process colours.

Inks are generally transparent, when overlaid they create different colours.





Black is the key colour as it is used to reinforce the shadows and dark colours, otherwise dark colours can seem brownish.

The diagram below shows how CMYK colours build up to create an image.







If you save colours in your swatches pallet they can be used constantly across designs. 




If your swatches pallet becomes messy or unorganised you can reset it to its original state by following;

Window > Workspace >Reset Essentials. 




Small list view, changes how the swatches are displayed, allowing you to see what they are called. 

Registration colour is used for registration marks, not a pure black so don't use.




Creating a new swatch;

Swatch menu > New swatch or use small icon at bottom of window. Adjust the sliders to create the colour.



To get the colour of an object into the swatch pallet you can either use the eyedropper tool to select the colour and then drag the square to the swatches pallet, the same can be done from the colour pallet.

Moreover, you could also select all the objects, open the swatch menu and select 'add selected colours'

Global colour swatch - cut corners, small square icon.




Difference to normal swatches - nothing selected, edit global swatch, every single object in the artwork that has the swatch applied updates.

This will be useful when creating artwork that uses a limited amount of colour.


TINTS

Why useful?

  • Useful when working with a minimal amounts of colour. 
  • Tints can be created form global colour, the percentage is defined in the colour pallet menu. 


Tints can also be added to the swatch pallet.





SPOT COLOURS 

Solid colour, not printed using a mixture of CYMK.

Why spot colours?

  • Cheaper - Only one ink used to create colour.
  • Allows you consistency - Always the same colour.
  • You can print colours that can be achieved with CYMK - Metallic/florescent inks.


How do we use them?

Found in colour books - Pantone colour guides.

There are different Pantone guides for the different types of ink, such as uncoated, coated, solid and metallic. 

When creating artwork you use the colour reference number found in the Pantone guide, this is also sent off with the artwork to the printers so they know exactly what colour you want.

To select a spot colour, open the swatch pallet menu > Swatch library > Colour Books.



If a reference umber is known you can find the colour quickly by opening the finder.




The colour reference system only works in commercial print. Digital printers often utilise CMYK. 


 Spot colours can be defined from process colours from its name, this also means it is very important that you do not change the name of the swatch.




Tints can be added to spot colours to create new colour variations, these colours can then be saved to the swatch menu as covered before.



Tints are printed using halftones. The wider the gaps are the lighter the colour is.



It is also possible to save swatches so that they can be used in another illustrator document.




Then, in a new document, use the swatch menu to open the colour library and select the swatch file, it should then upload to the swatches panel.



These swatches can also be opened in other adobe programs such as InDesign and Photoshop.


DESIGN PRODUCTION - BRIEF 2 - SESSION 2

At the start of todays session we were tasked with creating a mind map that explored different pages that our websites could have, this proved a challenge for me as I was originally planning to have a simple, one to two page infinite scroll website.








After creating my diagram I explored how my site could navigate through the different pages. 






Next, we were asked as a class to name different pages and their functions.

CLASS LIST;


  • Home - Indictive of content, Introduction.
  • Contact - Social media links, Contact details.
  • Information/About - Ethical message, Facts, Manefesto.
  • Gallery/Portfolio - Images, Only subcategorise when appropriate 
  • Forums, Blogs, User posts - two way interaction.


Next, we were asked to get a large sheet of paper and draw up a concept sketch for our home page. Firstly, I want my design to be simple and communicate the function of the site straight away. However, I also want the first page to be aesthetically engaging to capture the audiences interest. To achieve this I have decided to create a minimalist title page that will act as a brief introduction to the website before the audience can access the informative content. The page makes use of a large legible typeface for the title and a full screen size background image. To progress into the site users will click on the websites title which will act as a link to the contents.



Finally, after creating our concept drawings we moved tables to review and critique other peoples designs. 

Below is the feedback I received.




How useful is the feedback?


  • Firstly, one comment regarding the background image made me consider what style of image I will use and where I will source it from. It is important to get a relevant image that the target audience will find interesting and engaging.
  • Moreover, another comment made a remark on the amount of information/content that the website will have. At the moment this is something I am still considering as I want the focus of the website to be on the illustrative timeline. I think that for the timeline to function in my imagined manor there needs to be a balance between the images and small, focused amounts of text.
  • Additionally, a lot of the feedback I received comments on the fact that the homepage lacks the links that can be found on all of the other pages (as seen in my earlier diagram). I believe that this is due to a misunderstanding of the homepage's function. I want the page to act like a title page, it should grab the audiences attention with the aesthetic elements like the background image, but also give viewers a brief introduction about the websites purpose.

Task

At the end of the session we were set a task to collect 5 printed examples of well designed websites.











Tuesday, 22 October 2013

DESIGN PRODUCTION - BRIEF 2 - STUDY TASK 1

Part 1

Your Design for web brief is asking you to design a web site using existing material / content. Within this session you are being asked to identify the following:
  1.    What is your subject matter
  2.    What are you trying to communicate?
  3.    Who will be / could be your audience or ‘end-user’?
  4.    What will be the most appropriate / effective form of content?
  5.    What is the function & Purpose?
What ‘sector’ / Industry you would be designing for (For example):
  1.   Pharmaceutical
  2.   Health & Wellbeing
  3.   Sport & fitness
  4.   Music Industry
  5.   Travel & Tourism
You will be required to work within pairs or groups of 3. You will be required to make mind maps, linear plans and notes in order to reflect back on your blog to analyse the session. This should identify and provide a foundation to start researching and drawing up ideas.


At the start of the session we were split into small groups of around three people. We then went through part one of the task creating mind-maps in response to each of the set questions seen above.


Below are some images displaying my responses to the set questions.









Upon completing part one of the task I discussed my initial ideas with the group, they were very enthusiastic about my skateboard timeline idea, which evidently is also my favorite concept. 

After receiving some good feedback on the timeline idea I decided to select it as the concept that I will carry forwards into the second part of the task.


Part 2


Begin to gather ideas how you can articulate your ideas into a workable informal brief, basically your telling us what you aim to design, why, when for and how.
This brief will be there to contextualise your intended motivation / design response / focus of the project.



Below are my responses to the second part of the task;




At the end of the session we were set a small task;

Bring five printed examples of good websites, prints must be full colour and A4 in size.



CHOSEN WEBSITES 






























DESIGN PRODUCTION - BRIEF 2 - WORKSHOP 1

What the session will cover;
  • Web standards and limitations
  • Layout
  • Setup
  • Basic Coding

Web standards

Acronyms, Abbreviations & stuff...

HTML - Hyper Text Markup Language. 
XHTML - Extensible HyperText Markup Language.
CSS - Cascading Style Sheets.
API - Application Programming Interface.
WYSIWYG - What you see is what you get.
MIME - Multipurpose Internet Mail Extensions.
SQL - Structured Query Language. 
MYSQL - My-Structured Query Language.
SEO - Search engine optimisation. 
FTP - File Transferre Protocol.
URL - Uniform Resource Locator.
XML - Extensible Markup Language.
PHP - PHP: Hypertext Preprocessor
ASP - Active Server Pages.
JSP - Java Server Pages.
CGI - Computer-Generated Imagery.
AJAX - Asynchronous Javascript and XML.


ASCII - American Standard Code for Information Interchange
DNS - Domain Name System
GIF - Graphics Interchange Format.
HTTP - The Hypertext Transfer Protocol
HTTPS - The Hypertext Transfer Protocol Secure.
UI - User interface.
UX - User experience.
WWW - World wide web.


Limitations

Designing for the lowest common denominator!

Colour;
  • Web safe colours.
  • 50 Shades of grey.
  • Only 216 colours available.


Web Safe Colours

When colour first arrived....

  • Colour code can be shortened when last digits are the same.

The RGB colour mode is capable of reproducing...

16,777,216 individual colours can be created using the RGB colour mode.

The wider range of colours can now be reproduced using CSS rather than HTML... 

For example 100% Red would be:

rgb(255,0,0)


Colours are not consistent across different monitors as they use a different RGB colour space. If you want it to be consistent you need to work with the 216 web safe colours available.

Choose colours in photoshop or illustrator, the colour picker offers you the option to choose 'web safe colours' and gives their codes.



Web Safe  Fonts

For a chosen font to display consistently across different computers a standard font must be used.

Further to this a font family is chosen giving several 'fallback' options to ensure maximum compatibility between browsers and systems.


Common font families;

Serif Fonts - Georgia, Serif.

"Platino Linotype", "Book Antiqua"...


  • If the font name is two words they must be contained with speech marks.
  • Dreamweaver lists font families.
  • Fonts can be  installed on websites, but it breaks copyrights laws as if a font is uploaded to a website it can be taken from the website, this is classed as piracy.

CSS font-face


The CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser system.

HOwever, using font-face breaches licensing and copyright laws  related to the specific font foundry.

There are many free font websites which include free license usage for @font-face kits including - font squirrel.


Font Squirrel;

Allows designers to download and install free webfonts. 



Size, Dimension, Pixel resolution


Sizes;

  • 640 x 480
  • 800 x 600
  • 1024 x 768
  • 1920 x 1080
  • 2880 x  1800 (220ppi)


File Formats;

  • PNG
  • GIF
  • PDF
  • JPEG
  • 72ppi? (Different computers have varying ppi displays)
  • RGB
  • Lossy
  • Compressed

Lossy - A file format that can be compressed. This is essential for images that are uploaded to the web.


SCAMP - Rough, hand drawn design.
Site Map - Shows the websites navigation.




DREAMWEAVER 



The opening screen.
Enables you to select your view while designing.






SIMPLE CODING;



<html> - Open html - lets the computer know what language your working in.

</html> - Close html, goes at end of coding.

<head> - Not visible on website, but helps functionality.
</head> - Close head.

<meta> - Used for search engine optimisation. Not needed for a website to work & don't need a close tag.

<title> - Not shown in design, shown at top of browser window.

FaviconSmall icon shown on browser tab.

File management is very important - All files must be stored in the same folder, named a 'root' folder. (similar to when working in InDesign)


Creating a root folder; 


  • The root folder will contain ALL the website files.
  • When naming the root folder use lower case and don't use spaces.
  • Subfolder that will contain images should be named 'images'.


Selecting root folder;

Site > New site 
name site (can use spaces, uppercase and numbers)
Select root folder - Local Site Folder.





After you have saved the site name and root folder location you can see the files at the right hand side of the program screen.





Saving work; 
  • Always leave the file extension (.html)
  • Do not save the first page (home page) as 'Home', the term must be global.
  • Term used should be 'index'




Previewing work;

To preview work click on the globe icon and select a browser.



A good way to work is to save every change you make, save it and check it works in browser.

After we finished the session we were set a small task to create three scamp style illustrations of how my website could look.

I started the task by creating some quick thumbnail sketches.





























Next, I reviewed my initial ideas and created my three scamp drawings.