Web Design: How to optimize the use of images

  Nik Oliva   None

 

optimize the use of images

Many websites use many forms of multimedia and imagery that are both appealing and functional. Images are the photographs, digital artwork, charts, etc, that you will use on your web site. The only problem facing many web designers, whether they are professionals or amateurs, is to ensure that using images should be done with careful thought and consideration.

The lack of knowledge with this basic principle is entirely dangerous for a design, it might decrease your chances to sell, in case you have a call-to-action page, or the chances to create good reading flow.

Following these tips will ensure your images will enhance the user’s experience, increase conversions, help with branding, and improve visual appeal of your website.

Image Formats. Use the correct file formats when exporting or saving images for the web. Here are some summary of the images types found on the web:

  • GIF. An older image format great for legacy compatibility web sites. Great for short, small animations, such as web advertisements. A decent choice for line art. Use GIF for flat color.
  • JPEG. Commonly labeled as JPG, this stands for Joint Photographic Experts Group, so, as you guessed, is typically used with photographs, as well as complicated artwork and three-dimensional renderings.
  • PNG. This format is now in widespread use across the web, and actually handles both simple artwork -and- photographs fairly well. PNG uses an alpha channel for a range of transparency.

Monitor. Working on a monitor set to a higher level of brightness will be easier to see detail, but there is the risk of losing highlight and shadow detail. Ensure the brightness is set between 90 and 120 cd/m2. When the imagery is displayed on a brighter, higher- contrast display, this will enhance the image.

Purpose. Images can not only guide the user’s focus, but also explain a lot about the product in just few seconds. Images that are included in a web page for the sole purpose of filling white space doesn’t help anyone. The image should relate and showcase the product or service clearly.

File Size. The final stages of image preparation should be scaling the image to its final size and applying an appropriate level of ‘Unsharp Mask’ at 100 per cent of its size. The images must get through Photoshop’s Save for Web & Devices function, where you can decrease the size of the picture without decreasing the quality too much If you aren’t careful, your site’s dependence on images can actually make the user’s experience worse because it slows down their ability to engage with the site.

People. Studies show web designs that include people are more persuasive than those without. But some website feature beautiful models, they tend to be the focus instead of the product. Models, instead of drawing attention towards the product, steal the attention and draw it towards themselves.

Copyrighted Images. Copyrighted images need prior permission from the owner to publish it on a website. Using images that are copyrighted or used for commercial purposes without payment can lead to large lawsuits, even if the site does not make the owner or designer a large amount of money. Purchasing images can be easily done through the web or with companies that sell stock images on cd-rom disks. You can also use public domain images that are also available without restrictions. These images are allowed to be used usually without restrictions. Always be sure to read any conditions placed on their use.

 

Using images the right way is very important if you want to have a successful website, especially when your goal is conversion. Don’t just use images for the sake of using images. Keep in that images are not always the solution for your website’s problems. Sometimes your website shouldn’t even have any images.

 

Typography Tips in Web Designing

  Nik Oliva   None

Typography Tips in Web

Typography is the art of designing letters, words, paragraphs, and how they interact with each other. It can be one of the most creatively rewarding parts of web design, but it can also be one of the most frustrating. Many web designers tend to overlook the typography area and focus more on their overall design while ignoring it altogether. With that in mind, the website design ends up looking incomplete.

To be effective on a Web site, typography needs to be: clean, clear, appealing, and readable. Good web typography can attract, engage, and keep your viewer on your site. Below are a few techniques to get you off on the right track!

Size.  Type size is one of the most important factors when designing with type on the Web. Small type is hard to read at the lower resolution of most screens and monitors. It’s important to make the main body of text a suitable size so that it is large enough to be readable, while not becoming too big and ‚”shouty”. Generally, most text should be set between 12 and 16 pixels, with variations in headings and menus. Texts must be legible across a range of screen sizes, including mobile phones.

Hierarchy. Hierarchy is a key factor in providing importance between texts. When using this method, conveying the important messages is key without overcrowding the readers and viewers with “too much” important information. Establishing a distinguishable and relevant hierarchy allows readers to easily scan your website and allows them to pull out which information is most important or secondary.

Grid. A well-planned grid can form a solid foundation on which to design a website, with content laid out neatly and logically for accessibility and visual balance. Having good layout helps to improve readability and scalability for your readers. Pages should be divided into a system of columns, rows, menus, headers, sidebars and footers, guiding the user’s eye smoothly to the important content and navigational tools.

serifvssan

Serifs with Sans-Serifs. You may not know the difference between sans serif and a serif font. Serif fonts have accents (which often look like dots) added to the strokes of the characters. Sans serif is the opposite and each of their characters are clean.

Many sites use a mixture of serif and sans-serif fonts for headlines and body text. Serif fonts for headlines and sans-serif for body text can provide good contrast between the two. With the size and resolution of monitors these days, it doesn’t really matter whether you use serif or sans-serif fonts for your body text. But don’t switch between them, especially within one paragraph or sentence.

Color and Contrast. Create high contrast between the color of the type and the background. the color contrast between the background and the foreground text or typography should generally be quite significant to keep things apparent, like black on white, or white on blue. Achieve this by selecting light, neutral backgrounds for darker type (and the reverse). Avoid placing type on a busy background, which can make it hard to read.

colorcontrast

 

White space. Leave a good whitespace gap between sets of text to keep other bodies of text the viewer may not be reading out of focus from what they are reading. Crowding type (as well as other elements) can make a Web page less inviting, more difficult to read, and just plain confusing. Remember, spacing is key to good readability, so use whitespace wherever needed.

Proofreading. Typography is not always about how it looks from a design perspective but also how it appears in clarity and readability when it comes down to actually reading the text. Assure the typography is clear, well spaced, and organized for the general audience to easily read through.

Designers should be aware of the general principles of typography, and be bold enough to experiment and contradict the rules to produce innovative and beautiful web pages. If you apply each of the tips I have shown you to your text, you will be better off for it. Please take a moment to leave a comment below and tell us what to think and of course feel free to share your own tips and tricks!

 

Balance your Web Design

  Nik Oliva   None

 

Balance your Web Design

Every layout begins with a blank page or an empty space. When we add an element, its placement can be determine how successful the design will be. Effective design initiates communication and an interest from the viewer whether it’s in print or on the web.

Visual Balance is a key element to making a website look good. It is basically just balancing design elements off of each other – as if your design elements are sitting on a seesaw. As an added advantage, a balanced design goes well with functionality. We relate things to the natural world, and a natural balance will allow our eyes to see what we’re supposed to do in our design.

To understand balance, think of the balance beam. When objects are of equal weight, they are in balance. If you have several small items on one side, they can be balanced by a large object on the other side. Visual balance works in much the same way. It can be affected not only by the size of objects, but also their value (ie. lightness or darkness, termed visual weight).

These are the different types of balance: formal, informal, and radial. Formal and informal balance may also be called symmetrical and asymmetrical respectively.

Balance your Web DesignSymmetry. Symmetrical balance is mirror image balance. If you draw a line through the center of the page,the elements on one side of the line are mirrored on the other side. We can achieve it by placing elements fairly evenly in the design. It is also called formal balance because a form (formula) is used –mirror image about a vertical axis. The results look formal, organized and orderly. Symmetrical design balance is easy to see and relatively easy to achieve.

Asymmetrical balance. Or informal balance, is a little more abstract, and generally more visually interesting, than symmetrical balance. Rather than having mirror images on either side of the layout, asymmetrical balance involves objects of differing size, shape, tone, or placement. The elements in asymmetrical design will have more complex relationships between them and the overall design will use more white space to equalize the balance. Asymmetrical design evokes modernism and feelings of forcefulness, vitality, and movement.

Radial Symmetry. This occurs when elements are equally spaced around a central point. In design, it can be used to portray motion or speed. In design, this kind of symmetry can be employed to provide a feeling of movement.

Symmetry is used to deliver a trusted and neatly organized message. It’s good to use symmetry as an organizing aspect in website layout. Use these concept to keep your design balanced as you add more elements. Apply the following tips when planning a layout:

  • An element on the right side of your layout has more weight than the very same element on the left side
  • Texture is heavier than no texture. The denser the texture, the heavier
  • The more you isolate an element the more weight it has
  • Never put any element in the corner of your page or in the corner of another element
  • Bigger areas are heavier than smaller areas.
  • A stronger border is heavier than no border or a thin one.
  • Colors like red and orange are heavier than calm colors like blue or green.

At the end of the day, it is you, the designer who finally decides which is better for your design. The use of balance in design can be a very powerful tool. When using symmetry, the result is one of order, cohesion, and professionalism, whereas asymmetry lends itself of interest, character, and uniqueness.