Less is More: The Fundamentals of Minimalism in web design

Less is More: The Fundamentals of Minimalism in web design

Minimalism with Depth in web design

Minimalism is about simplicity in web design, do not mistake this for plain or boring designs. A website can be minimalist but still eye-catching and beautiful. There are hundreds of ways to make a minimalist website more exciting, this includes splashes of colour, animations, transitions between pages, videos and high resolution photographs. With the right balance, you can keep a website simple and straightforward, but with an element of beauty.

Here are some great examples of designs that have minimalism with depth:

 

Screen Shot 2014-08-12 at 16.49.25 (2)

grimouville.francebleu.fr

 

Screen Shot 2014-08-12 at 16.49.31 (2)

genau-moebel.com

 

 

White Space

When we look upon white space, the eye is immediately drawn to the object/s within it. Therefore the rule stands: The more attention you want an object to get, the more white space it should have surrounding it. Never underestimate the power of negative space. It can be so easy to think that by adding more into an empty space, we are creating something more aesthetically pleasing. Or that this can be achieved by cramping together the objects already contained in the design. It’s fairly safe to say that this is usually not the case.

Here are two examples where white space has been used very effectively to create beautiful websites:

 

Screen Shot 2014-08-12 at 16.28.33 (2)

www.guillaumejuvenet.com/#home

Screen Shot 2014-08-12 at 16.22.48 (2)

www.agnes-cecile.tumblr.com/

“Less is More”

When we think of minimalism we think of this phrase. The key to minimalism is to create something simple, striking, appropriate and memorable. It is very easy to go overboard in the world of design, and adding several good ideas to one piece does not often lead to one great one.  It is often the most simple of designs that will achieve the desired affect, but this can be very difficult to pull off. Sometimes it seems almost impossible to have a design that is simple, but not plain and boring. This means we often feel the need to add more text, more graphics, and more colour – but we often tend to find that this is not always the best approach, and can leave designs looking tacky and aged.

If I were to show you this image, you immediately know the company without any text or colour needed. Apple are a great example of a company that has mastered the art of minimalism.

 

Apple-Logo-apple-41156_1024_768

 

 

 

Allignment and Balance

An important element within the minimalism movement is the balance and allignment of the design. It’s usually very clear when a design works and when it doesn’t, and balance plays a huge part in this. For example, nobody wants to look at a site with all of the graphics and information on the left hand side, and lots of white space on the right. It just doesn’t have a nice balance, and this is even more important when we look upon minimalist designs. Because there is often such a small amount of elements to the page, it’s really important to ensure the page is nicely balanced and the objects are appropriately alligned.

This site is a really nice exapmle of a well balanced page that does not contain a lot of elements or objects:

 

533c54111e6c5

 http://dieze-sixzero.com/

 

 

Illustrator and PhotoShop Tutorial: Draw yourself as a cartoon

Illustrator and PhotoShop Tutorial: Draw yourself as a cartoon

In this tutorial I will show you how to draw a cartoon version of yourself from a photograph in Illustrator and PhotoShop. The final image will be a vector illustration and I will demonstrate how to use the pen tool and several Calligraphic brushes to create your image. I think they make a nice avatar for social media.

1. Preparing the Image: Open Adobe Illustrator and create a new document with File > New. I have chosen the image dimensions 800px by 800px.

1

 

 

2. Drop and drag the photograph of your choice into your document, or use File > Place to place the image into the document. I’m using a picture of my purple-haired self.

2

 

 

3. Double click the layer and tick the “Template” box. The image will be locked and the opacity will be at 50%. This just makes the image easier to work with, and we can change the image back later if we need to.

3

 

 

4. Now we need to choose the brush we will use. I have downloaded this collection of hairbrushes from here: http://www.artjunks.com/exclusive-free-illustrator-hair-brushes/I have changed the colour to black and the thickness to 0.5px.

4

 

 

5.Create a new layer, and using the new brush, draw around the outlines of the photograph. This is very easy to do using a graphic tablet pen, but I have just used a mouse. The image isn’t going to look great at this point, but it gives you an idea of where to begin.

5

 

 

6. Hide the first layer to see the lines you have drawn, this makes it easy to see if you have missed anything.

6

 

 

7. View the first layer again, use the eyedropper tool to select an appropriate skin colour. Create a new layer in between the first layer and second layer. In this layer, use the Basic paint brush to fill in the face and neck. Avoid going over the lips, eyebrows and eyes. It doesn’t need to be neat for the time being.

7

 

 

8. Create a new layer above the last one you created. Use the eyedropper tool again and do the same for the hair. It’s still going to look quite messy for the time being.

8

 

 

9. Using the hair brush tools with about 4 or 5px thickness, choose lighter and darker versions of the colour you have already chosen. Going with the direction of growth, add some shadows and highlights to the hair.

9

 

 

10. Create a new layer, above the skin layer but under the hair layer and black lines layer. Start with the whites of the eyes, build with the iris, then the pupil, then the lashes, then the eyebrows, and finish with small white light reflections in the eyes. Make sure you’re careful with the order in which you paint sections of the eyes. Use the hair brush at about 0.5 thickness for the lashes and eyebrow hairs.

10

 

 

11. Remove any unnecessary black lines from the second layer we created. (Excess lines around the eye, black eyebrow lines).

11

 

 

12. For the lips, you may want to use a basic brush. Use the eyedropper tool to select different shades in the lip colour. Remove any black lines from around the lip line; the mouth line in the center is okay.

12

 

 

13. Select the black lines that outline the nose, by holding command/control as you click each line. Double click the color picker, and choose a darker shade of the skin colour you have used. This creates a softer shadow rather than harsh black lines.

13

 

 

14.At this point, you can remove the first layer (the photograph). Lock every layer, apart from the second layer we created with the black lines. Remove any excess lines that will now look out of place.

14

 

 

15.Export the file, by going to File > Export and select PNG as the file type.

15

 

 

16. The file will now be a transparent vector. Open the file in PhotoShop. Use the Crop tool to give the image some space.

16

 

 

17. You can now rotate the image, change the background colour, add text, anything you like!

17

Well done!

You have now created a cartoon-ish version of your image. Thanks for using this tutorial, I hope you enjoyed it and found some new skills.

 

collage