Designing a food magazine

Front and back covers.png
Final front and back covers

In my free time over the summer, I decided to design a cover and a selection of inside pages for a magazine based around food containing recipes and articles about food. The photographs that I have used have not been taken by myself.

I began by compiling research of existing magazines and analysed some spreads which you can find in my previous blog post.

IMG_4197.JPG

I started planning out my spreads in my sketchbook by drawing out the layouts and analysing my decisions which can be seen above.

Grids

Screen Shot 2017-09-09 at 16.48.41

I set up my document and decided to size the magazine as A4 as I believed that this would help to ensure that there would be a reasonable amount of content on each page with the ability to add whitespace to allow the content to breathe. I felt that making the magazine smaller could mean an increase in the thickness of the print. It could be more efficient by reducing materials, saving cost and paper.

I set the grid with 9 columns with a gutter of 4.233mm. Using an odd number of columns would allow for more flexibility in column widths for text and image and helps with using varying sizes. This also allowed different measurements either side for the surrounding whitespace. Therefore, this would create more of a dynamic look on the spread.

I wanted to create column widths that would contain an optimum amount of characters per line so I often make text fit along 3 columns which then created approximately 40 characters per line. Therefore, there weren’t too many characters that the eye gets bored or lost and not too short that the eye gets tired of moving back and forwards.

Colour Scheme

Colour scheme mag-01

As I was designing the magazine to be the October issue of the magazine, I felt that it would be fitting and seasonal to use browns, oranges and yellows. Using a colour scheme throughout created consistency however, I think that it was important to add variation to the pages in order to create elements of surprise as each page could become repetitive and boring.

Typography

Type choice-01

I chose a variety of different typefaces to be used exclusively for certain features of the magazine to act as markers to signify what type of content the reader has arrived at. I set each of my text elements as paragraph styles in order to allow for easy alterations to rules such as body text or headings.

For my body text, I chose Constantia sized at 10pt with a leading of 12pt. I picked a serif font for the body when displaying an article as many believe serif fonts to be more readable at smaller sizes. Traditionally, newspapers and other forms of print would use serifs which have therefore carried forward an association of higher prestige and status. When delivering an article, this could therefore come across as more trustworthy to the reading and subsequently might be more likely to encourage interaction.

I decided to use a sans serif typeface FS Albert when showcasing recipes as using sans serif could possibly allow the recipes to come across as more modern and the sort of recipes displayed come across as contemporary that encourage a relaxed approach and are based around having fun. By creating this distinction, it forms a marker for the reader to easily identify the content.

Headings for recipes follow the sans serif style and are bold and fun to reflect an outgoing and confident persona. The rounded edges to the type create associations of friendliness and comfort which could help to build trust and rapport with the reader. Within the type setting on the recipe headings, I decided to individually kern the letters as some letters seemed very close together. In the instances where there were 2 straight edges next to each other, more space needed to be added in comparison to a straight and curved letter which would need less spacing as curved letters naturally create more space between. This comparison can be seen below.

Screen Shot 2017-09-09 at 17.29.04
Straight letters = less space naturally in between
Screen Shot 2017-09-09 at 17.29.18
Curved letters/ natural gaps inbetween mean less kerning is required

For article headings, I chose Constantia and HaloHandletter in order to again distinguish between recipes and articles. I felt that adding a combination added more personality and the handwritten type created a homemade and relaxed feel which could help to encourage the reader to connect with the author. The use of colour on the handwritten elements was chosen to match the colour palette of the photograph on the spread to create visual cohesion and balance.

Style

Within the magazine, there are repeated components in order to create a recognisable style and to tie content together to feel professional and thoughtfully considered.

Screen Shot 2017-09-09 at 17.31.17
Rectangle styling

One key feature which is added throughout frequently, is the use of the thin rectangles used as framing on top of images or overlapped to create depth and dimension. Using this was able to add an element of detail to give a higher quality and delicate touch. It is able to add a subtle burst of colour and can be paired with colours within the photography to greater enhance the colour scheme.

Framing the content, shown in the example below, encourages the readers eye to be drawn inwards which allows the focus to be placed on the content and prevents the readers eye from getting distracted.

Screen Shot 2017-09-09 at 17.32.28.png
How the rectangle is used to frame the content

Below are the final layouts for the magazine front and back cover and inside spreads:

Food Magazine_Page_01

Photorealistic Magazine MockUpContents page mock upTips page mock upPerfect burger mcok up

39

Hosting mock upCupcakes mock upChorizo mock upSalad mock up

Analysing how food magazines convey content

One of the areas of Graphic Design that I particularly enjoy is Editorial Design as I like using grids and structure to position text and image and am specifically interested in how as a designer you are able to create/ improve someone’s reading experience and make information more engaging to interact with or easier to take in and remember.

I decided to design a cover and a selection of inside pages for a magazine based around food containing recipes and articles about food as a project in my free time. This work will be displayed in my next blog post.

IMG_4189
“Olive” magazine cover

To start my process, I began exploring how existing food magazines and recipe books layout their content to convey information. I wanted to see the relationship between text and image and the balance between these elements.

IMG_4187
Magazine spread analysis
IMG_4188
Magazine spread analysis

I analysed “Olive” magazine and looked at the ways that they had combined the use of text and image. Often, on many of the recipe pages it featured a large image which can be commonly found among print with the theme of food as food is a very visual thing which is very appetising and appealing to our eye. Using a high intensity of photography or imagery of food can be very persuasive in getting people to try recipes or to be more excited or interested in reading a passage of text if it is linked with the image.

IMG_4190
Wrapping text around the shapes in photography

On many of the recipe pages, the designer had made the photography fill the full spread where the photographer had captured the dishes with the tableware. The designer had utilised these rounded shapes of the plates and bowls and the straight edges of trays and napkins and organised the type to fit around and be obstructed by the shapes. This created a more playful feel to the page and accentuates the shaping and imagery on the spread. The round shapes create discontinuity on the pages which is different to the straight columns of text. This allows the piece to become more “friendly” looking and is unexpected and exciting.

IMG_4191
Using three columns for sections of text

The magazine often makes use of three columns of text which creates consistency and adds to its visual language. Columns are sometimes reinforced by the use of images above which creates a neat and structured layout to look professional and be easy to follow. Splitting text up into sections breaks up the content into manageable bites of information which are more likely to be remembered and also more likely to be read. It makes the text less overwhelming.

(Above) shows how titles are in decorative typefaces

Headings are often style with handmade or decorative type which is representative of the theme of home cooked food and becomes creative and fun. This would encourage the eye to be drawn to the title which is important as you would want the title to stand out as it is at the top of the hierarchy. This is what could entice the reader to continue searching through the other content on the page.

Folios were on the edges of the page which create a more dynamic layout to encourage the reader to turn the page and progress through the book.

The written structure of the text is organised in the same way which makes the content easy to follow. Making the reading experience easier for the user is the key aim for editorial design as helping the reader take in the content will make them more likely to want to interact with the book. Today, when people interact with information, there is a limited amount of time to communicate to your audience so content needs to be engaging and seem worthwhile. Therefore, it is very important to consider how your content is displayed as well as the content itself.

IMG_4196
Spread to analyse (use of vibrant yellow)

On this particular spread, the designer has made use of bright yellow which is able to add vibrancy to make the page fun and engaging. Yellow arrows are added which direct the eye towards content and also highlights which pieces of text relate to certain images. Headings use outlined text which is less impactful than if the designer had used solid black. There is already lots of impact from the yellow so the solid black may have been too strong and therefore have created too much confusion. The images are placed up to the bleed which spreads out the content and keeps the page looking less condensed as there is quite a bit of content on the spread. The images use a similar colour scheme of red/ orange/ brown to remain balanced. It is more cohesive and relaxing on the eye as it does not confuse the reader with too many things going on in one place.

Vogue Magazine Analysis

60816

Vogue is one of the most widely known magazines established in America first as a weekly publication, with content based around the topics of: fashion, beauty, culture, living, and runway. It has since become a monthly publication and has expanded out internationally to create 22 editions. The name Vogue translates as “style” in French. The magazine was described by book critic Caroline Weber in the December 2006 publication of The New York Times as “the world’s most influential fashion magazine”.

24womens-web-vogue-slide-S30S-jumbo

The first edition of Vogue began in 1892, founded by an American business man called Arthur Baldwin Turnure. The initial pricing for the magazine was set at 10 cents, targeted at the upper class in New York. It aimed to “celebrate the ceremonial side of life”, recording and spreading how the upper class lived in terms of their fashion, leisure, activities, social gatherings and places they had visited. Similar to today’s magazines, it aimed to encourage people to look up to their way of life, create trends and influence how people lived their lives. Magazines encourage readers/ potential readers to want to become part of this exclusive circle which is today becoming broader to make those in a lower class follow and try and copy celebrity culture.

Until the magazine was taken over by Conde Naste Publishers in 1909, the magazine had been targeted towards both upper class men and women. The content was then becoming more focused on the female reader; the content was increased as was the price. Until then, the magazine had been about etiquette and reviews of books, plays and music as a social publication. After this transition, content became more focused on fashion and lifestyle.

In the initial publications of the magazine, illustration was widely used on their covers which then changed in 1932 when the first colour photograph was used taken by Edward Steichen.

In July 1988, Vogue acquired a new editor; Anna Wintour who aimed to refresh the magazine to become more “approachable and younger”. She became the pioneer for the new era of the magazine and still holds the position of Vogue editor today. The magazine became more about what the masses could afford. Before she had become editor, the magazine had been criticized for being boring and was described as “beige”. During this time, one of the magazines competitors today “Elle” was becoming more popular and Vogue had begun to lose out some of their business. This would have undoubtedly encouraged a “shake-up” in their design to combat this.

Screen Shot 2017-09-03 at 20.03.08
Vogue Website
iphone image2
Vogue App

The influence of today’s technology has meant the Vogue has expanded their content into digital formats in the form of a website and an app. The app has new content every day and people can choose to receive content recommended just for their taste. This ensures that readers find what they are looking for and are actually interested in making the experience easier and more readily available for being on the go as lifestyles become more fast paced and information delivery becomes more fast paced. Trends and content can become old news very quickly, so therefore having the ability to post quickly is a great advantage.

405
Vogue September 2017 Issue

I have been exploring the September 2017 Edition of the Vogue magazine, analyzing the layout, content and design features. I think that it is interesting to see how particular content is laid out to focus your eye towards certain information/ content and what influence certain layouts have on how the reader interacts with the material.

Vogue uses serif fonts for titles, headings, body text and captions which look traditional, decorative and stylish which matches the magazines history and topics that it covers. In terms of readability, serif font has often been considered to be more readable than sans-serif fonts. Serif typefaces are also said to increase reading speed of long passages of text because they help the eye travel across a line. This is especially true if lines are long or have relatively open word spacing which vogue uses with its justified type for paragraphs of body text. However, there are also a wide range of different typefaces used within the magazine due to the extensive addition of adverts using the typeface of the brand so therefore typographic use is varied throughout the pages.

IMG_4162

Justified text creates straight, neat lines along the edges of a passage of text. To justify your text you add white space be­tween the words in each line so that all the lines are of equal length. Justifying text helps to guide the readers eye down the page to encourage them to carry on reading. Creating this neat and sharp lines also creates a traditional look and implies impressions of status or prestige meaning readers gain trust and view the content as professional and reliable.

IMG_4163.JPG

From looking at the ratio of text to image on the spreads, I found that there is more of a focus on photography and the magazine is mainly visual, often because of the high frequency of advertising of fashion brands. Use of images is often large/ full page which forms a striking and bold visual to grab the readers’ attention. Some spreads also make use of a border of whitespace around the image which helps to direct the eye inwards. Using this bordering also helps to create statement which is best used when the image uses a dark colour scheme to contrast against the white background.

Variation of layout for the images is very important in ensuring that the reader does not get bored or tired. Creating different organisations for pages keep the reader guessing and adds an element of surprise to keep them turning the page.

Many of the pages used central alignment, particularly then using the white border for smaller images which is a traditional style and creates a focal point of one page of the spread. However, on some of the adverts, the images are aligned further to the left or right with a vertical block of white space usually implementing the brand name in the corner of the page which become more dynamic and encourages the reader to turn the page.

When there is a larger passage of text to read, a drop cap is often placed at the beginning which helps to direct the readers eye to begin their reading journey. This use of hierarchy highlights to the reader that it is an important section to read (the main text). Vogue continuously use a lower case for their “drop cap” which is slightly less impactful then an upper case and also creates a trademark feature recognisable as their magazine.

On pages where there is both text and image the content is usually split up into 3 vertical sections which provides order and continuity so the reader finds the reading experience easy to follow and repeat. Having these smaller column widths is able to make the reading feel inviting and less overwhelming. The grid seems as if it would have 7 columns to align content. It is said that using odd numbers “creates visual interest.  An odd number of details is more effective at capturing your gaze. Odd numbers force your eyes to move around so you are therefore more likely to remember things.

Analysis

IMG_4161

In this spread, the designer has made use of a large photograph using black, greys and green creating a neat rectangle in the centre of the left page. Having this one image helps not to distract our attention away and to be bold and striking to gain that attention easily as the focal point of the spread. The use of white space as a border round the image helps to draw the eye inwards and helps to surround the content as being related and grouped. The use of whitespace in the right corner and surrounding the spread helps to create breathing space to allow the reader to intake the information easily and to not feel overwhelmed by content. The body text has again been split into 3 small manageable columns which mean that the reader might be more likely to read the passages. There is a clear hierarchy between the text components on the page as the heading is made very large to introduce the piece with an italicised description of the passage to allow the reader to decide if it is something they are interested in. The body text is then justified to draw the eye downwards for easy reading experience and a column width containing about 40 characters. Optimum column widths for magazines is often found to be between 38 and 45 characters as too short and the readers could get tired from keep having to move back and forth and too long and it can be more difficult to follow and readers can get lost when moving onto the next line. Therefore, this column width should be more relaxing and easier on the eye.

IMG_4160

This spread is an example of one that has lots of content with a combination of text and image which work together to create a cohesive piece. Firstly, the use of the overlapping images on the left page create dimension and depth. The use of the dark textured pattern against the light sky on the photograph creates great contrast to be striking and emphasise the sharp, neat edges which looks clean and professional. Text and image are lined up to create structure and order to be easily followed and provide a clear journey for the eye to explore the content. The white boxes over the photograph on the right page creates an element of interest and is unexpected. Its high contrast allows it to stand out and this also allows it to be obvious what the text is referring to by its proximity to the image and the cues that point to specific areas of the image. The designer has also separated the content through the use of a dotted line embellished with a plane icon which draws the readers eye back left to the next paragraph of text and is also hinting about the theme of the next section. Although there is quite a bit of content on the page, it is easy to navigate through the alignment of text and image as well as the visual cues which are able to direct the eye through the spread.

The Rise of Logo Systems

MTV.png

Recently, in my Second year study of Graphic Design, we were required to investigate a topic related to a field within design. I explored a range of topics that I found interesting but decided to progress with the emerging approach to logo design called “Logo Systems”.

In Graphic Design, logos and brand identity have been an integral feature for communication between producer and consumer. Logos also play an important role in the buyers’ decision process. Logos and brands continue to be a central part of our everyday interactions due to the rise of digital culture. The new strategy Logo systems, has been described by Evan Brown as “one of the most interesting developments in logo design so far.” (Brown, 2016).

Logo System: a logo system acts as a ‘graphical framework’ that can shift and change for different situations, allowing brands to start a conversation beyond it’s own name, pointing to other ideas and issues that are important to them on any chosen day.

Previously, logos had been something “static” which remains the same throughout all mediums of use to ensure a recognisable brand to create consistency to build companies/ organisations as familiar providers and trustworthy.

Logos and branding have been in use for thousands of years, such as in Ancient Egyptian times in livestock branding. Branding is a concept that we have adopted most commonly today in a commercial context, however, branding can be seen as an identification process. As humans, we use semiotics when identifying logos and have continued to do so throughout their development. “Symbols are highly subjective and dependent upon cultural reference.” (Redding, 2010) We make sense of symbols by using the context that they are in to further our understanding.

Design historians and theorists Ellen Lupton and J. Abbott Miller (Klein 2009), stated that “logos were tailored to evoke familiarity and folksiness in an effort to counteract the new and unsettling anonymity of packaged goods”. Adding logos acted as a mark of quality, therefore helping to build trust between producer and consumer.

Now, with the development and widespread use of digital technology, brands put more focus on promoting themselves through these digital platforms such as: social media, websites, smartphone applications. With an increasing ability to reach a broader audience, there becomes a need to target themselves to different groups of individuals. Having a digital channel gives brands the ability to use flexible identities as these can be easily changed to fit different platforms as updates can be made cheaply, quickly and easily.

In our culture, we are exposed to a vast number of logos being showcased in a variety of different channels such as social media, websites and apps, that we interact with in our everyday life. The expansion of our digital culture, in terms of the frequent use of smartphones and social media, has meant that as individuals, we are bombarded with logos, brands and advertising. The high density of logos makes it challenging for individuals to sift through to find content which interests them or has relevance to their lifestyle needs. For this reason, brands aim to simplify their visuals for fast recognition and tailor their messages to sell their brand ethos and how they can add value to your lifestyle. (Naomi Klein, 2009) says that “it is not to sponsor culture but to be the culture”. If brands sell themselves as “attitudes, values and experiences” then consumers can buy into the belief that they are part of an exclusive group or culture.

There are many examples of brands that have taken on this trend and development to logo design and see it as a very powerful and valuable approach to logo design which allows brands to set themselves apart from their competitors and allow themselves to be particularly present online.

dc-comics-logos

DC Comics used logo systems to apply to different storytelling. Each logo is designed with a particular character in mind. This helps them to relate to what they provide.

google-doodles

Google use differing illustrations, graphics for different days which are altered in different locations around the world. They use this to raise awareness for historical events. These act to unify people as they can be celebrations which a large group of the population takes part in or have some knowledge about. Sometimes these can be interactive as games. Google is so well known and established around the world that they can afford to use many different styles and be more adventurous while still maintaining an identity that is recognisable to its users.

zocdoc-logo

Zocdoc is a health company that cleverly uses different slight variations which are each very similar to each other showing different facial expressions. These changes are minimal so it is very easy to recognise that they are still part of the same brand.

Logo Systems can be effectively used for digital forms due to their ability to be changed easily and implemented on different channels, being changed slightly for different purposes and audiences. They can be used effectively for contextualising and connecting the logo to different concepts. However, they are not always appropriate for all brands to use as it requires them to be well recognised, consistent, able to be transformed into different variations easily while still being recognisable as a single brand. Most importantly, the brand would need to be active on social media channels and other digital media. (Brown, 2016)

References:

Brown, E. (2016) Logo systems: Here’s why static logos are dead! Available at: https://www.designmantic.com/blog/logo-systems-static-logos-are-dead/

Klein, N. and NAOMI, K. (2009) No logo: No space, no choice, no jobs. London: HarperCollins Publishers

Paget, I. (2017). Logo systems: the future of logo design?. [online] Creative Bloq. Available at: http://www.creativebloq.com/branding/logo-systems-future-logo-design-41619864

Redding, D. (2010) The evolution of the logo – smashing magazine. Available at: https://www.smashingmagazine.com/2010/07/the-evolution-of-the-logo/

Learning HTML & CSS

One assignment during my Second year of Graphic Design study, we were required to code our own portfolio websites using HTML and CSS. Previously, I had completed a bit of training on using HTML and CSS during my summer Internship at Toast Design in 2016.

I had used Code Academy which has a number of lessons and exercises to complete which helps you to learn how to construct the code for a webpage and how to use tags. It gives you a summary of all the key information at the end of each section which I found very helpful for developing my understanding.

screen-shot-2017-01-17-at-10-34-35screen-shot-2017-01-17-at-10-35-12screen-shot-2017-01-17-at-10-35-40

To visit the Code Academy website follow this link:

https://www.codecademy.com/

This summer, I have been attempting to develop my skills in HTML and CSS further.I began reading “HTML and CSS – Design and Build Websites” written by Jon Duckett which helped me to understand the tags and different ways of adding features to a website. It was really easy to follow and understand so I was able to apply things that I had learnt and progress through the book comfortably.

I decided that I wanted to make my website responsive so that it would format to the correct dimensions for the particular screen size it was displaying onto. To apply this, I looked at the session on Code Academy which took you through step by step how you can make text and image proportional.

The main thing I took away from this lesson, was to use em’s and rem’s for text sizing and percentages for images/ media.

Learning from a Graphic Design Internship

IMG_3771IMG_3773IMG_3770IMG_3774

Over this summer, I have been interning at a design agency called Toast Design for a few weeks. During my time here, I have been working on a number of different tasks including:

  • Layouts for documents – converting documents to agency branding style
  • Website concept designs
  • Creating logo mood boards for client
  • Designing logo concepts – sketching and on Illustrator
  • Designing website banners for a range of clients (Call-to-actions)

At Toast Design, I have been working on a variety of different projects, some based on web design and others print based. Over the last year, I have been developing my skills in HTML and CSS through designing and coding my own portfolio website and am enjoying learning a new skill which I believe to be valuable as a Graphic Designer. I think that it is important to try out lots of different branches of Graphic Design as there are so many different aspects and types of project that you could work on and it is so exciting to be able to work on different projects in your day to day job.

I have been working in the web section of the agency and completed designs for banners to go on their clients sites. This helped me with ensuring that styling is relevant and suitable for the existing branding of the company in order to be consistent.

I have also been designing website concepts to be sent off to the client for approval/ choice of their favourite to progress with. I really enjoyed coming up with different variations using the companies styling and colour systems. The client fed back their favourite and one of my design concepts was chosen to progress with.

One of my favourite areas of Graphic Design is layout and Editorial design. I was able to put these skills into practice during my internship when I was given a number of documents to convert into the Toast Design styling to be provided to their clients. I enjoyed being able to take content and replace and experiment with different layouts to be visually interesting and engaging to read.

Overall, during this experience, I have learnt more about the process of a project and the different stages in terms of feeding back progress to the client. When getting an idea for what style of logo or similar design a client is looking for, I saw how you create a collection of between 30-40 inspiration images to show to the client. Giving them a wide choice allows you to get a better idea of their initial “vision” for their design. Then you are able to narrow down and design something that the client is looking for.

I think that working on projects based around websites has given me more of an interest in web design and encourages me to work harder to progress my skills and understanding in this area.

Building a Portfolio Website

When looking at how other people have laid out their portfolio websites, I saw that lots of the ones that I liked and thought were most effective were the simplistic clean designs that put the focus on the work on the website rather than distracting the user with lots of colour and features. Therefore, I would like to look at creating a website design that is simple, clean looking to reflect the type of design that I like.

In terms of colour schemes, I think that using dark greys and white would work best as it would match with any colour that it is paired with and would work for showing different projects all on one page as otherwise, having too much colour could make the website look cluttered and unprofessional. The design of the website will also create an impression of your design skills as well as the projects that you wish to share so what you are conveying with your web design should also be well considered.

screen-shot-2017-01-18-at-22-01-29

For inspiration I looked at Salad’s website, who I visited earlier in the academic year to receive an industry brief. I was particularly looking at how they have organised their “work” section. I like how they have organised their projects into different sections such as “Branding” which allows their audience to narrow down their search and find content that is relevant to them.

They then describe the problem, their solution, how they did it and the impact on their clients business. This is very informative for the audience and shows a good structure. This gives a good impression to their potential clients who might be considering using them and shows that they are methodical and seem enjoyable to work with.

This style of showing the work would be an effective one to take inspiration from for my own portfolio website as it shows organisation and structure while also being very detailed and informing your audience of all the details they need to know.

Development

I started by drawing out layout plans for my pages in order to organise my content and decide on some of the features of each of the screens e.g. homepage.

I liked the use of a 3 column grid and preferred using different sized boxes to create variation so that the layout was less structured and repetitive as this could look more boring.

layouts-11layouts-21

I then began to plan how I would display my project descriptions below my main image. I wanted to separate the information into sections and create a clear hierarchy, using features like weight, colour and layout to make certain information stand out. I wanted to ensure that each of my pages followed the same structure to be clear and consistent. Therefore, the website user would be more likely to be able to navigate the information and locate the content they are searching for.

screen-shot-2017-01-29-at-20-42-22

I ensured that I measured out the dimensions in order to save my artwork the correct size and to fit neatly on the page.

about-dimensions

I organised the layout so that the project would always begin with a large image which shows the final solution from the project and match this with my thumbnails on my homepage to create consistency between each navigation point. Using a large image would create a focal point and draw attention to the content higher up in the hierarchy.

screen-shot-2017-01-27-at-09-46-37

I began by adding project titles and descriptions below my thumbnails to give the user an insight into the project before they click into it to ensure that it is something they are interested in viewing. However, I felt that this could be more interactive and engaging through the use of rollover buttons which would provide the content only when the user requires/ wants to view it.

first-project-page

I added rollover images to my thumbnails with a title and short description to be to the point and quick to digest keeping the image behind to link text with the visual outcome.

screen-shot-2017-01-29-at-21-22-33

I then organised and spaced out each of my thumbnail images and used different shapes to create a more dynamic selection. Making use of the three column grid was able to give some structure and order to give the website a professional and neat feel.

screen-shot-2017-02-02-at-16-02-21

screen-shot-2017-01-31-at-20-43-20first-clean-streets-page

I began by implementing my content into a template just using a simple organisation with title-image-description, however, I wanted to reorganise this to bring the text together and make the image the first thing to view.

screen-shot-2017-02-01-at-10-38-00

I adjusted my text layout into separate columns and split up the different sections of text to be easily found and clear to read.

Final Website Screenshots

Screen Shot 2017-07-26 at 21.42.18.png

screen-shot-2017-01-29-at-20-56-24

I decided to make use of one main colour on my website which follows my personal branding in order to create consistency between different elements of my work. I believed that the red/pink would stand out and be bold to grab attention. I then paired this with greys and white as I didn’t want to overload the site with too many components or too much colour as I would want the focus to be placed on the work.

Screen Shot 2017-06-26 at 16.14.57.png

Within my about page, I chose to add some details from my personal branding scheme to add more colour and personality to a black and white image.

I would like to develop my website further by making it responsive, adding film features to be more interactive and engaging and to also continue developing my knowledge of HTML and CSS by reading up and putting more coding into practice.

I believe that as a Graphic Designer it is important to be well rounded/ multi skilled and try out many different types of design practices (e.g. film, editorial, branding etc.) to apply different approaches to your design process and learn new ways to tackle problems in order to find a solution in a creative way. I believe that learning to code is a valuable skill as a Graphic Designer and I hope to continue putting the new skills I am learning to good use.

To visit my live website, follow the link below:

eilidh.design

Creative Conscience Awards

cc_logo

I submitted my anti bullying film to the Creative Conscience Awards 2017, who aim to:

inspire designers to apply their talents to socially valuable projects, promoting sustainability, freedom, social health and well-being.

I attended the Creative Conscience awards evening on the 5th July 2017 at the IBM Client Centre. The evening was made up of a number of inspiring talks from IBM and the Creative Conscience team. There was also a great opportunity for networking with other student award winners, members of the design industry and the Creative Conscience team.

Over the evening I spoke to a number of other students and it was great to be able to chat to other designers in other design disciplines about their studies and their projects. There were some really amazing and innovative projects which was really inspiring to see.

I was so delighted to have been invited to the evening and have received a Gold award in the Film and Photography category. Completing this project and attending the awards evening has really shown me the power that design can have in making a change in the world for the better.

Award 1AcceptingCameraScreen

Project Credits:

Poem written by: Shane Koyczan

http://www.shanekoyczan.com/

Voice over by: Danny Annear

Research & About

More than one out of every five (20.8%) students report being bullied (National Center for Educational Statistics, 2016).

64% of children who were bullied did not report it; only 36% reported the bullying (Petrosina, Guckenburg, DeVoe, & Hanson, 2010).

Being a victim of bullying increases the risk of being depressed later in life by more than half. Bullying others increases the risk of becoming depressed by 30%.

There were 4,507 cases of cyberbullying in 2012-13, up from 2,410 in 2011-12.

“The issues facing children today are very different from those that faced us as children.”  (BBC News, 2017) Our changing society in terms of the rise of the use of technology is making cyber bullying more accessible allowing bullies to hide behind a screen.

I think it is important to understand how privatised and “invisible” this type of bullying can be and how parents and other people close to the victim could be unaware of what is happening. Being able to encourage people to think about the power of the things they do and say. It has been shown that may people “suffer in silence” and do not open up about what they are doing through which can be even more damaging if they are bottling up this hurt.

“Stranger danger, for example, rarely comes up in contacts to ChildLine but depression, self-harm, online bullying and even suicide contacts are increasing exponentially.”

Students have a unique power to prevent bullying. More than half of bullying situations (57 percent) stop when a peer intervenes on behalf of the student being bullied.  (Hawkins, Pepler, & Craig, 2001)

I believe that this is where other people have great power in being able to use positive actions to help other people. I saw great opportunity to be able to focus on how other people can help and to try and help the problem by starting at the root of how people think and interact with others.

My Aim

Bullying has a detrimental impact on the victim, leaving them with problems with self-esteem and mental health. Anyone has the potential to be bullied and others should consider their actions and words that they say to someone before they do as it can leave a permanent imprint on the victims’ mental image of who they are and their self-esteem.

The film aims to make the teenage audience consider the marks that they leave on others and the lasting impact that their words and actions can have. It makes use of marks left on surfaces using ink spreading to represent the control and power of the bully and the influence they can have. It aims to disconnect the victim as someone belonging to a particular group e.g. age, gender, race etc. in order to relate to a larger group of people. It tries to enable individuals to relate the film and interpret from their own experiences.

Personal Story/ Experience

Talking to other people was able to help me understand how it affected/ affects other people and draw upon more than just one interpretation. One person I had spoken to said “everyone you meet has experienced some form of bullying”. “I think I was able to get through it by having something that I really enjoy doing, a passion. I don’t think I would be in the place I am today without that”.

My research showed that bullying plays a massive part in someones life and how they think about others and themselves. I believed that it was a very worthy issue to address and to try and encourage people to think about how they can make a difference in the world by being kind.

Process

I started by choosing a poem which I had remembered to be really powerful and emotive and I saw a potential to use this to create visuals to form a new perspective. I analysed the words in the poem and started visualising ideas by sketching, listening to the poem multiple times, listening to the pace, intonation and volume change etc.

I began brainstorming themes within the problem of bullying and experimented with the following themes:

  • The juxtaposition of Love and Hate
  • Acts of Kindness
  • Social Media and Video Games
  • Power and Control

I chose to continue exploring the imbalance of power between the bully and victim and investigated different ways to visualise and tell the poets story.

I experimented with different types of mark making using art materials and different surfaces as a way to illustrate a mark left on the victim to present the permanent damage caused.

A few examples of my experimentation are shown below:

Fineliner blog 3Mark making happiness exp 1Scribble close upPinned up experiments blogimg_3131img_3245img_3271

I decided to film moving ink in order to represent the damage to the victim and to encourage people to think about the impact that they have on others and to leave a positive mark on others.

Presenting my film for University Critique

img_83981

Final Film: Leaving Your Mark

Why did you enter the Creative Conscience awards?

I began my project looking at a poem and had not specifically planned and based my project around the Creative Conscience Awards. I knew that I wanted to create something that was meaningful, powerful and able to make a change in some way. I believe that it is important to be able to use your design skills to change people’s perceptions, and inspire change for the better.

What did it feel like to win an award and come to the awards night?

I felt so proud to be among some really talented designers who had some really interesting and inspiring projects. It showed me the importance of using design skills for positive change and how powerful design is for making a difference to issues going on in the world. I think each person making even a small amount of difference goes a long way. Taking part in this competition has really made me think about and more aware of problems going on in the world.

Would you recommend it to others?

I would definitely recommend entering the Creative Conscience Awards. It is so rewarding and fulfilling to be able to see how design can help a social, ethical or sustainable cause. If you are really passionate about an issue happening in the world or something you feel needs to be changed then it is a great way to be able to connect with other people who have the same vision and mindset as you who can advise you or help you to develop further. Winning an award gives you great connections to the industry and the Creative Conscience Awards gives you support through your journey trying to make projects real and getting yourself out there into the design world.

Finishing thought

It was really motivating to work on a project driven by social change, as something that could make a difference to a problem that affects many people during their lifetime. I believe that designers have a very important and powerful role in creating positive changes, as they have the ability to influence people’s emotions or help to see ideas from a different angle. I feel very proud to have received an award in this area of design.

References:

BBC News. (2017). Cyberbullying ‘on rise’ – ChildLine – BBC News. [online] Available at: http://www.bbc.co.uk/news/education-25639839

Bullying Alliance (2017). [online] Available at: http://www.anti-bullyingalliance.org.uk/media/29570/abw_campaign_pack_2015.pdf

Pacer.org. (2017). Bullying Facts. [online] Available at: http://www.pacer.org/bullying/resources/facts.asp

How much of a threat is Artificial Intelligence to Graphic Design?

“The trend of anthropomorphizing robots is nothing more than a historical cliche – and should be avoided. “Why do we need to anthropomorphize these kinds of machines?” he asked. “Why do we need to replicate human interactions or emotions?”

– Yves Béhar

He believes that designing systems that humans can use to compliment their design work and help make their lives easier is the way to go instead of making a system that “replicates” the abilities of a human being.

In terms of design, there is no one solution to a problem. There are many different options and directions to take to come to a solution and there is no one right answer.

Artificial Intelligence systems don’t necessarily have the best solution. Human creativity is a very unique and powerful asset as the “human touch” cannot be replicated by an AI system.

There are now artificial intelligent systems that are being implemented into the world of design in the form of logo designers and web design such as The Grid or LogoJoy. They are able to take preferences set by the user by choosing images and creating a template/ design which is similar but with your content.

I found an interesting post on Creative review (link provided below) where the author tested the difference in outcomes between the AI logo program (LogoJoy) and their own human designers in-house.

Unknown-1
Designed by LogoJoy
Unknown-2
Designed by human designer, James Greenfield

 

To see the article follow the link below:

https://www.creativereview.co.uk/can-ai-design-a-better-logo-than-you/

In comparison, I would say that the top design seems quite generic and similar to lots of other logo designs that you might see. The bottom design appears much cleaner and the simplicity of it makes it look like a more professional and quality company/brand. It also comes across as having more personality and is quirky. The clever use of the lettering to create an image within the text is something that an automated/ Artificial Intelligence design program would not be able to produce on its own.

Overall, human designers are able to apply their experience and contextual knowledge to design solutions which sets designs apart from content designed from an AI system. As many AI systems work from pre-made templates, this could result in a lot of similarity between designs and subsequently designing may become less original.

As non professional designers are now able to paste their own content into a template, making logo design more accessible for the non-designer at a cheaper and quicker price. This method takes away the designer from the process and allows the customer to be able to make their own logo from an automated, generative design which uses features based on your likes of shape, colour and typeface and allows you to make the changes on screen.

One difference between the process for the client would be that they would be able to see the progress of their logo throughout all the stages which means they are more involved and feel as though they are more in control. However, it would seem that the system produces more of a generic outcome and there is less flexibility and creativity than if your logo was being created by a designer. Although the process might be longer, it could be argued that you get a more personal and carefully considered design that fits perfectly with your company and has more of a human touch.

Logojoy says that “Using artificial intelligence and advanced learning algorithms, our logo maker is able to produce designs just like a designer would. Whether you’re starting a blog or re-branding your business, our online logo design tool will make it easy for you to get a great logo.”

I decided to go through the process of creating a logo using the Logojoy website seeing how the system is able to create an outcome and how good this outcome is.

screen-shot-2017-02-16-at-13-36-20

Logojoy first asks you to choose from a selection of logo designs to identify what style you like to gain inspiration, which is fairly similar to how a designer might start. Designers begin by looking at competitors designs and inspiration for logo designs as well as looking at the creative brief from your client.

screen-shot-2017-02-16-at-13-36-36screen-shot-2017-02-16-at-13-36-50

Next, it prompted me to choose a variety of colours. In this colour selection, it also tells the user about colour theory and what connotations each colour might have, allowing them to help the user in identifying what colour they should use to convey a certain message.

screen-shot-2017-02-16-at-13-37-06

It then asks for the text content on your logo by asking for company name and slogan to create 2 different text sections using different typefaces.

screen-shot-2017-02-16-at-13-39-47

The user is then provided with the option to type in shapes or icons that they might want to feature to customise their design. When you press search it finds relevant icons which are sourced from NounProject. You are able to choose which you like best.

screen-shot-2017-02-16-at-13-43-07

You are then provided with a selection of logos that they have produced based on your preferences. They then give you the ability to click and favourite any of them. It creates mock ups on different items such as a phone or packaging to give the user an idea of how their logo would look in real life.

screen-shot-2017-02-16-at-13-44-21screen-shot-2017-02-16-at-13-44-31screen-shot-2017-02-16-at-13-44-51screen-shot-2017-02-16-at-13-44-39

If you want to make any changes to your design such as letter spacing, font size, colour or a number of other variables as shown below:

screen-shot-2017-02-16-at-13-56-22

With this service, you can create your logo for free, however to download versions of your logo in high resolution and in different formats you need to make a purchase of $65 or you can buy a basic low resolution version for $20.

 

I think that design is an area that could be more safe from Artificial Intelligence than other professions as design uses something that computer systems are not able to replicate: originality of creative flair. From the comparison between a human designed logo and logo designed by a system there was a clear difference. I believe that AI will probably have a place in design of some sort and non professional designer could make use of this as a shortcut. However, I think that to maintain the quality, originality and new approaches to design. I feel to develop and progress in design, it is important to have human designers who are able to use context and life experience.

References:

Co.Design. (2017). 10 Principles For Design In The Age Of AI. [online] Available at: https://www.fastcodesign.com/3067632/10-principles-for-design-in-the-age-of-

aiLogojoy.com. (2017). Logojoy – A logo maker for simple, beautiful logos.. [online] Available at: https://logojoy.com/

Clean Streets Process

hotel-main

The challenge

Design a series of city landscapes using a flat design style of particular locations including: a hotel, office and recycling centre for Westminster City Councils’ Clean Streets. My designs then went on to be made into an animation which was uploaded onto their YouTube channel to inform and advertise their service to their consumers.

This project was completed during my Internship at Toast Design, in 2015. I have spent 8 weeks over 2 summers working at Toast Design.

For this particular project, I was working for another designer within the agency who took my visuals and made them into an animation.

I began visualising by looking for images of existing features of hotel and office buildings to reference. Therefore, I could add features to help the audience identify the building easily.

280px-waldorf_hotel_2download

 

 

 

 

 

 

office-mainrecycling-main

I really enjoyed my experience at Toast Design and believe that it was a very valuable experience for understanding more about the processes used for real life briefs and the constraints that you need to work to to keep on brand. I was also able to learn new skills along the way such as beginning to learn to code HTML and CSS as I started to produce a portfolio website.

The final video that was produced using my visuals is shown below: