Thursday, 31 October 2013

RESPONSIVE BRIEF SEMINAR

"Failure is not an option" - Fred Bates

Competition Websites:

RSA Student Design Briefs
Design Council
ISTD


Additional Information:

Look at a variety of live briefs, competition briefs and collaborations.
Document all progress, and decisions from the beginning of each brief.
A minimum of 5 (fairly substantial) briefs to submit for hand-in (Semester 1).
Other smaller live briefs can be added to this.
Anything which is done, i.e. additional work for college etc, can be added to module as a extra live brief, i.e. designing business cards.
Be realistic when picking briefs, to allow enough time for completion.
What challenges am I getting from the briefs selected? What am I learning and developing from this brief?
Use questions from module briefing to analyse the brief, and to see if it is appropriate? (shown below)

When selecting and responding to briefs you will need to consider the following:
How do you balance what you want to do, design or produce with what the brief requires?
Do the briefs offer enough breadth and scope for the development of a range of responses whila at the same time allowing you to focus your practice?
What are the realistic timescales for completing the brief? Are you working to these?
Have you clearly identified what the problem is before you start?
Where is the challenge in the brief and what will you get out of doing it?
What do you need to present and how wil you present it?

Identify as many things as possible which I want to get out of this module:
Time Management/Deadlines
Developed Skill Set
Concept & Idea Development
Exposure: Self-Promotion & Publicity
Motivation and Encouragement
Being placed outside my comfort zone
Working on live briefs or competition briefs which will allow me to use my skill set and design aesthetics
Working with restraints and limitations
Collaboration - Develop team work/skills
Building New Skills
Delivering what is required for the brief
Brief Management/Analysis and Break-Down
Understanding Realistic Time Frames
Liaising with clients - Live Briefs (Effective Professional Communication)
An Award/Prize/Fame - D&AD etc
How to not get exploited (including pay, etc)
Work on a range of briefs
Identify individual practices/interests (areas of discipline to explore)
Creative Compromise - Not all about me. Who is the client? What do THEY want?
Coherent Portfolio Building & Development (build a voice of who you are as a designer, not just reflective of style as style can be limiting within graphic design).
Contacts, Networking and Opportunities - Keeping in touch with clients, etc, a starting point for when presenting externally, gaining live briefs, opportunities, internships etc.

Why do you think live and competition briefs will be useful?
Puts you outside your comfort zone
Builds new and existing skills
Personal interpretation of a brief
Builds a portfolio
Contacts, Networking and Self-Promotion
Collaborations and individual practice
Improving Professional Design Skills
The challenge of a professional brief
Showing professional interests by taking initiative (beyond university briefs etc)
Real world benchmarking - gaging work against other peoples/other students etc
Professional Responsibilities
Meeting a Deadline - Damaging reputation, you won't get paid, no credit, no prizes etc.
Confidence in being a designer - exposure etc
Professional feedback when shortlisted. Constructive Criticism.
Professional Experience - Freelance Work, etc


Why have I chosen the 5 briefs selected?

1. Type Directors Club:

Improves my design skills within typography and will broaden my knowledge further through more research. With this brief it gives me the option to design and build my own typeface, leaving room for creativity and progression. Type is something I haven't focused much on in detail since Level 4 Design Principles, and I want to take this opportunity to do so. The deadline is Jan 14th 2014, which leaves a substantial amount of time to work on this. I also feel that designing type is out of my comfort zone within design, so this will push my boundaries even more so.

2. Poster for Hair & Beauty Salon:

I have chosen a live brief as one of the briefs selected. I am familiar with the context of the problem, the salon itself, it's aesthetic and it's staff which will be invaluable for feedback. It is very straight forward and I want to show my design 'style' through my work. The client has asked for a specific style which I am comfortable designing and working with. The deadline for this is by December 1st for their Christmas period, so this leaves me with a month to research the context further, speak to the stylists and design an A3 poster to display.

3. Communication Design:

I have chosen this brief as it allows me to enter work into many different categories within graphic design and is open to personal interpretation. With this competition brief I can enter a strong piece of work, as well improving my design skills. 

4. International Digital Art Contest 2013:

I wanted to enter a competition where I can make use of my design skills when it comes to digital art and illustration, opposed to a strict graphic design field, such as logo design. I felt this brief was different to other briefs, and appeared straight forward and easy to work on as one of the shorter briefs chosen.

5. Communication Arts Magazine Competition:

I chose this brief as I feel with the deadline being due in May 2014 I can spend a large amount of time developing a response which again is quite open to personal interpretation.

Tuesday, 29 October 2013

STUDY TASK 5 - WEB SESSION 2

In today's session we looked at further principles of designing for web. At first we looked at common and uncommon conventions of navigation systems and grids/underlying structure.

At first we gathered ourselves in groups and discussed the navigational systems of websites.

1. What are the common conventions of navigation?

1. Web Links - Underlined, Coloured Text, Symbols.
2. Navigation Bar - How you 'walk through the web page'. This is usually on the top or left of page)
3. Roll Overs - Clicking on a logo/image directing you back to the homepage/other specific page.
4. Infinite or Constant Scroll
5. Side Bars
6. Photographic Block Grid Links (PBGL - photographic links, blogs, behance etc)
7. Home Button/Logo
8. 'Bread Crumbs' - Links to articles and other sites.
9. Live Feeds - Images, Videos, News, etc
10. Drop Down Menu (Content Dependant)
11. Search Bar
12. User-Orientated Content Delivery (Content changes due to user preferences or recently viewed etc. For example, Youtube. 
13. Navigational links to social networking sites
14. Menu/Links at top and bottom of page if there is much content in between can be easier for the user to navigate.
15. Sign in/Log in Screen
16. Specific Search Options for User

2. What are the uncommon conventions of navigation? 

1. Interactive Elements
2. Random Search Button (Stumble Upon, Ted Daily etc) - the content is dependant on random navigation
3. Navigation bar on the right/bottom of page.
4. Holding Page/Landing Page - usually more relevant to moving image, loading time, internet speed - is this relevant to the target audience?
5. Infinite up-scroll
6. Google Street View Used to show the inside of a room etc specific to the website. For example, studios and schools use this to have a 'walk around view'
7. Eye Motion/3D View
8. Voice
9. Multi-Directional single page scrolling (all content in one place)
10. Dynamic Content Scrolling

I have been able to look at the navigational features of common and uncommon conventions. I found that many generic websites feature standard web systems such as search bar, navigation bar, home/logos etc. The unconventional systems of navigation were much harder to come up with. I was surprised conventions such as voice and eye motion/3d view came up and was interested to learn about new web features.

For the 2nd part of this session, individually we were deconstructed the 5 websites I chose to analyse in this session, considering the underlying grid structures.

Digital versions of these can be shown below, whilst hand rendered versions can be seen within my submission files for this specific module and brief. 


1. 'Gold' was website of the day when I researched websites of aesthetic interest. To gain an accurate understanding of the underlying grid structure, I used rulers to ensure that the grids were analysed properly. The top half of the homepage, where the navigational system is on the top right hand page shows an unconventional method used. This half of the page is split into regular horizontal lines. On the latter half, the horizontal lines double in size between each one. There are also common features of web design and navigation such as social networking links and logo, as well as interactive, responsive layout.


2. Grid London, use a minimal grid structure throughout. The only use of grid structure is with the drop-down navigation bar at the top. This drops-down when the logo is 'touched' with a cursor. 


 3a. Offset Festival is a Graphic Design related festival which targets young professionals and students. The image shown above shows two parts of their homepage which is a continuous scrolling screen therefore features different grids. There is no navigation system at the top of the screen, each different part of the website fits in live blocks on the page showing imagery and information using rollovers on images as shown above (mid-right). This is an unconventional feature which allows the user to have more interactivity. This grid is different to the previous 2 shown in terms of grid structure. 


3b. The image above shows the third part of Offsets website. It shows different news related articles, which are made up of a repetitive grid structure. The whole website is very linear, clean and makes use of block images and blog/portfolio style layouts/aesthetics.


4. Let's Go Rally, is a highly responsive and interactive website. The website is spread across 3 pages, which are accessed via the arrows on either side of the headline. (All pages are shown one after the other above). At the top of the screen is a navigation bar, but below is a headline, which features the same grid structure for each page. This is a 4x13 grid, which below sits imagery and body copy which also follows this grid.



5. Bitique is an online design blog/portfolio which follows a 10x10 landscape grid structure. The website follows a block structure which is stringently adhered too.

Each layout and grid structure which has been looked at has been entirely different to one another, however each different layout and grid follows its own rules and conventions, many of which are rather unconventional for web design.

For the 3rd part of the session we were asked to begin to look more into our own navigation maps/flow diagram, working out a basic structure for our own websites.

An image of my navigational map is shown below:


From this, I would like to build and develop ideas for each page showing the grid structure and how the content and navigation system would fit a design. I also would like to research into more detail aesthetic and interactive/responsive features which I could use.

Saturday, 26 October 2013

DESIGN DEVELOPMENT: TYPE FOR PRINT BOOKLET


I started to develop design ideas for the layout of the booklet regarding typography and print. Once I had drawn out a layout which is aesthetically pleasing to females, decided stock and typography I began to place design elements together using InDesign.

Details:
- A6 Portrait Format
- Staple-Bind
- Coral Pink, Black and White Paper Stock (90 gsm)
- Black Type
- Foiling Details
- Interactive Elements for Reader

Once I had set up the InDesign document to the correct dimensions, format and ensured that the colour mode was set for CMYK, I was ready to begin designing.



I decided to use a 10x10 grid throughout to achieve a versatile layout, to my design ideas can be applied. The font used for the headlines is Abril Fatface in 12pt. I feel the rounded serif typeface is fitting in with femininity, which was suggested in the survey that was carried out. The contents list has been written in Baskerville, Regular, 8pt. This typeface was also suggested throughout the survey, and comes across more feminine than other serif fonts I looked at in consideration.  




On the left-hand side is a short introduction to type. I split the type into 3 columns to give modernity, simplicity and room for other design elements or interactive features. On the right hand side is the first chapter of the booklet, explaining colour contrast in the simplest of manners. The stock will be coral pink, the cyan rectangle would represent a die-cut showing white stock behind, and the black represents a die-cut with black stock behind. Opposed to printing contrasts I thought this was a more interactive approach to explaining the idea, especially with black and white. The shapes chosen are subject to change.


Cyan = White Stock, showing contrast with black. Shown through a die-cut.



Black stock/printed behind the white page, showing total contrast between black and white.

Below shoes the typographic colour section. In between this page and the next will be an insert of different colour type printed on white stock as an additional reference to readability and legibility.


Following the same framework and layout structure, font size and point size were placed onto one page, to add design elements to the page and to fill some of the void white space.


Facts and figures are shown in their simplest form to relate to the target audience, and to keep in line with the correct tone of voice.





Close-up view of different ways of aligning and justifying text. I wanted to show this rather than just simply giving an explanation for the reader to decode.






Further details shown to help clarify and explain to the user what is being read with a visual reference. 


Friday, 25 October 2013

TYPOGRAPHY CONSIDERATIONS

Once my survey results were analysed, I decided to initially start designing a simple logo which can be screen printed onto stock as an experimental piece, whilst also developing my skills further, and considering which fonts and type styles should be used throughout the info-pack.

The types of font shown, were chosen though the results of the online survey. Below are examples of scripted, serif, italic, rounded, thin/delicate, handwritten and brush fonts.





Mid-Design Decision Crit:

After a crit with Joe Harrison, Leo Simms and Bethany Dalzell, whilst taking into account the primary research received. I discussed using Detail Beta Regular with the headline "Print For Girls' as the general consensus was to use a handwritten or brush font. After discussion of which alternative, more feminine fonts could be used, it was decided not to use this font for the headline. This was due to the processes I wanted to use such as heat foiling, which wouldn't work well with the typeface chosen.

Collectively it was decided also to stick with 'print for girls' opposed to 'print like a girl' or 'how to print like a girl' which could of caused confusion with the audience, tone and meaning of the info pack. This forms a stronger basis for the concept, idea and typefaces used.

Baskerville and Baskerville Italic were chosen for body copy, sticking to a serif font as suggested through research also. I find the italic typeface very elegant, feminine and cursive.

I also chose to use Abril Fatface Regular for headers and headlines. This is a cursive and rounded font, and a similar font was suggested through my research results. 

I am happy with the 2 typefaces chosen as I felt these were feminine, smart and sleek, whilst also being formal. These fonts can also be used with many print processes and finishing processes such as foiling, screen printing and spot vanish which I couldn't of achieved with a brush script such as Detail Beta Regular.

TYPE, COLOUR AND STOCK CHOICES

Type Choices:


Above are the three typefaces chosen to use throughout the info pack. I have chosen Abril Fatface Regular due to it's cursiveness and femininity due to similarity in the body shape. My primary research results also pointed in the direction of serif fonts, or cursive fonts being considered such fonts. However, due to the boldness and classic style of both typefaces chosen I feel as though they appeal to both sexes. Baskerville was chosen due to a suggestion through primary research. I decided on this font after looking at around 20-30 other serifs. I particularly liked the cursiveness of the italicised font, which will be used as sub headers.

Colour and Stock:

Initially I have chosen a colour scheme of black, white and gold, with additional coloured stocks, such as lilac and grey. This is to add colour as well as be different. Gold is to be achieved via foiling methods. I want the colours to resemble current design, with a modern, classy tone with the introduction of gold, as well as being subtly feminine. I also decided not to include pink as one of the main colours as I didn't want to be overly stereotypical with the design. 

FINAL CONCEPT BOARDS

Below are the concept boards produced for the print info-pack brief. They address target audience, and explain in what way they will be informed. 




Thursday, 24 October 2013

PRIMARY RESEARCH: RESULT ANALYSIS

The survey was constructed using Survey Monkey and can be seen here

The survey was sent around both Leeds College of Art campus', to all Graphic Design students, including Foundation courses. In total I received 103 responses. 

The complete results of the survey can be seen below, and in my previous blog post. Using the data I will summarise my findings, and hopefully this will lead to a strong consensus from the responders, giving my brief and audience even more focus and consideration.  


1. Age:

The main respondents were aged between 16 and 23 years old. 

This fits in with the range I would like to target my info-pack at. 

2. Do you ever buy a book/publication because it looks aesthetically feminine?

63.3% of all respondents regardless of age, stated that they buy books and other such publications due to it's aesthetics being feminine. 

3. Do you own a print book?

56.1% of all respondents regardless of age stated that they do not own a print book.

I feel that their is a gap in the market for a print book, directed at a female audience. With 56.1% of respondents not owning a print book, I feel this is another positive which has come out of the survey.

4. Would you buy a print book aimed at a female audience?

39.4% of respondents stated that they would buy a print book aimed at females, whilst 34.3% stated that they weren't sure. 

5. What colours remind you of femininity?

The main colours which stand out dramatically in results are:

Pink - 70
Purple/Lilac - 38
Pastels - 34

I expected the responses shown above due to trends, fashion, editorial magazines and stereotypical colours. These were soon followed by:

Yellow/Lemon - 14
Red - 13
White - 13

Metallics:

Gold - 5
Silver - 6

6. What typography reminds you of femininity?

Once again the results were conclusive with strong findings. The results were again stereotypical, yet similar to the type shown in my secondary research on feminine graphic design.

Handwritten/Brush - 17
Cursive - 15
Serif - 10
Script - 9 
Italic - 7
Thin/Delicate - 6

7. What print finishes remind you of femininity?

56.1% stated that Embossing is a feminine print finish, whilst with 45.1% Foiling is also showing signs of being highly 'girly'. Screen Printing reminds 34.1% of the respondents of feminine graphic design.

I will use these findings for my info-pack, processes and inductions to gain more in depth knowledge.

8. Would you be interested in a print guide for a female audience?

35.4% of responses stated that they would be interested in a info-pack aimed at females. 

Overall, I think the survey proves conclusive that the concept, idea and target audience I want to aim my info-pack could be successful if designed and constructed correctly. To help keep appeal to my target audience, I will focus design and further idea development around these results as well as my secondary research. This can be found on my Design Context Blog.

9. How much would you want to spend on a print book?

With 73% of respondents stating they would spend 5-10 pounds on a print book, my original considered price of 25 pounds per pack wouldn't be achievable. I will re consider stock choices and processes to be used for the info-pack to ensure costs are kept down.

PRIMARY RESEARCH: SURVEY RESULTS

1. Age:
16 3
17 5
18 24
19 25
20 18
21 10
22 3
23 2
24 1
26 1
28 1
37 1
43 2
56 1
2. Do you ever buy a book/publication because it looks aesthetically feminine?
Yes 63.30%
No 38.80%
3. Do you own a print book?
Yes 46.90%
No 56.10%

4. Would you buy a print book, aimed at a female audience?
Yes 39.40%
No 28.30%
Unsure 34.30%


5. What colours remind you if femininity?
Pink 70
Purple/Lilac 38
Yellow/Lemon 14
Pastels 34
Silver 6
White 13
Red 13
Light Tints 1
Gold 5
Light Blue 9
Neutral, Cream, Beige 6
Cyan 2
Any Colour 1
Orange 3
Light Green 1
Chocolate 1
Magenta 1
Peach 1
Turquoise 2
Grey 1
Black 1
Plum/Maroon 1

6. What typography reminds you of femininity?
Cursive 15
Angry 1
Serif 10
Script 9
Handwritten/Brush 17
Italic 7
Calligraphy 5
Elegant 1
Decorative 5
Delicate/Thin 6
Block 1
Floral/Flourish 5
Rounded 5

7. What print finishes remind you of femininity?
Screen Print 34.10%
Lino 11%
Foil 45.10%
Emboss 56.10%
Deboss 18.30%
Laser Cut 29.30%
Die-Cut 24.40%
Paper Print 28%
Lithography 15.90%
Etching 20.70%
Heatpress 20.70%
Woodblock 8.50%
8. Would you be interested in a print guide for a female audience?
Yes 35.40%
No 28.30%
Unsure 28.40%
9. How much would you be willing to spend on a print book?
5-10 Pounds 73.40%
11-20 Pounds 30.90%
21-30 Pounds 5.30%

Wednesday, 23 October 2013

WEBSITES SELECTED FOR WEB WORKSHOP

The following 5 images have been taken from my design context blog (further comments and analysis can be found there also). As requested in session they have been printed off in A3 scale in order to analyse and de-construct in session.

I really like the simplicity and type used throughout this website. Minimal responsive design.

Responsive, minimal and sleek website.

Modern, smart, geometric and type based website. Responsive and fits in one desktop screen.

Website for graphic design festival Offset in Dublin. Interactive and well designed with good use of type and image.

Smart, clean and well designed website for Grid, London. Interactive rollovers for homepage menu.

DESIGN FOR WEB: SCAMPS OF HOMEPAGE

Following this weeks workshops and web sessions, I have drawn out three scamps of homepage ideas for my websites. These are required for the next web session as we will start to build elements of the website, giving a design to work from.

Aesthetically I wanted to keep it clean, simple and typographic whilst featuring all information under 4-6 links.

The home pages and consequent web maps are shown below: