Photo in Web-design

At first glance, Web-design and photography have nothing to do, and there is a completely separate from each other's creative direction, but it is only at first glance.
In web design, as well as in the photos are subject to the same rules of the golden section, the location of the main elements, color, tone, balance, and so on.

Web designers and photographers go one way - road work. Both in his work using a tool such as Photoshop graphics. You can continue to draw parallels between these two great professions, but today I want to talk about how and why to use the photo in web design.

web design and photo

It is hard to imagine the modern Web-site without graphic design and photography. One way or another, in one form or another, but the photo is an integral part of a modern web site or blog. And this is not surprising. The information presented on this site only in the form of text looks dull and uninteresting to the user. The presence of even small photos on page betray textual information more attractive and informative, keeping the reader on the page, provided that the text and images are thematically linked and complement each other.

Empirically verified that the text message is augmented images, the reader is better absorbed, and really like the search engines, which helps increase site or blog. For this reason, gentlemen bloggers use in their articles (unfortunately, not always legally) pictures and/or photos on relevant topics. Thus, the user gets more relevant information, and the blog, in turn, increases in the eyes of search engines.

Okay, but where is the Web-design? - You ask.
Yes, the site content and web design is a bit different, but only a little. Whether we like it or not, but the content of web pages is its main area. In any case, it should be. Based on this, raster or vector graphics complementing the text content is a powerful tool of perception and friendliness to the site as a whole. In its publications, I try to include a lot of photos in the material, or as in this case - the screenshots to give your readers complete information on a particular issue, which he wants to find here.

Communication graphic element design web pages with graphics content

web design, images and vector graphics

As an example, I made two screenshots of the home page of this site, which clearly demonstrated the relationship graphic design and content.

Look at the screenshot on the right. Here you can see photos of the relationship: some images are content, others - are the photos included in the web page design.

Some graphic design elements are integrated into the content - is an icon of a product displayed on the left in front of all titles. Graphic content elements, which here are previews of articles (left), and an on-line slide show (right), the visually perceived as additional design elements of Web pages, being only the content that its shape and tone associated with this design.

Combination graphic element with supporting color design

The screenshot below illustrates the relationship of different types of tonal design elements that are different in size, but linked the same tonality. This color combination works as a color proof of the web page design, connecting the lower part of the site with the primary. It does not matter what will be shown in these pictures, the main thing - the dominant color of these elements.

It should be noted that the background image in the footer, in this case - the image of the camera, does not prevent the readability of the text placed above it. Remember: you can not under the text "pass off" the image, which makes the text unreadable, but more on that in a moment.

Graphic content elements

Interdependence background images and content

An important factor in the perception of information on the Web page is a harmonious blend of background color and images, which, in turn, are surrounded by text content. If the pictures are quite large and colorful too, which did not have confirmation key in the design elements, they will distract the reader, that is not good.

But if the page contains only images, see the screenshot below, their tone may be what you like, because photos in this case - it is the only source of information. Therefore, the greater the size of photos - more in them. But do not abuse the size of images, as this greatly increases the weight of the web page with all the.

Interdependence background images and content

You may have encountered websites background which - it is one big picture. Major customers such designs - wedding photographers. Sites such cards have many photographers, and in general, they do not look bad.

The screenshot on the left shows a variant of the picture as the page background. Typically, such a background of the web site looks impressive and beautiful, but not always practical, see the screenshot below. The screenshot on the left, the background image (a white rose) for this page.

Content - pictures of different pitch, against this background that looks good as well as the background pulls no attention to himself. But here's the bottom screenshot, wallpaper hinders readability, which is very bad. With such a design, the text should be placed on a solid background, or at close to that, which is shown in the last screenshot below.

background images

In the screenshot below, the background consists of a small graphic that multiply, fill all background space web page. This technique is used by many web designers. This facilitates a web page compared to the use of large background images. Large backgrounds are quite heavy, which affects the loading time a web page from the server. These files must be qualitatively optimized, it is compressed before uploading to the server. If you want to apply a large background image on your website, it is necessary to select a image compression does not lose money, that is where no Jpeg artifacts, and if lost, it is not essential. Background images with visible Jpeg artifacts - is a huge minus design, and evidence unskilled web designer.

Background images with visible Jpeg artifacts

In the conclusion to draw your attention to a few important points to remember advise.
Proper use of photography in web design and content will bring your website or blog to a whole new level, using the above tips into practice, it will be easier to promote your website or blog in the top of search results. Try to combine the design of your site's beauty and functionality without compromising both.
Respect the work of others: do not use on your website/blog pictures and photos without permission of the author. Stolen content will not make you rich and happy, but the problem can add easily. That's all. Thank you for your attention.

Comments (not yet, Your will be the first)


    • Limit 2000 character

    • left:

More on this topic:

© Andrey Ko 2012***
How to choose a domain name for the site of the photographer
Section categories
  • All categories: 5

  • 3 949

Category
  • Author: Andrey Ko

  • 13.12.2012

  • 3 467