Lines in Web design

Lines are becoming more and more popular in web and print today. They create abstract sites that stand out from the crowd. Differences in thickness, length, direction and colour cause different emotion in the viewer and I think they have such a broad range within design itself I though it would be worth covering in my brochure.

Case 3D have an excellent example of lines somewhat hipster triangles being used in their website so that as you scroll you have bright neon colours mixed with a white version, colour version and dark version of the same image. Using the scroll  you can see this transition;
 

Not only is it a brilliant experience for the user, but it also stands out from the crowd and seems to have almost hidden features for the user. For example the About us page has a triangle that shows the next member of staff, and whilst browsing the site I found myself trying make combinations of the faces on the site, you may enjoy a couple of the ones I made here;

Noting the CEO without hair and adding it was fun;

This may be me being immature but it may also be a subtle detail that makes them stand out a bit more.

Horizontal lines here in the dunlop site are used to break up content into sections which are clickable, moving the cursor changes the area which is the largest. The site has interactive content where you can drive the cares with different tyres, actually really fun!!

This wine website uses lines to separate content that is somewhat compact together, this is not a brilliant experience and has a lot going on, just like some of the bad brochures I described but the difference here, the thing that makes it stand out is the different fonts.

There are different forms a line can come in. I found this awesome write up that discusses the differences and the effects they have on the viewer (http://tympanus.net/codrops/2011/11/17/lines-in-web-design/);

These description help me to understand the purpose of the different lines, I instantly begin to thing how I can use this in line with my logo, and branding the brochure with it. I made a quick mockup here at shows the initial Ideas I have;

References;
http://designshack.net/articles/inspiration/30-great-looking-web-designs-built-with-diagonal-lines/
http://www.case-3d.com/#home/en
http://en.dunlop-tire.ru/

Advertisement

Notes from reading books

Nathalie Nahai – Webs of Influence

This book was very informative and allowed me to understand some of the psychology behind web design and how I could use that in my own work, I have summed up the most impart parts below.

Sales techniques such as buying in a group can have a psychologic impact on the users choice of product, individually pricing a product at £50 and then as group at £130, the user is more 84% likely to choose the group option, since our client is selling gun holsters, this could be a clever strategy to improve sales.

People also choose the middle priced option so by raising the price of the middle option will drive profits. Showing an Low stock will drive a user to make a purchase quicker than usual because they want to get that item, so by placing a low stock quote next to the middle priced item will drive sales of that item even further.

We need to understand who our target audience and design specifically around them because it is clear that male and female have different things that they like about the design of a site.

Six principles of sales suggest:

Giving something away to customer to improve experience

Consistency throughout the site

Herd psychology means we are more likely to trust someone if lots of other people do  (You are the 58th member from Texas, Take a shot at your sign and make your mark)

Trust people with similarities – Taylor homepage with welcome using local ‘lingo’

We are rewarded for complying with authority, therefore by implying people with power use the services, it will look more professional and have an expert appeal
But buy on impulse if the item is in short supply, like mentioned earlier show low stock on certain  items.

Things that stop us buying are:

Lack of customer service and salesperson, therefore have an assistant available for chat at all time on every page, just like in a shop if you need assistance all you need to do is look around and you get help, breaking down the barriers would improve the service and generate more sales.

Lack of security, so therefore state that the site hits a certain security level to make the user feel more comfortable even browsing the site.

Things that aid us buying are:
Customer reviews, therefore these should be important within the hierarchy
Earned media, therefore good ratings from larger media companies

Cameron Chapman – Colour for Web Design

Contrasting makes content stand out a lot as can be seen here with the orange on black combination.

Mixing different tones of the same colour can make for some interesting imagery. Below are a few ‘neutral’ colours that make it more about the content.

A lot of the stuff covered in this book I have already done and can be seen in this blog post;

Black and white work with every other colour in spectrum therefore would be useful colours to consider.

References;

Click to access Web-Psychology-your-roadmap-to-online-success.pdf

http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-the-meaning-of-color/

Good & Bad Brochures

The purpose of a brochure is to inform the reader, this can be done in a varying amount of different forms and I am going to start researching them now. From my research I have found that there are a lot of small things that all add up to make a brochure good or bad. Fonts, colour choice, layout, shapes, form and lines all make the brochure stand out from the rest so the best way to start was to research the different types of brochures, you can see these here.

Bad

One awful one that jumped out at me straight away was this one. It was way to complicated with too much going on at once, a brochure to sell the reader a sport fishing trip uses out dated styles to present its information. In an age of flat colour and simplicity, this design has 3D boat drawing complete with way too much compact text and images. This brochure has no space to breathe in, making it difficult for the reader to read it.

This design has seemingly mixed lots of design techniques into one. It has used flat colours and text message like green boxes with a slight transparency, there is a very busy logo in the top right and a somewhat disturbing white flower design floating on an image of a field.  To make the image even more complicated there is three images of the vehicles available. Something that stands out to me about this image is that it isn;t instantly obvious what the brochure is about and I think this is definitely something to be avoided if making a brochure to inform or sell.

Good

I really like the idea of the book having a matte finish but a transparent cover to protect it and give it a gloss finish. By printing on the gloss, when it lifts naturally it gives it a natural shadow on the actual design too which is really nice. I think it is brilliant how the texts and images takes up the full page by themselves. This booklet also proves that white space makes the design so much better by simplifying the design.

I really like this image as it has some very interesting ideas about layout of images. The main reason I like this brochure though is the fact that it uses a total of only three colours for contrast in the background and text areas. Transparency also plays a nice cold in the areas over images.

This design is very clever in the way it uses the there colours of the american flag to add interest to the brochure. While I like the overall design and the seemingly random shapes I do find the design to be a bit cluttered and had a bit too much going on. I feel like I would prefer something a little more stripped back.

I like this design because it is very creative in the way the images are laid out, using unusual cropping of images lead the eyes across the page very well. Some of the positioning of the images and the flat images don’t work very well therefore I will probably disregard these but it’s all good inspiration regardless.

I like how this post uses cuts and folds to create a more interesting composition. Edging away from simplicity, and creating something.

I found this piece of art work and thought it was really interesting so thought it would be worthwhile noting it and trying to find a way of relating it with anything within web destign, this means I will have to look at and research pop ups in web design and print.

References;

http://www.printaholic.com/15-awful-brochures/

https://www.behance.net/gallery/7212089/Dwell-Coastal-Cities-Revisited

http://graphicdesignjunction.com/2014/02/corporate-brochure-designs/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+GraphicDesignJunction+%28Graphic+Design+Junction%29

https://dribbble.com/shots/1491729-Webmaster-Manual/attachments/223595

http://www.thejealouscurator.com/blog/2010/08/20/im-jealous-of-abigail-reynolds/

http://www.thejealouscurator.com/blog/

Local & International Podcast

Hirsty’s Daily Dose

Like;
The intro is really fun and upbeat that describes the perfect listener, it also names and funnily describes the presenters. Music is loud but goes down when the producers speak. – I find it funny when they do something in the studio that isn’t good radio and then they say “this is great radio everyone” or sarcastically say something like “name of radio station, listened by millions a day”. Swearing because younger listeners can relate better. A complication of parts from earlier in that show that were funny. Dubstep soundtrack makes it sound modern. Taking the mick out of each other makes it more funny.

Dislike;
Probably wouldn’t be relatable to older generations.

Fletch & Vaughan
Like;
I like that they have good banter, don’t take themselves too seriously and always value their listeners opinion. Real laughter and going on tangents makes it seem much less scripted. They like to poke fun at topical subjects to make them more interesting for the listener. The target audience is about 16-35 year old people. They have backing music over some areas but then then are none in others which makes it more about the content. Still relate to the presenters even though they’re on the other side of the planet, they speak of things that people can relate to across the planet.

Dislike;
The fact that the presenters are so funny also makes some of their features where they involve their listeners a little less interesting because they don’t go off on the tangents which is what makes them funny, seeming more scripted it is a little less fun.

Organisation of tasks – Creative Futures

Following my previous projects, where I had constantly thought I was not getting enough done and that I wasn’t going to hit deadlines, I thought a vital part of this semester would be my organisational skills. Therefore I have listed every single task I wanted to complete for this project and created a timetable so that I knew what work needed to be done, and when it had to be done by. I also decided that it would be vital to sum up each section of the project after it had been completed on time, which is why you can see the schedule broken down into understandable sections. I have tried to get all the work listed accomplished with a few weeks to spare before hand in, this means that I have allowed for mistakes or extra work along the way.

OGRANISATION OF TASKS – USER CENTRED DESIGN

Following my previous projects, where I had constantly thought I was not getting enough done and that I wasn’t going to hit deadlines, I thought a vital part of this semester would be my organisational skills. Therefore I have listed every single task I wanted to complete for this project and created a timetable so that I knew what work needed to be done, and when it had to be done by. I also decided that it would be vital to sum up each section of the project after it had been completed on time, which is why you can see the schedule broken down into understandable sections. I have tried to get all the work listed accomplished with a few weeks to spare before hand in, this means that I have allowed for mistakes or extra work along the way. This is obviously even more useful when working in a group, therefore allowing everyone to clearly understand where they were and what they had to do, this should prove a useful method of tracking progress of the the group members and the overall project. I have added the initials of the person responsible for that piece of work or put all if everyone needs to do it, this has been approved by the group.

Organisation of tasks – SOUND DESIGN

Following my previous projects, where I had constantly thought I was not getting enough done and that I wasn’t going to hit deadlines, I thought a vital part of this semester would be my organisational skills. Therefore I have listed every single task I wanted to complete for this project and created a timetable so that I knew what work needed to be done, and when it had to be done by. I also decided that it would be vital to sum up each section of the project after it had been completed on time, which is why you can see the schedule broken down into understandable sections. I have tried to get all the work listed accomplished with a few weeks to spare before hand in, this means that I have allowed for mistakes or extra work along the way. This is obviously even more useful when working in a group, therefore allowing everyone to clearly understand where they were and what they had to do, this should prove a useful method of tracking progress of the the group members and the overall project. I have added the initials of the person responsible for that piece of work or put all if everyone needs to do it, this has been approved by the group.