Learn Iconography

Icons are symbolic representation of the content in the website. Design is all about communication: it doesn’t matter how important or exciting the information that you’re sharing. When initially viewing a website, most users will first scan the page for visually interesting content, and only after something grabs their attention will they actually begin reading. Icons are a simple, effective way to draw users into the content of your website.

Icons serve the same psychological purpose as paragraph breaks: they visually break up the content, making it less intimidating. A well-formatted page, with text broken into easily accessible paragraphs and accented by icons, is easy to read and visually interesting enough to sustain the user’s attention. So, stop wasting time writing so much content that no one will read, and start using icons!

Here are some of the best practices of using icons to support content in web design. Please feel free to take a look at the showcases of navigation menus, search boxes, block quotes and web forms.

Icons make the user to understand the content design in easier manner. In simpler words, icons can reduce complexity in the content.

1.) Use simple and appropriate icons for the content.

2.) List features, characteristics, services and other listing information content can added with suitable icons.

3.) A UI designer must know placement of icons and where to use of icons in the content.

4.) Icon-size is more important. According to design elements, icon size can be fixed by designer. 
     a.) In case of header, icons can be in the minimum size of 15x15 to 25x25. 
     b.) In case of icons in content area, icons can be in the minimum size of 20x20 to 50x50.

5.) Simple flat icons and material icons are mostly  used in web design industry.

6.) Usage of icon web fonts in the webdesign in trending the web design and application layouts.

7.) Time to load icons and web icon fonts are very minimal and so the website performance is more better.

And that's all for iconography. If an UI designer follows these rules, the layout will rule the industry for long withstand. In forthcoming articles, we can discuss about other related topics in web design.


Source: smashing magazine

Recent Trends in Web Design - II

On previous post, we have discussed about Recent Trends in Web Design - I and the rest of them are as follows:

Users are Quicker, Websites are Simplifying:

Every person who ever surfs on internet has became web expertise. Most of net surfers don't hesitate to change or close website if it loads more than 5 seconds. So simpler website with neat content and self explainable images leads the webdesign market.

Fixed Sliding Navigation:

Fixed navigation bars can scroll down a page with you, reappear panel by panel, collapse and expand at the click of a mouse, interact with users as they browse, or skulk discreetly in the corners of the screen. For quicker response and navigation through various pages, this sliding bar is fixed to the window corner, mostly on top center or in the left side on browser window. 

Sticky Header Menus:

Navigation is one of the most critical components of a website. IN recent times, menu bar is sticky to the top of the page for easy navigation. Sometimes, the entire header is made sticky and fixed on the top which makes the user for quicker navigation, easy way to use all elements in header.

Flat and Material Design:

The hot current trend in web design which is followed by all is flat design. Few days before, web design has lot of components which has three dimensional effects such as gradient, larger drop shadows and textures in the background. But now, the design trend has changed to flat solid cool colors. What the users needs is simple straight colors with simple buttons and legible typography.

Circular Design Elements:

The design elements makes the design to feel comfortable. Circular design elements are widely used in most of websites to make style easier. Images, abstracts, buttons, topics are given within circular element to make the design more worthier.

Simple Ghost Buttons:

The trend of flat design also includes simpler ghost buttons. Ghost buttons are very simple, elegant with flat border colors with transparent background. The background color changes when the mouse over is done. This design element is started using mostly in all websites.

Custom CSS3 Animation:

The latest CSS3 properties is strong in the latest versions of all the major browsers - even Internet Explorer - and the possibilities for typography, animation and interactivity have never been greater. Usage of simple and mild CSS3 properties such as transition, animation, translate, rotate makes the design more richer. One of the modern effects in web design is the scrolling page element animation. When a visitor scrolls down the page elements will fade-in or slide into view from off-screen.

Flat Icons:

Whether it is an application or website in a desktop or mobility, icons plays another crucial role in designing. Earlier icons are larger, gradient colored and thicker in border. Now the icons has evolved to the latest trend of web design. Thin border and smaller icons with flat colors rules the design layout. UI Designers have also started using icon fonts for most of vector icons and images used in application and website.

Changes are the only things will never be changed. Likewise, design will be changed every time periodically as per the trend.