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

Flat Design & Material Design

When an UI designer is asked for a design layout, probably he/she would prefer for a flat UI design. Nowadays, this flat design has been overtaken by material design.Some people says that, material design is adapted from flat design. In designing, we refer to a word Skeuomorphism, which means adapted or inspired from other design.

So, What is flat design and material design?

FLAT DESIGN:

Flat Design is a design which has solid cool colors with removal of stylistic choices such as gradients, textures, drop shadows and 3D or realistic views. This design is mainly focused on detailing of icons, typography and color. Flat design is to explain the advantage of the internet’s unique properties and its users’ needs with simple buttons to make design more efficient, straightforward color schemes made for fast identification of elements, and simple icons.

Simpler words, it guides the user by its color, design and icons. In addition to this, it speeds up load times and looks just as good on high or low resolution screens, resulting in a more reliable user experience. As such, it makes things much easier on both designers and users.

Pros of Flat design:

1.) Simple colors, shapes and icons is adaptive, fits to all device resolutions and in also easy in responsive design.

2.) Flat design helps the user in avoiding unwanted graphics, gradient images which affects the site performance.

3.) Using flat icons, design and simpler layout, user can easily overview the concept or content which is given in the website.

Cons of Flat design:

1.) Simple colors, shapes and icons will restrict the design to a particular limits, so there will be lack in creativity.

2.) Unable to differentiate between buttons and other static vector shapes due to non-realistic stylish views.

MATERIAL DESIGN:

Material design emerges out from flat design which has simple colors separated with lighter drop shadows, bevels and slight animations. Texts are bolder, graphic and intentional. Develop a single underlying system that allows for a unified experience across platforms and device sizes. Material design is a set of design standards guidelines developed by Google and has good number of unique and interesting features, the use of the Z-axis being one of the prominent ones.

The material environment is a 3D space, which means all objects have x, y, and z dimensions. The z-axis is perpendicularly aligned to the plane of the display, with the positive z-axis extending towards the viewer. Every sheet of material occupies a single position along the z-axis and has a standard 1dp thickness.

Pros of Material design:

1.) Material design comes with set of standard designed rules and built-in animations so that user need not to handle manually.

2.) It gives unified user experience across all devices which adds to user friendliness.

Cons of Material design:

1.) Since material design has built-in design elements and linked to Google, it is little bit harder for UI designers to showcase their website as a unique design.

2.) Material design has lighter animation effects which may vary in frame rates in cross browsers and drain the mobile battery soon.

3.) Forcing UI designers to use defined rules may lack in creativity in design.

Source: google material design, one extra pixel, designmodo 

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.