Headers and Footers

Before jumping straight onto muse and start designing, I conducted research on other design sites to see what elements they have used to navigate the user effectively. I noticed that the header and footer are usually quite simple and clear, with contrasting colour to that of the background to draw the users eye, and to be clearly visible. The header and footer should be fixed to each page, so I will be designing the header and footer in the A-Master page, keeping continuity and balance in the design. Below are a list of elements that appear in the header and footer:

Header

• Company Name
• Menu Bar
• Social Media Links
• Logo
• Search Bar
• Email address

Footer

• Copyright details
• Search bar
• Contact Information
• logo
• Back to Top Button

 

Effective Web Design

Effective web design is not determined by the website owner, but by it’s audience, like the phrase ‘beauty is in the eye of the beholder’. There are many factors that make a good website, and not only aesthetic decisions are made, but the usability and functionality of the site is a key aspect in web design.

PURPOSE

What is the purpose of the website? A web designer must identify what the purpose of the site is, and what the audience might look for when visiting the site. For example, are they looking for information, entertainment, or even e commerce. Each page should have a clear purpose, and fulfill a specific need for the websites users in the most effective way possible.

COMMUNICATION

The audience judges the design very quickly, so it’s important to capture their attention early and make a good impression. The best way to do this is to make sure everything is bold and clear, with minimal information. Organising information for the user to easily digest is a key element to good digital design. Ways toe achieve this are using headlines and sub headlines, using bullet points instead of block texts, and being concise and to the point when it is necessary to use text.

TYPEFACES

Sans serif typefaces are contemporary looking fonts without decorative finishes. They are easy to read on screen, which is what the audience needs. The ideal font size for reading easily online is 16px. Sticking to 3 typefaces in a maximum of 3 point sizes will keep the design balanced.

COLOUR

Complimentary colours create harmony in the design. Using contrasting colours for the text and background will ensure that the design is clear and easily read by the user. White space or negative space can also be good tool to make the design look modern and uncluttered.

IMAGES

An image can do all the talking. Choosing effective imagery can go a long way to communicating with the audience and also helps with brand positioning. Infographics, graphics, illustrations and videos are also effective ways of communicating and interacting with the audience, a much more personal and engaging approach compared to block text.

NAVIGATION

It’s important that the user can easily navigate through the website. Some techniques for effective navigation include logical page hierachy, and using the ‘three click rule’ where a user must not have to click more than three times to get to the desired information. The user will get restless and bored past this point.

GRID BASED LAYOUTS

Grid based layouts give structure to a design. If elements are floating around the webpage, the design will have a haphazard appearance that looks messy and unappealing to the eye. Grid layouts align content into sections, columns and boxes. This gives a design a more contemporary and balanced feel.

“F” PATTERN DESIGN

Studies show that people scan computer screens in an “F” pattern. This is the way we read books, from left to right, so it’s most natural for the eye to follow in the fashion. A well design website will take this into consideration, with a hierarchy of importance from left to right and top to bottom.

MOBILE FRIENDLY

In this day and age, everyone has a mobile device, so it’s important a website can optimise to different screens so the user can view the webpage on one page. This reduces annoyance and means the website is accessible to an even wider audience.

Book Covers From the 1860s

As part of my research, I looked at other books from the 1860s. What was particularly interesting was the use of texture on the sleaves. This made the book attractive and interacted with the audience other than the written words. As you can see from the images below, there are man historical and biblical references on the front covers of the books. This is an indication of what society was like in the 1860s, and the religious aspect should be considered in my final design for my book cover. I also like the patterns on the books. There are clean lines and borders around the edge, but with detail added in the form of illustrative pattern. Also, i noticed a lot of books were coloured red. Perhaps this is an indication of the lack of coloured inks available at the time. There is also clear use of foiling on one of the designs, which I would say would have belonged to a wealthy person. The gold foil also stands out on red background. Although I may not foil for this particular project, I like the colour scheme, and hope to replicate this in my design.

Layout – Book Cover Design

I measured both the height and with of the front cover, back cover and spine in order to get the dimensions to input into the computer. I measured Nineteen Eighty-Four written by George Orwell.

Front cover height 196mm

Font cover width 132mm

Back cover height 196mm

Front cover width 196mm

Spine 20mm

Curvature – 2mm either side = 4

Width (from back cover to front cover inc spine) 286 mm I then input this into indesign where I adjusted the size of the document, the margins, and then moved guides from the vertical axis to highlight the boundaries of the spine. This then gave me the template in which to design from.

I wanted to try using the the rule of thirds in my design. The audiences eye will feel most naturally comfortable. I aligned the authors name to the lower third, drawing the eye to the well know writer. The audience will instantly recognise the name and hopefully be interested in the book.

Visual Communication

I used two signifiers along with the text. The first of these was a red coloured cross on the front cover of the book, which resembles blood. This is a key signifier as the main character murdered two innocent people at the beggining of the book. The cross is also significant as the Sonya, a female character featuring towards the end of  the book, hands Raskolnikov a cross when he goes to confess his crime. He wishes to own up to his mistakes and hopes religion will guide him back onto the road to redemption.

The other signifier I used was a hand drawn image of an iconic building from St Petersberg. This is symbolic of the area, as the signifier has a visual resemblance to the signified. I thought it was important to feature something old and historic, as the city has a lot of heritage and rich in history.

Previous Book Covers

I looked at different editions of Crime and Punishment to see what illustrations and typography is used, and how the ideologies of the book are visually portrayed through these mediums.

The rule of thirds is evident in the first three designs above have a clear rule of thirds running throughout the designs, which gives a clear hierarchy of importance to each element.

I like the imagery used in bot the first and third image, where a key theme, isolation, is shown through the expression of a remorseful, guilty man.

Typography

The typography used in the first image is very medieval and old style. This gives a feeling of age and the era at which it was written. The text is also centre aligned, drawing attention to the display face. There is also emphasis on the “C” and “P” as the capitals are significantly larger than the small caps. I think its important to take note of this, as the book is set in the 1860’s.

The second design also uses a similar layout, however the image is framed and aligned center along with the type. The typeface is a serif font, that also connotes age and formality. The image used reminds me of a illustration of a caught case, where the guilty person is shown.

I liked the angle of isolation that shown in all the pieces. The man feels alienated from society after feeling above the law.

 

Typeface Choices – Selection & Rejection

I looked at a range of different typefaces. I wanted to use something that had connotations of law and formality. This is in keeping with the theme and title of the book, and the audience should be able to clearly understand the subliminal messages the typeface connotes.

The book is set in the 1860’s, and I think it is important for this to be reflected in my typeface choice. With this in mind, I look at a variety of serif fonts that I think will portray the right message.

I first looked at this modern, serif font, giving a old classic a modern twist. I thought this typeface was too modern, and the messages are very mixed and may confuse the reader as they may not expect this from an older book. 

 

This slab serif typeface, Code bold, increases the readability of the title, and is quite easy for the reader to read along the line of text. However, the connotations of the typeface don’t represent the age of the book very well as I think it makes the the book seem modern. The book is set in an old historic city in the 1860s, with a lot of heritage. This should be reflected in the typeface.

 

 

Kerning and Tracking

An important part of making an effecting book cover is to understand the effectiveness of kerning and tracking. I used both of these in the title. I thought the ampersand looked very untidy in the title on the front cover. To tidy it up, I shrunk the point size of the ampersand and the decreased the tracking between “Crime” to the ampersand.

Tracking was also used in the authors name, where I spaced the characters apart, to distinguish between the two different pieces of information. I chose the typeface, Linowrite, which is based on the american typewriter font. These strong serifs make the reader read along a line, which means its perfect to increase the tracking, making the characters stretch out along the line, and increasing emphasis on the name.

I also decreased the baseline height on the line “PUNISHMENT” to conjoin the two pieces of information together, and separate that block of text from the authors name.

 

 

Visual Communication – Design Factory PDF’s

In this post I want to analyse the design choices I made when visually communicating with my intended audience.

I  wanted my brand and product to be seen as a revolutionary eco friendly shoe. With this in mind I chose a vibrant green to connote light and green energy.

In my poster design, I also used the green shoe with the green Athletic Energy logo on a dark black background to bring the vibrant green out further, signifying light and energy. I also used the world, (signified), to portray the feeling of the impact this shoe is having on the world,(signified). I also blurred the earth to signify movement. The world is an indexical sign as it has a physical resemblance to the signified.

Book Cover Typography Research

I wanted to look at other book covers and point sizes to find out what was effective and what wasn’t.

“Great Book Covers Embrace Kerning”

kerning refers to the spacing between letters. The aim of kerning is to equalize the apparent space between each letter to minimize abrupt gaps or crowding.

Sight words

When our eyes land on a known word, the words identity is triggered in memory quite rapidly. Uneven letter spacing distorts the picture of a word, and our brains must work harder to identity it when glancing over a choice of book covers. Below are examples of kerning that has been applied to this book cover. It helps the readability of the key information.