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

Researching Artists

There are four artists that I came across in my research stage and I thought it was important to look at their work before I went out and took my own images.

The criteria of my brief? A collection of images that equally promoted the old and the new around Hull. Something that could be used in marketing of thew freedom festival in 2017. I was interested in black and white photography of architecture because by removing the colour there is instantly more focus on situations, sceneries, objects and people.

Ellen Fisch was the first person I came across during my research. Her compositions are interesting as they use leading lines to make the user look at the focus of the image, which was generally not shown in the image, this was interesting as it attracted the viewer to something that isn’t visible in the image. You can see this in these three images below. This is something I believed was worthwhile noting for my photo shoots.

Ellen1 Ellen2 Ellen3

Joel Tjintjelaar images are really good, I found them a very helpful part of my research and you will see very clearly how he has effected my work. The images were shot in a way that they became abstract due to the fact that they have been taken in an unusual way. Joel is also another photographer who presents his images in a square format. So the lessons I have learn’t from Joel is that taking abstract and unusual images using depth of field and leading lines pays off, and that presenting your images in a square format works well.

Joel1 Joel2 Joel3

David Gutierrez was next with a mix of styles. While choosing not to create square photos, there are clear depths of field in these images. Two of the images use leading lines to create interest while the other focuses more on framing the image. You can see them below.

London London London

Kelly McCann chose to mix between landscape and square format images, she uses framing in the shot of chapel, and she also uses the rule of thirds in the images to allow the viewer to get a sense of perspective when looking at the images. These images work really well and will influence my work.

Kelly1 Kelly2 Kelly3

Cameron Nielson has an interesting take on his architecture which he has branded as ‘straight up’ where his signature is that he just points the camera straight up and shoots. He ends up getting some interesting photos that show the the skyline of the building whilst also capturing the sense of scale with field of depth and leading lines, as we all stand street side look up, this is something every viewer can relate too.

Martina Beauty Cameron2 San Francisco Straight Up

I believe using leading lines to draw attention to the focus point of the image works well, so I will be using this technique, I also like the images being square as I think it allows for a constant size, which is the same for all images, making it more about the content than the shape.

References:

http://www.kellymccann.co.uk

Joel Tjintjelaarhttp://www.bwvision.com/

David Gutierrez – http://www.davidgutierrez.co.uk/london-photographer–black-and-white-photography.html

http://www.ellenfisch.com

http://straightup.co/portfolio/san-francisco/

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

Francesca Woodman – Boxes

Francesca Woodman

The write up of Francesca is nothing to do with her work, but rather the layout of her work at the gallery. The style was used to present five images with a diamond-grid formation in square frames.

I was somewhat fascinated by the layout, and got me thinking about how to arrange content online. I did a bit of browsing by simply typing “boxes” and “grid” into Google and trying to make something of my results. While not finding any content about boxes or grids particularly I soon realised that a lot of the web is contained within invisible grids or boxes and I will here document my findings.

An example of a grid with small margins was this one (http://grid.vsco.co/grid/1)

Screen Shot 2014-09-17 at 21.52.45 (2)

Like a gallery it has a set formation and sticks to it, I have drawn on the image blue lines to draw attention to the fact that the alignment isn’t edge to edge like many, or even simply bordered, but instead is staggered which seems to improve the flow of content.

I found websites that don’t have visible grids, seem to be arranged in a grid formation and found examples of this on many websites, I have again drawn on the images to further illustrate the point I am trying to prove.

Screen Shot 2014-09-17 at 22.18.00 (2)

On the Apple (www.apple.com) website you find content on a grey gradient, while there are no visible borders to the girds. As this was such a common theme across many websites I was looking at I decided to dig a bit deeper into the world of grid layouts online. I came across the 12 column grid (http://960.gs) which just so happens to be 960 pixels wide, the idea being that you can have many sized boxes within the grid, as long as it follows the specified sized, like this image represents (http://www.qualitypressthemes.com/wp-content/uploads/12-column.jpg);

12-column

There are many examples of work that use this grid formation as suggested on the website. These consist of big websites such as Sony Music, right down to more unknown companies like Black Estate Vineyard. Having experimented on multiple devices, I have also realised that these websites are almost instantly mobile optimised by simply using such a grid layout, with a fluid formation, allowing the content to arrange itself by understanding the size of the display.