How to find inspiration and design the layout of a website?

Welcome to the 4th article of our guide. We have reached a crucial point in our project, which refers to the creation of a graphic layout. Website design is no easy task and one must confront many unknown variables such as: finding inspiration, representing it graphically on the site, finding the right balance between form and function. Let’s stat from the very beginning.

Here you can find a wireframe -created in a previous article- as well as the concept and structure of the website we are developing:

You will be responsible for creating a website that has an efficient and great-looking graphic layout, based on the wireframe and the directives you received on the colors and images chosen for the website. Where do we start?

Find the right inspiration

A blank page or screen is very intimidating, even for experienced professionals. Even if you don’t know where to start, don’t despair. Finding inspiration is a long and tortuous process that can be separated into three distinct phases. Let’s look at them in detail:

Phase 1: Searching

The proliferation of many css galleries has been advantageous for graphic designers. Designers are now able to browse through an almost limitless number of layouts, learning a trick or two in the process. It’s pointless to list all the galleries, there are so many of them and most of us are familiar with them. However, it is advisable to go here to take a look at an updated list of all the css galleries. While you browse through the gallery, most likely you will run into something that might be useful to use in one of your projects, such as colors, images, concepts, or text. Keep a note of what you feel are the most ‘adaptable’ elements.

Word of advice: Don’t spend too much time on this initial phase. You could end up altering your design, creating something that is graphically similar to another website, which would mean it is a mediocre attempt in copying a design we like. A general rule of thumb is that if one tries to copy someone else’s style, inevitable they will end up with an imperfect copy of the original.

Generally it is best to jot down whatever you are brainstorming during this first phase. Even if it’s nothing more than a simple sketch, it will replace the void and allow you to visually organize your ideas.

Phase 2: Express yourself in detail

Judging from experience, I can tell you that once you have found the right input, the rest will follow without much effort. Once the graphic structure is in place, you will have to work on the details. Fonts and typography in general, the positioning of images and other content, and additional aesthetic elements, will be beneficial in making your work look original and pleasing to look at. This phase should not be overlooked: for instance, choosing the right font can take a lot of time as well as being quite a complex endeavor.

Phase 3: Take a break

It can be very frustrating to wait for an idea if it never materializes. At this point then it is useless to stay locked in front of a screen. While considering deadlines and other requisites, it is best to take a break: sleeping, going for a walk, taking a shower, talking to a friend. Any one of these activities is beneficial to you as long as they have nothing to do with web design. Furthermore, it is of no use to feel guilty for not being glued to your computer 24 hours a day. A graphic designer must accept the fact that intuition comes and goes on its free will, so one must be patient.

We have found our inspiration…what’s next?

You can unleash your fantasy by transposing your ideas onto a graphic layout using any photo-editing program (Photoshop in our case).

Let’s open the program and create a new document that is 1680 pixels long, 1200 pixels in height with a resolution of 72 dpi.

1
Even if we have set the length to 1680 pixels (so that it looks great on a 21-inch widescreen display) it is essential to have additional content set to 960 pixels. This is helpful for users who use a lower resolution (keep in mind that only 5% of all users still use a resolution that is lower than 1024 x 768) so that they will not have to scroll vertically to see the entire website.

There is a simple calculation that must be done: we will subtract 960 pixels from the original 1680 px, then we will divide this remaining figure into two, so that the additional content to be included can be centered. To set limits, we will insert two guides in this document.

Let’s start by adding some color to the page. First we are to draw two lateral sections with the rectangle tool: the right-hand section being of 426 px and the left-hand of 654 px. Then let’s color these sections in orange (#ff7c0b;) since we will be using warm colors throughout.

arancioni

To create a good contrast level, let’s insert a pattern that is granular and paper-like in the right-hand rectangle.

The pattern can be applied by double-clicking the level on the rectangle, which will open the style levels window and then by selecting the “Pattern overlap” option.

4

This is the effect we get:

3

Let’s draw a roundish rectangle (with a radius of 20°) in the middle of the white section. This rectangle is set to have a length of 560 px and a height of 232 px. This will be our header in which we will place an image representing our client’s business.

51

Word of advice: If you have just started working with Photoshop, you should remember to rename all the levels and learn to keep them organized. A graphic project can build and use hundreds of different levels, so it is best to keep them organized in a neat and accessible manner.

6

Before proceeding any further, let’s look for some images that we can use in our project. Personally, I find Fotolia to be a great place where one can find and purchase inexpensively photos and images that have a very high resolution. Also, as it was noted in this article, it is best not to use low-quality images or images taken directly from google images.

Based on the research done, we have chosen the following images that -as it was previously defined in the brief- depict children playing, laughing, and having fun. These images, needless to say, share a certain affinity with the world of children.

foto

When you are choosing images, remember to trust your instinct and go for images of a certain color or subject-manner that you feel are appropriate. Keep a large selection of images, Don’t worry, eventually you will be able to narrow this selection down, keeping only the best ones for the website project.

We can now add the photo of the baby with the plush toy in the rectangle containing the header. First we have to resize the photo so that it is of the same size as the rectangle (or a bit bigger, just by a couple of pixels). Once you have resized the image, click on Edit >> Define pattern to save the photo as a new pattern which we will save as “baby header”.

pattern

To apply the pattern, let’s go back to our initial document, open the style level window containing the rectangle of the header and select “pattern overlap“. From the list of available patterns you can select the one we just created and apply it to the site.

pattern2

As you can see, this image not only does it convey the client’s activity, it also highlights the color orange we chose for the background. Remember that a good color scheme can be the key to creating a great-looking layout.

Adding images

The picture of the painting child is going to be added on the left-hand section, to create an original effect. It will seem as if the child is painting the site background with her brush. To enrich the page even more, we can draw some simple sketches using doodle brushes that are found on the internet. Little houses, flowers, small birds…remember this is a nursery website so you can even exaggerate a bit with pictures and colors.

On the right-hand part, let’s insert the image of the child carrying the banner: it can become useful later on.

31

To soften the opening and closing of the website, let’s add a bunch of white clouds, which will enrich the look of the page. It will also give us the chance to create, in the upper section, a blank space where we can add the nursery’s logo. (Remember that the logo has to be visible, positioned on top of the page, preferable towards the left.)

Clouds can be added through a variety of methods: those artistic enough can use the pen tool to draw them manually, otherwise you can find various brushes and shapes that can be of use. Here we have used these brushes. Let’s draw a big cloud next to the head, where we will insert the logo.

41

Curing the typography

Our website is coming along nicely. Let’s add some content using the classic Lorem Ipsum. We will use verdana font 12 px with a line spacing of 21 px.

Word of advice: Don’t just copy and paste the lorem ipsum. Try to format the text using a bold outline, a list, or by dividing it into various paragraphs so that it will resemble the website in its final form. How is the end result? Is everything clear? Is the text aligned properly with the right set of margins? Once the text is formatted, it will be much easier to spot typographic errors, if there are any.

To keep all the page elements in harmony, we have aligned the contents with the photo header, leaving 20 px of margin on each side. Consequently, the page now appears more balanced.

61

At this point we can choose the font to use for the page titles and for the navigation. The contents of the site require a font that is web-safe. However, for titles and navigation we can let our imagination run wild and choose any type of fond since we will be exporting everything as an image.

Let’s look for a playful font that would fit in with the graphics of the site. There are many fonts to choose from and in this case, we will go with the ”Cocktail bubbly” font for the navigation menu and “Bellerose” for titles, which will evoke the font used for the logo.

62

Word of advice: Use the guides to make sure all the elements are properly aligned and properly divided from one another. If “home” and “nursery” are separated by a margin of 30 px, all of the other links should be separated by the same amount as well.

Let’s be a little creative and use the photo of the child with banner to express a specific idea or message. We could add anything such as a slogan, a company’s info, or anything else. In this case we have decided to add show the telephone number of the nursery.

8a

We can make the banner appear more lively by using different colors for the text and by adding an outer border of 1 px that is of a brighter color (style levels window >> Trace).

8

The photo gallery

In the wireframe we saw that a photo gallery will have to be added to the homepage.

We will add the title, “Photo gallery” to this page in order to divide the text section from the photos, so that users will realize that this is a section of its own.

Let’s draw a set of small, roundish rectangles using the rectangle tool. This round shape is ideal to evoke the roundness of the image placed at the header. Afterwards we will be able to create thumbnails.

gallery

At this point, let’s open the photos to be added to the thumbnails, and just as we did for the header image, let’s resize them to fit inside the rectangles. Then let’s click on edit >> Define pattern to apply the pattern to the rectangle in the gallery. Let’s repeat this step for each photo until each rectangle will house a different photo.

gal2

We are almost done building our website! Do you want to see how it turned out?

9

Finishing touches

Our layout looks nice, but it seems as if something’s missing. Don’t you think the side sections look a bit empty? Then, let’s enrich them with some graphic additions.

Let’s add some balloons of varying shapes and colors to the background using a specific font, SF balloons.

In the section that contains a paper-like effect, let’s add the balloons in a way that they appear to integrate naturally with the background.

In order to do this, we can select the “overlap” function (Style levels window >> fusion options) so that the background color of the balloon blends with the background of the web page.

finale3

This is the end result:

finale

Basically, users who have a screen resolution of 1024 px in length will be able to see only section A, while those who have a screen resolution of 1280px will be able to see sections A and B. And, following this sequence, users with a screen resolution of 1680 px will be able to see the entire picture (section C).


sezioni

Are you satisfied with the result? We have created a web page that is graphically modern, great to look at, and full of joy. Thanks to our keep eye for detail, this site will serve as a great online representation of our client’s activity, which will hopefully attract a new set of potential clients.

Did you see how easy it is to create a great web project once you have found the right inspiration? All you need is some practice and a good aesthetic sense.

Now that we have created a draft, we will have to present it to our client, making sure that he or she approves it without affecting the graphic layout.

How? You will find out next article!

The other articles in this guide:

  1. How to understand the client’s needs on the first encounter?
  2. How to calculate costs and delivery time of a web project?
  3. How to develop and organize the structure of a website?
  4. How to find inspiration and design the layout of a website?
  5. How to present the graphic draft to the client?
  6. How to make the internal pages after the draft’s approval?
  7. How to export a psd into xhtml and css without losing your soul? (part1) (part 2)
  8. How to index a website without being SEO experts? (part 1) (part 2)
  9. How to make sure of not having committed errors before launching the website online?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

52 comments

  1. FreeFly
  2. Antonio
  3. Ravi
  4. Tirath
  5. Asif
  6. Theo

Trackback e pingback

  1. How to calculate costs and delivery time of a web project? | Your Inspiration Web
    [...] How to find inspiration and design the layout of a website? [...]
  2. [User Link:How to find inspiration and design the layout of a website?] | Tips for Designers and Developers | tripwire magazine
    [...] How to find inspiration and design the layout of a website? [...]
  3. uberVU - social comments
    Social comments and analytics for this post... This post was mentioned on Twitter by yiw: RT @YIW How to find inspiration …
  4. 130+ Worth Investigating Fresh Posts for Designers and Developers | tripwire magazine
    [...] How to find inspiration and design the layout of a website? [...]
  5. How to present the graphic draft to the client? | Your Inspiration Web
    [...] How to find inspiration and design the layout of a website? [...]
  6. How to develop and organize the structure of a website? | Your Inspiration Web
    [...] How to find inspiration and design the layout of a website? [...]
  7. How to understand the client’s needs on the first encounter? | Your Inspiration Web
    [...] How to find inspiration and design the layout of a website? [...]
  8. How to design the internal pages after the layout is approved? | Your Inspiration Web
    [...] How to find inspiration and design the layout of a website? [...]
  9. Unusual but beautiful: make your design more creative with this 25 fonts | Your Inspiration Web
    [...] and funny: we’ve chosen to use this for the menu of the nursery website and we’ve made an excellent …
  10. How to export a psd into xhtml and css without losing your soul? (Part 1) | Your Inspiration Web
    [...] This is the our layout. [...]
  11. How to make a website without having a client dictate everything | Your Inspiration Web
    [...] How to find inspiration and design the layout of a website? [...]
  12. How to index a website without being an SEO expert (part 2) | Your Inspiration Web
    [...] How to find inspiration and design the layout of a website? [...]
  13. 60 Web Design Photoshop Layout Tutorials From 2010 - Programming Blog
    [...] 53. How to Find Inspiration and Design the Layout of a Website [...]
  14. 60 Web Design Photoshop Layout Tutorials From 2010 | pro2go Designs Blog
    [...] 53. How to Find Inspiration and Design the Layout of a Website [...]
  15. 60 Web Design Photoshop Layout Tutorials From 2010 « Huy Nguyen's Blog
    [...] 53. How to Find Inspiration and Design the Layout of a Website [...]
  16. 60 Web Design Photoshop Layout Tutorials From 2010 « Dizzy Blog
    [...] 53. How to Find Inspiration and Design the Layout of a Website [...]
  17. WinsomeWatches, Wireframes and Webdesign « Web Perspectives
    [...] I stumbled upon YourInspirationWeb.  This site has fantastic guides and ideas.  I’m working my way through the css tutorials. …
  18. TUT: How to find inspiration and design the layout of a website? | mmc blog
    [...] http://www.yourinspirationweb.com/en/how-to-find-inspiration-and-design-the-layout-of-a-website/ [...]
  19. 60 Web Design Photoshop Layout Tutorials From 2010
    […] 53. How to Find Inspiration and Design the Layout of a Website […]

Leave a Reply

Current day month ye@r *