Visual Design

Visual design created based on wireframe or client requirements (input). Visual designs may use a combination of typography, Images, Animations, Symbols and Content. Usually I am using Photoshop and Illustrator software’s for visual design.  Visual design generally created for Web Design, UI Design, Application Designs, Presentations etc.,

Visual Design Essentials:

• Principles of graphic design
• Fundamentals of typography
• Foundations in layout, color, and Icons
• Creative Concepts
• Clear Content Preparation
• Best Navigation Architecture

Visual design is a creative method that combines art and technology to communicate ideas. The designer works with a variety of communication tools in order to convey a message from a client to a particular audience.

Wireframe

Wireframe is the visual guideline it’s signifying skeleton framework. It is a more valuable process method in any website and project. Wireframe design really more time saving process. The purpose is usually being informed by a business objectives and creative ideas. Wireframe can be pencil drawing or sketch on white board or using some software. Wireframe designs generally done my UI Consultant, User Experience Designers, Business Analysts etc.,

Wireframe Types

1. Low Fidelity
2. High Fidelity 

Low Fidelity

Low Fidelity is the basic wireframe concept. It will be use communication level and then quick development purpose.  Low Fidelity only information design based on that designer can start visual design, developer can understand functional level.     

High Fidelity

High Fidelity is the clear documented high level functional framework it will cover overall product and project lifecycle. In this document clearly explain UX, Usability and Development guideline. It will help to increase understanding and deliverable for both designer and programmer.

Elements of Wireframe

1. Information 
2. Navigation 
3. Design (UI Design, Visual Design, Interface Design, Mock Design)

Information Design

Information design is the detailed planning of design architecture. It will cover overall project or product necessary information. Information design should be meet user objectives. It should be content, plan, sketches, drawings or document.  

Navigation Design

Navigation stands out from the crowd, to be memorable. Users want to come back and use our interface or get in touch with it. So navigation is very important in wireframe design. There are several navigation procedure available like Card Sorting, User Centered Design Process Map, Organization Schemes, Organization Structure, Organization Content, Breadcrumb Navigation, Links, and Interaction. 

Design (UI Design, Visual Design, Interface Design, Mock Design)

Our design should be focus creative concept then only our designs talk to our users. First understand our audience needs. How they work, what they want, where the go, how they use it once you understand these concepts your design will reach globally. 

User Interface Design Principles

Our UI design should focus Creative Visual Design, Best interaction where ever need, Perfect information architecture. All these things are help to user use UI interface efficiently.

Best Design Practice

1. Create interface design simple and clear
2. Maintain consistency design elements in all the pages
3. Be focus design objective
4. Use default components and UI controls
5. Use trendy color themes and patterns
6. Choose best typography
7. Show status and progress information visually
8. Evaluate yourself once design done.

What is the User Experience?

User experience is focuses exactly what user want. What they require, what they capability and also should know their boundaries. Based on that we should think and deliver our products.  Then only we can reach our global client and achieve our goals. Best Usability and UX focus deliver a quality product in multiple platform, multiple devices and different region users.

 UX Factors 

1. Useful
2. Usable
3. Valuable
4. Desirable
5. Accessible
6. Findable  

 Useful 
 Our product should be focusing our user and user needs. Then only it should useful.

 Usable 
Our user interface should be easy to use (Website, Mobil apps, Games, Product etc…

 Valuable 

User feels our product is voluble one. Then only they can use and refer others also. It will help us product promotion. 

 Desirable 

Create a clear visual hierarchy of contrast, so user can see at a glance what is important and what is peripheral.

 Accessible 

All information easy to quickly scan and our content and navigation structure should be simple and accessible.

 Findable 

Important content and navigation should reachable.

CSS Tips

How to use CSS @font-face

You can use font directly on Web pages no need create images for different styles. @font-face only requires a few lines of CSS and is therefore very easy to use without any third party tools. Just copy past font files on your root directory and open your style sheet insert few line code.

Create @font-face for BRITANIC.

@font-face {
    font-family: 'BRITANIC';
    src: url('fonts/BRITANIC.eot');
    src: local('?'), url('fonts/BRITANIC.woff') format('woff'), url('fonts/BRITANIC.ttf') format('truetype'), url('fonts/BRITANIC.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

Assign BRITANIC through font-family.

Body {
    font-family: "Conv_BRITANIC", Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    font-size:17px;
}

@font-face browser support 

EOT - IE6, IE7, IE8,
TTF - Safari, Chrome, Firefox, ,Opera
OTF - Safari, Chrome, Firefox, ,Opera
IOS - 3.1 supports SVG
WOFF - IE 9, Chrome, Firefox

Online @font-face Converter

http://www.font2web.com/

http://www.fontsquirrel.com/fontface/generator

 

JQuery

JQuery really help to build powerful and interactive UI development

I really love jQuery features. It’s help me to develop more interactive and powerful UI designs. JQuery is a JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

You can download JQuery library files from http://jquery.com/. JQuery is open source library you don’t have to do anything special to choose one license or the other and you don’t have to notify anyone which license you are using. You are free to use a jQuery project in commercial projects.

How to use Jquery?

 <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript">
   $(document).ready(function(){
   // Your code here
 });
  </script>
</head>
<body>
</body>
</html>

JQuery Features

1. Events

2. CSS Manipulation

3. Animations

4. Ajax

5. Plugins

6. Interactions

7. Widgets

8. Utilities

9. Effects

10. DOM implementations

11. Cross-browser support 

12. Compatibility with languages

User Interface Design Fundamentals

1. Know your user

2. Pay attention design objectives

3. Stay consistent UI development

4. Communicate clear ideas

5. Improve your creative on UI development here and there

6. Get feedback

7. Provide your feedback

8. Clear your design

9. Become experienced yourself

10. Speak their language

11.  Keep going

Know your user 

Your user’s dream are your dream.  So get all about your user’s  skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them.   

Pay attention design objectives 

By using familiar UI styles, you will help your users feel better.  

Stay consistent UI development

Your UI design should be consistency. Then only users can better understanding of how things will work, increasing their efficiency.  

Communicate clear ideas

User interface design important for every development. .. often have some good ideas as to how the user interface should be developed. .... communicating clearly and simply in the user's own language, and providing good output.  

Improve your creative on ui development here and there

Visualize your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface.  

Get feedback

Get you users feedback both right and wrong or misunderstood. No matter how clear your design is, people will make command. Your UI should allow for and tolerate user view.  

Provide your feedback

You are a creative professional, not a laborer. You know the UI desing better Than they feel. So keep your dream and focus your user needs.  

Clear your design

Whenever you are thinking about adding a new feature or element on your interface, ask the question, “The user really need this?”. Make simple and clear UI interface

Become experienced yourself

Where am I?, What can I do here?, What can I do further? - Try to answer these questions instantly. If you can convince your user that this is the right UI for them in the first couple of seconds, they will surely dive deeper.

Speak their language

Make clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won’t hear you – they will hear themselves.

By using familiar UI styles, you will help your users feel better.  

Keep Going

When developing interfaces that you need to fail fast, and iterate often. When creating a UI, you will make mistakes. Just keep moving forward, and remember to keep your UI out of the way.