Revisiting Logo

Revisiting Logo

I wanted to make some final adjustments to the shape and design of my logo based upon some theory and design principles that I researched.

The main adjustment that I felt was required was to get the logo to work within the parameters of the Fibonacci Sequence, something I had earlier found in my research that was used you in a lot of iconic designs of today, and something that appears across nature from something as small as dragonfly wings to the incredibly colossal like the universe. I started by opening my logo design in Illustrator and importing the image of the Fibonacci Sequence spiral which is this:

The first step I took was to create the curvature of the graph so I rotated the FSS (Fibonacci sequence spiral) and lined up the corners then removed the irrelevant sections. You can see that here:

Next step I created two replicas of the graph and then resized them so that they were in line with the two lower lines, I have circled the points in which they cross below:

With the logo redesigned to fit the FSS, the next step would be to size and scale the elements of the logo including text to give it a proper hierarchy. I rotated the FSS and made the graph fit within the square at the top, next was ‘AKB’ so I resized the text and adjusted the letter spacing so it fit within the height and width of its box which you can see below:

The next step was to do the exact same with the design but this time I chose one of the small squares to give ‘AKB’ more importance within the hierarchy.

The very final step was to arrange the elements so they were in order and had the correct hierarchy. Once again this was easy as all I had to do was rotate the FSS and used the two smallest squares that meant the elements were equally spaced out to give the correct amount of space and improve hierarchy, you can see this below:

One point I haven’t discussed so far is some of the colour theory within the logo, obviously I have previously written about why I have chosen this colour set, but I haven’t discussed the colour arrangement within the logo. The basis of the logo is meant to somewhat represent a graph of my performance as a student at Hull College over the entire 3 years. There are six bars because there are 6 semesters for the entire web design course I am studying, therefore the logo represents the quality of my work whilst at college. The two lower sections I have added in have been applied with a lighter shade of purple, this is to represent the competition I will face as a web designer and that is why the two front sections are lower down because it would give the indication that my work is of a much better standard and quality. Again the front sections are lighter for a couple of reasons; firstly it adds contrast to the logo and secondly in the sense that it is meant to represent the competition, the front two sections are a lighter purple whereas the back section (which would in turn represent my work) is in a black to dark purple gradient which would indicate power, authority and elegance over the other competitors within the market. Below you can see the old (on the left) and new version of the logo (on the right).

Advertisement

The moods of music

I learnt that music has a massive effect on the overall feel of a video. I realised that upbeat, quickly cut video leaves the viewer feeling happy, whereas the a slow cut video, feels much sadder. The best example of this was to use some oxfam footage of the rice farms, edit it with two different versions. Happy and sad, you can see the results below:

Happy:

Sad:

Hull Open Day

Hull College had an open day for potential students and asked me to take some photographs of the day for the student union to use in advertising, below is the contact sheet:

CONTACT SHEET

I selected a couple of the images that worked well and used the techniques I have previously used, I ended up with a total of three quality images.

The first one was a shot of the classroom, I weaned to focus on the boys looking forward as if they are concentrating, a crop of the image fixed this. I also noticed there were a few ‘distracting’ elements to the image, the boy forefront in the image had a black eye which I was able to lighten up and made the area look a bit healthier, there is a lot of noise out the window so I was able to remove a lot of unnecessary items out side to tidy it up, then i tidied the room up inside by removing sockets on the wall and loose wires which made the image look a lot cleaner and allowed the viewer to focus on the people. The last adjustment I made was to play with the levels of the image, this allowed me to change the lighting to brighter the image as a whole. You can see the original and edited versions below:

The second image was of the Hull College logo printed on a window with a reflection of the church behind it. It was a nice image to begin with but a fees adjustments made it a whole lot  better. Firstly I removed the dirt from the glass, lights behind the glass and unnecessary reflections. Next I played with the levels to allow the logo to stand out even more, and then finally I selected everything but the logo and filled a layer with black, then brought the transparency down to 10% to make the background darker and again to make the logo stand out more.You can see the original and edited versions below:

The last image I edited was of the front of the building with the logo on it, again the image didn’t look right so I edited it in photoshop. In this image i removed lights within the building and the used the clone tool to clone closed windows onto open windows making all the windows closed, I straightened the image, cropped it then changed levels on the image to make sure the colours looked right. You can see the original and edited versions below:

The End/A New Beginning – Pageless Design

The final stage of building the site was to open Dreamweaver and actually create the site.  as you can see below, I reached an almost complete site with a html file linked with a css file. As I was working and writing up the alt tags and the meta data I realized that it was limited for the search engines to find my site and that my listing would be compromised due to the lack of these. I thought before I continued, I would research the downsides of pageless design and then decide whether to continue with this design, below is the progress I have made so far.

Understanding the importance of file hierarchy took an important role of setting up the site, I knew that should anyone else need to come and work on this site, they would need to understand what all the files were. Therefore I made sure my files were labelled correctly and tidily. You can see the structure below;

The site is constructed correctly so that the layout is fully in order, I used Lorem Ipsum as filler text to begin with as that is a fine detail that can be changed in a later stage. The images in portfolio section of the page have a rollover feature so that you can see what the property looked like before the work was done. This was done using a <table> element to allow the images to be laid out correctly on multiple screen sizes. I set up code to allow the user to press the “Contact Us” button on their phone and would automatically start calling from their phone. These were both two things I do think work really well, so these will definitely be staying in the design.

There are two faults I have made so far though, In the .textbox div that overlaps the people on the roof, I have made the mistake of using attributes (position:relative and top:-250px;) This is a specific fault as you shouldn’t use these as it will mean the following content will not follow it’s normal flow, therefore, I must research an alternative method. The same can be said for .textbox2 but this one hasn’t been adjusted to the full extent to be over the top of the image.

This means I need to research an alternative method, which doesn’t break rules of html and css code, my research indicates that an z-index attribute would create a layer over the top of the other sections of the page, this is exactly what I need so I will be researching Z-Index.

This is evidence of the website I created;

DESIGN

HTML

CSS

Wireframes & Designs.

A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.

I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.

Here are my three wireframes & their physical design…

Number 1.

This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.

Number 2.

The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.

Number 3.

Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.

References:

http://en.wikipedia.org/wiki/Website_wireframe

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

http://uxmovement.com/wireframes/the-importance-of-tying-personas-to-wireframes/

http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf

Selecting the Logo

The Selection Process

I decided to create the website logo to make it look truly professional.

These are the initial designs that didn’t get chosen:

It was a tough choice turning down some of these ideas as they were designed to represent a roofing company, middle right looked to clip-arty, second one down on the left didn’t work as you shouldn’t have gaps in a roof, so having a gap in the logo just was a silly idea. While I thought it was a good idea to have a visual with the text, I didn’t think any of them worked enough and that they all overcomplicated the design therefore I chose this design;

Composition rules of Photography

There are many composition rules within photography that help look an image look professional, you always need to consider these when taking photographs.

The rule of thirds

This is basic photography and can even be seen in modern smartphones, a grid is placed onto the screen consisting of two horizontal and vertical lines meaning there are 9 equal sized sections. The aim of the rule of thirds is to get the important element of thew image either on the lines or where they cross.

Balancing Elements

When taking a photo using the rule of thirds you will sometimes realise that there is a large portion of the image that looks empty, if you fill that space with something else, it will make the photo seem more interesting.

Leading Lines

Lines within images are great because we are naturally drawn to them, so as a photographer you can use this to your advantage by allowing the lines to lead to the focus of the image.

Symmetry & Patterns

As human beings we find beauty in symmetry, as found in a New Mexico State University study which “utilises a program called FacePrints, which shows viewers facial images of variable attractiveness. The viewers then rate the pictures on a beauty scale from one to nine. In what is akin to digital Darwinism, the pictures with the best ratings are merged together, while the less attractive photos are weeded out. Each trial ends when a viewer deems the composite a 10. All the perfect 10s are super-symmetric.” By taking advantage of this in photography, you can create beautiful images.

Viewpoint

Placing importance on the angles we take our images from is a good skill to learn as it can lead to some more abstract pictures. When taking an image I should take note of what angles I could take the shots at, be that with height, distance etc.

Background

If an image has a background that has a lot going going on, it will distract from the focus of the image,simply changing an angle and getting a plain background can help the focus of the image stand out.

Depth of Field

To create an image with a great sense of depth, you must understand the elements of a foreground, mid ground and background. These can create a feel of scale and depth by itself. By using objects in each section for the depth, it will allow the viewer to understand the scale much better. You can also create an element of depth by blurring the background, this can be done by

Framing

You can create a natural frame within an image, placing certain objects around the edge of the image you create a focused image which will draw the attention to the part of the image with most importance.

Cropping

Cropping is a very important tool to use as a photographer as it allows you to delete unwanted details to reduce noise, making sure the focus of the image is all the viewer can see.

References:

http://www.photographymad.com/pages/view/10-top-photography-composition-rules

http://legacy.jyi.org/volumes/volume6/issue6/features/feng.html

Featured Image -http://designyoutrust.com/wp-content/uploads/2013/02/photography-rules-are-made-to-be-broken-1.jpg

The Selection Process: Sketch – Digital

When designing the logo, I took into consideration all of my research about colours, fonts. I looked into my target audience and what my competitors were doing with their logos, then started to draw logos on paper, after that I scanned them into the computer and designed them in Adobe Illustrator in black and white first. This was the start of the ‘elimination’ process as I have found through my research, logos have to work in black and white first before you add colour, that meant I was able to ‘eliminate’ a few. After that I scaled them up and down to see how they worked at different sizes, again allowing me to ‘eliminate’ more. The next step I took was to add gradients in the background as this meant I how see how the weight of the fonts and the overall feel would look if I were to use that logo, this allowed me to eliminate further. Then I started to add the ‘pre chosen’ colours from my colour research into the actual designs, this allowed me to see whether the logos actually worked in the colours In wanted, this again eliminated more. The final step was to make adjustments to the fine details and typography which meant I had final versions of a the few logos I was happy with out of the 20 I started with from the beginning. To allow me to decide which one was my favourite, I again put a coloured background to the images and peer reviewed them to help me decide on my final version.

Design No.1 – PASSED

The thought process behind this logo design was basically that I wanted to create something that would somewhat copy a graph that shows good statistics. Simply by aligning the bars on a upward slant would show constant improvement. This is something that I should hope will occur with my college work over the next three years and since this logo is meant to represent myself and the work I produce, I thought this design was ideal.  The text is aligned with the edges and when it scaled down, the text removed appropriately, the logo is still recognisable. As you can see even against different backgrounds the logo still stands out, doesn’t become distorted or illegible. Given the facts I have just discussed I believe this is a good piece of design therefore I passed the logo.
Design No.2 – FAILED

  Again, similar to the previous design, the reason for the graph like format would be to indicate the improvement of my own personal work over the three years I study the web design course. Unfortunately this logo had it’s difficulties when in the Illustrator design stage with size of the font, and spacing within the shape. It looks good against multiple different backgrounds. The problem with this design is that the text becomes illegible when you scale down the image, there are issues with the fact that there six columns therefore would look uneven if I were to delete blocks meaning there would need a colour code and because logos need it work in black and white before you add colour, for these reasons I have failed this logo.

Design No.3 – FAILED

I started to look into luxury within design because I wanted my work to become across as high-standard, I came across the two images of the watch faces, my idea was to remove the digits from the clock face to give the impression that my design work was timeless and would work years later, much like many iconic brands in today’s market. As you can see I have two hands that are in the same time position as the Rolex image shown, the reason why clocks show this time is because it is meant to indicate a smile. Once I had completed this design in Illustrator, I realised it wasn’t going to work, firstly the hands looked like the propellers of a plane, secondly when the logo was reduced to the smallest size and lost the words it looked like a bird with wings. This is not what I wanted to put across to my target audience, so I decided to fail this design.

Design No.4 – FAILED

In this design I tried to create something simple, effective yet eye catching. I feel the logo feels very clip-art like and too simple, then when the logo is reduced down the text is illegible and makes a very pointless logo. On this basis, it was easy to fail this logo.

Design No.5 – PASSED

I really like this logo as it represents the web as an endless space which has no edges. It is simple, eye catching and effective. As you scale the image down, it is still recognisable. This is easily my favourite out of my twenty so I have passed this logo to the final stage. During peer review of this logo, people suggested that I should redesign the the shape myself instead of using an 8 on it’s side, give it a proper hierarchy and fit them in size order.
Design No.6 – FAILED

This design is one of my least favourite designs, I dislike the curve and I don’t think it represents me as a designer. It has no meaning and would still look reasonably boring with colour. When you scale this design down it loses the slight impact it had therefore I have failed this design.

Design No.7 – FAILED

This design was meant to represent timeless design, meaning that something I design today would still be relevant in 2, 5 10 years down the line. While it was an interesting concept, and a good idea, I don’t believe the logo really worked. Scaling down the design the text was undecipherable and the logo unrecognisable, for these reasons, I have decided to fail this design.

Design No.8 – FAILED

This design was a nice idea because it has a certain element of luxury to it, the bottom section to be coloured black white the top remains white with a black border. The circle is to represent an an old style wax stamp which was used to seal letters in years gone by. When showing this logo to my peer group I had feedback that it looked like a logo for a restaurant or an actual restaurant menu. This along with the fact that it doesn’t work in just black and white and that I have added colour means I am failing this logo.
Design No.9 – FAILED

I drew this logo based on road signs, I wanted my logo to stand out at a quick glance. This takes simple shape and type into account to make up the logo but I found this logo to be too simple, therefore I have failed it.

Design No.10 – FAILED

The aim of this logo was to focus all the attention into the typeface just like the ‘Range Rover’ logo with spacing between the type, while in theory a great idea, I thought I needed an actual graphic to assign to the type, therefore I failed this design.

Design No.11 – FAILED

This logo was inspired by this luxury packaging I found, I thought it would be interesting to see what it would turn out like, in the the end I found it looked like I was ‘boxed in’, maybe couldn’t think outside the box, which is not the image what I want to put across as a designer.

Design No.12 – FAILED

This was the worst design I made, I wanted to created a logo that would look like a smile, to present a happy designer that enjoys what he does, this logo is very poor in quality, and I very easily failed this design attempt.
Design No.13 – FAILED

This logo was meant to represent a certain status among my competition. The logo is too simple and I don’t think it looks very professional, therefore I have failed this design.

Design No.14 – FAILED

In this design, I wanted to give a clear example of hierarchy and order, somewhat how pyramid works, while in theory it is a good concept, it is either not going to work or just poorly executed, therefore I failed this design.

Design No.15 – FAILED

This design i one that I favoured from the beginning as I believed it ‘looked good’ but after realising it had no meaning whatsoever, it became an almost pointless logo. I have decided to fail this logo on the basis that it has no meaning behind it.

Design No.16 – FAILED

This logo again was designed using inspiration from the clock face to create the impression of timeless design. This time though (bad pun) I decided to enlarge my initials to make it more about me. Unfortunately, when placed against a coloured background you start to loose the detail in this logo, so for this reason, I have failed this logo.

Design No.17 – FAILED

The purpose of this design was to make me stand out from my competitors, placing myself on the top of a column or pillar rises me above the crowd. It gives the design an automatic hierarchy as the font has to be smaller to give the impression it is resting on a a pillar.

Design No.18 – FAILED

I didn’t expect this design to amount to much, but it actually surprised me when it got to the black and white stage. The problem is that it didn’t have any meaning and that

Design No.19 – FAILED

This design was an interesting one to work on, I wanted to recreate the luxurious feel in the images I have show, but because of the font just wasn’t good enough and the overall feel of the logo wasn’t up to scratch, I decided to fail this logo.

Design No.20 – FAILED

This design was an interesting one to work on, I created the following logo with the idea of having salt poured on the table with someone drawing my initials into it, while it looks okay, it is difficult to recognise at a small level and lacks meaning, therefore I have failed this design

Practising logo design & Illustrator skills

I decided to practise my logo design and Illustrator skills before I went on to design a logo for myself, I found a logo on the internet that I considered to be bad design, analysed it, then re-designed it.

The company I chose was WinNET Systems, a company that deals with providing Cisco training towards Cisco CCIE Certification. I believe the logo is outdated with the shadow, the hierarchy is wrong especially with the centralisation of the word “Systems” and the larger S. I like the white line within the blue box as it makes the wording stand out more.

The Competitors  

The logos are very corporate, all seeming to use the same colours to indicate stability, intellect and expertise. The logo I am re-designing will need to stay within these guidelines but also appropriately target the correct audience which is middle aged technicians trying to achieve a CCIE  Voice Number which in turn will give a higher payslip. The logo will be used on the website and in any advertising the company do, therefore it can be simple and will standout from its competition.

I have done three different versions of the logo.

Firstly, I made a few minor adjustments to the design to modernise it and remove anything I found to be unnecessary, I ended up with this version of the logo:

I flattened the design to modernise it and gave the wording a lot more space to breathe as the original is very close with not much hierarchy. I decided to keep the same colour as it represents what the company stands for well.

Second design I gave it a bit more of an extreme makeover, using the original as a model but trying to be a little creative at the same time.

I removed the round edges and put the white line directly through the centre to give the logo space and hierarchy. I used the same fonts for both words, but just used a bold version on the top.

Lastly, I completely redesigned the logo with modern design, hierarchy and style in mind, I wanted to design something that would stand out from the competition.

I thought the best way to redesign this logo would be to redesign the whole organisation of the wording which is why the Win and Net appear separately. Putting the word Win in italics also makes the word stand out more, the word net in bold, just so you are aware that is also an important part of the branding. I think this logo has a much more modern and professional feel compared to the original.

References:

http://winnetsystems.co.uk/index.php/about-us

http://media.creativebloq.futurecdn.net/sites/creativebloq.com/files/images/2012/04/cs6illustrator.jpg(Featured Image)

TRIPLAGENT Mockup Challenge

We were given the challenge of recreating a mockup to the best of our abilities within photoshop, one the left is the original and on the right is my mockup;

Another element we were tested on was the way we named our layers, I made sure mine were structured in such a way that should someone else have to work on the project they’d be able to understand what each layer represented.