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;
1  23

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;
5 6 4
Noting the CEO without hair and adding it was fun;
7
This may be me being immature but it may also be a subtle detail that makes them stand out a bit more.

8 11 10 9
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!!16
15
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/);

12 14 13

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;

17

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/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s