KNOW ABOUT STANDARD WEB DESIGN BASICS

Now a day, website design is an essential part to build a company’s image, brand, and advertising, marketing and public relations campaigns.

In many ways web design is very similar to print design. All basics are same. Understand space and layout, handle fonts and colors, and put them all together in a way to deliver message effectively. Also, in order to apply  standard web design basics, it is important to understand how users think, interact and what are the basic patterns of their behavior with web-sites

Before proceeding further, we should know about a brief of Wireframes & Mockup.

What is Web Wireframes?

Helps to show how a web page would look like without using any graphics or text, a simple visual guide is used. Before starting a design work, web wireframes are a great way. Start planning with a napkin and a pen and create complex wireframes with huge amounts of detail.

Web page wireframe includes:

• Primary graphical elements in boxes
• Headlines and sub-heads
• Layout structure
• Calls to action
• Text blocks

Web wireframe is like an architectural blueprint; to see & understand in two-dimensional black and white diagram before building the actual house. Similarly web wireframes are used for a screen design, before start building pixel layers in photoshop, or writing blocks of code without knowing where the information is going.

Build on the wireframe with dummy text, color, graphics and polish, and adjust layout slightly adhering to the general guide of the wireframe.

What is Mockup??

A refinement of the conceptual user interface design, which results in a more or less realistic, though static simulation of the user interface.

Graphic or visual design requires specific points of attention and skills. A graphically finished mock-up can be used to explore design ideas which may not validated technically. Mock-up can be considered as a realistic illustration of the interaction and presentation principles.

Mockup in Web Design:

To make a website, it would be wise to have mockup close to the final product. This can be done by placing dummy content and pictures into the design. Although it is a time consuming process, but it can help to visualize how the design will look like with text and images on it.

For Effective Mockup Design Processes:

• Ask information about your customer industry & taste like key elements need to be included, favorite color, pages need to be seen in the navigation, any specific images & logo to be used.
• Ensure clarity and focus about a specific Idea and design concepts.
• Check out reference designs sites if asked to design for an idea.
• Once all above blueprints are approved by client, create a focused & polished mockup.
• Client approval comes more easily if the mockup is presented with thorough notes on design are strong and represented well.

The Elements Of Webdesign

Are the building blocks. In every design there are five basic elements:

• Lines and Line-work:Lines include borders and rules, can be horizontal or vertical and help to define the spaces around elements on Web pages. The readability of the design improves with Line-work.
• Shape:It makes up any enclosed contour in the design. On most Web pages shapes are square or rectangular. But they don’t have to be. Images can be used to generate other shapes within a design.
• Texture:Gives a feeling of surface to a design. Texture is all visual on Web pages. Natural or artificial textures can also be used to get the effect in designs.
• Color: is the most aware design element. Still it is not a required element of any design. Before planning a good design, create the design without color first then enhance the design to add a little color.
• Direction: gives motion to any web design. Mostly, there is a sense of movement in a direction across the design. In a deliberate fashion good design lead the viewer eye through the design to understand what the designer wants.

The Basic Principles of Webdesign

States how to put together design elements in an effective manner. These principles help to build more pleasing and useful designs.

• Balance: is the heavy and light elements distribution on the page. Larger or darker elements appear heavier than smaller or lighter elements in the design. Balance helps to make working layout of pages.
• Contrast: is not typically of colors or black and white. There is more to contrast than color. It can be applied on shapes (square vs. circle), or sizes (large vs. small), or contrasting textures (smooth vs. rough).
• Emphasis: In a design emphasis is how an eye drawn to in a design. As a designer one should determine the page hierarchy and then the emphasis should be applied to the elements.
• Rhythm: states repetition. It brings an internal consistency to Web designs. Repetition provides patterns to make website easier to comprehend.
• Unity: states proximity. It keeps like elements together and diverse elements further apart. Unity pulls elements together.
• A web-designer should try to focus on & remember some key points to make the site as user-friendly & convenient as possible. Site should load quickly and deliver all that the viewers want.

Go through following best tips to improve web pages & make it interesting in reading:

Faster loading of pages:

No matter how fast the average internet connection is for readers. The primary focus for a web designer to improve web pages should be to make them load as faster as possible, so that readers will stay longer.

Pages should be as long as required:

People when first get to a page, usually skim online. The contents of page should give them quick & enough detail.

Easy Navigation on Pages:

Navigation on web pages must be clear, direct, and easy to use. For a long page, use anchor links to help readers find their way on the page.

Use sprites and small images:

The download speed is more for small images than the physical size. To speed up site images, CSS sprites can be a very important way. Use sprites to cache the images if several images are used across several pages on a site, so that avoid re-downloaded on the second page visit. There could be a huge speed enhancement with the images stored as one larger image reduces the HTTP requests for a page.

Use appropriate colors:

Colors are always critical for web pages, as using the wrong color can have the wrong connotation according to specific region in the world. So, a designer should be aware of what color choices should be used internationally on a web page. While creating a web color scheme, color symbolism should be kept in mind.

Think local and write global:

As websites are global, make sure currencies, measurements, dates, and times are clear so that all viewers know what exactly you mean.

Spell correctly:

‘Spelling errors’ are intolerable to the most viewers. One simple spelling error like ‘teh’ instead of ‘the’ can get irate some customers. Seem unfair, but most of the people judge websites by the quality of the writing.

Links must work:

Broken links is an indication that a site is not maintained. So, nobody want to stick around on a site that doesn’t care for it? Take help of HTML validator and link checker to check older pages for any broken links.

Pages should have contact information:

Putting contact information on a site helps viewers trust you. If there’s a problem & an email address or phone number mentioned on a site then they will definitely contact you. Follow up on it. It is the best way to create a long-lasting customer by answering your contacts.

White space or negative space between the elements is a space that could (and should) be filled with content to get people to read, click, and buy. It serves a important purpose, as it sets the tone of a design and also dramatically affects the usability.

In a design white space is the spaces around elements to help them stand out or separate from the other elements. This includes the space on the edges of a fixed width layout and the space in the margins and padding around pictures and blocks of text. It also includes the space between lines of text and letters in words.

It is not necessary that the white space have to be white. White space will be black, if the background color of a design is black.

White space characters are that don’t print anything when type them, for instance: tab, space, and carriage return.

White space is used in two ways in design:

a)Legibility:

At the micro level (leading, kerning, and tracking) white space can improve or destroy the legibility of a Web page. If a lot of content need to get across in a small amount of space, we can increase the leading or tracking to make the text easier to read. As in some international Journals, the paper has many columns of text with a little margin or padding around it. So, the space between the lines and letters makes the columns readable.

b)Tone:

At the macro level white space can convey a sense of elegance or quality to a design. A design may seem more expensive and of high-quality if there is more white space. As in expensive women’s magazine, most advertisements have very little non-negative space. It Leaves more room for background images with small text, and very few elements on the page. In contrast, direct mail advertisement sees large blocks of text covering multiple images and very little negative space.

If you want to play with White Space in your designs, start to create design in two ways: one with lots of white space to convey an elegant tone and another with very little to convey a more down-market tone. Use the exact same elements in both designs, just change the spacing between them.

Now, feel free to present what you’ve created as a Web Designer.

Going through all above information definitely encourage you to get involved with the website designing. For more information, feel free to send us a query on REACH US !

Glossary

http://webdesign.about.com/od/webdesignhtmlatoz/a/blglossary.htm