Useful Web Design Tips for Starting on The Right Foot

Web apps are getting more and more common on the net. Some people feel that they are just more intricate websites. Whatever be the definition, we must ask ourselves, what happens when one is designing for huge amounts of continuously fluctuating data?

There are some examples of interfaces that are data driven and which handle constantly changing and plenty of varied data. It happens mostly in analytic dashboards and administration areas. Data can be in many forms, like charts, text, graphs or tables. Each of these can be shown in various ways. It depends on the meaning and context which you are attempting to express with the data. One thing is sure: rarely can you know for sure the amount and length of data you have to accommodate. For a start then, think in a simple way.

Predictability and Consistency

Consistency is one of the most essential aspects of designing interfaces that have lots of data. This helps users to become familiar with one section of an interface, and then get the ability to use another area by just using the representation created with the previous section. This is the way to make an interface predictable: make use of existing models that are based on intellect as well as learned behavior.

In order to have consistent areas, you must understand the broad context of the interface and observe how your early interface ideas can manage varied data. For example, there may be no need to filter or sort out a table in one view, but what do you do when you get another table in another area? Can the interface you have recently created be used if the second table requires filtering and contains highlights that need a legend or a key?

Consistency relates to allowing the design to adapt retrospectively, based on your growing knowledge of the intricacies involved. So it’s best to begin with lo-fi models and test your concepts with the edge of the cliff cases – those that don’t happen too often but which might shatter the design.

Reusable States, Patterns and Components

You must build smart to make the consistency a certainty. Produce a series of rules that can be used for all views. This will enable other designers and your client to quickly get together new layouts or pages with the least fuss.

Pattern Groups

A pattern is a small group of elements that complement each other. It could be a segment of a toolbar, or a group of rating buttons. Patterns are generally a method of organizing information that’s connected with one another. An input and a label would be construed as a pattern in a form.

Sort dropdown; Date range selector; Left and right navigation; Checkbox dropdown are some sets of Google product patterns. These patterns from various products are consistent as well as predictable to users. Together they comprise the toolbar component.

Pattern Categories

Patterns could have varied visual looks. This depends on a precise group of circumstances. There may be an error, a disabled button or a graph without data. Each one needs to be considered. Normally they fall under these categories: Hover, Default, Focus, Active, Disabled, Error, Empty.

Components

A component is bigger and can contain components as well as multiple patterns. When designing sites that get heavy data, your objective is to provide a group of components that are flexible and comprise reusable patterns.

Template audit

You will have to do a template audit if you are operating from a product that already exists and are thus limited by the current user flows. Make a list of key userflows and a screenshot for every step.

• Simply press Command-Shift-3 on a Mac to save the present screen to the desktop.
• On a personal computer you can use a Problem Steps Recorder to mark your steps into an .mht file. You can save the images then from that file.

After completing a userflow put the screenshots in a folder that expresses the userflow as ‘add new record’. Then print all of them. In this way you can comfortably spot differences and similarities. A template audit helps you get to know the amount of existing templates and the number of patterns on each template, besides their condition. The finest way to accomplish this is to stick them on a grid wall and categorize them.

From Scratch

When you work from scratch you will have the liberty to create all types of patterns, but it may be harder for you to have nothing to start with. As stated previously, when you design components that are reusable, you must commence with lo-fi with sketches. There’s no need to make them spectacular, but they must be quick and enable you to comfortably investigate various alternatives and not get caught up in the details, which happens often in Photoshop or Illustrator. So,

Create a task flow that has to be completed and make a list of the content that could be used on the page.

• Sketch out various ideas, directions. It’s better to sketch more. In that way you can check if there’s any overlapping with the content and ways to possibly lay it out.
• Distill them into wireframes and check for areas that have the same functions but different solutions. Think about how they can be joined to create an additional consistent interface. Look at the patterns that you are using.
• Rupture it. Intentionally be the devil’s advocate and find out what you need to do to crack your interface. Think about when the cracking action may happen and if it’s worth looking at.

Using Icons

Iconography is a manner of understanding the content’s meaning by using images. Sometimes text may be better than icons. This is true when the idea is complex. In short, all actions don’t require icons. If you feel that users will be unable to recognize an icon, you’re possibly right!

A fast way to check this out is to detach the icon and ask the opinion of people about it. If they answer with different guesses — none of which are even close to the truth — you then may have a problem. You may then set the icon in its proper context and replicate the process. Now if people guess correctly what it accomplishes, then it’s fine. If people still guess wrong, think of altering the icon or add some text to it.

Progressive Reduction

Progressive reduction is a new concept that can be used when you want to tell users that a curious icon is related to a precise action. Start with an icon that’s got text beside it and slowly simplify the interface as it is used more. In this way users start to relate the icon with an achievement that would not be possible to guess if a user only used the icon.

Guidelines

After creating some polished wireframes that express key user flows and encompass lots of reusable components and patterns, what will you show your client?

There are quite a few stipulations that can have an effect of what you deliver. For instance, if you are doing the CSS/HTML/JavaScript on your own or is it being done by a third party. Either way, to ensure that the design is long-lasting and, essentially, consistent as additional features are inserted, you require a kind of guide or reference that anybody can refer to – and also update. That is the fundamental for all interface decisions that will be made in the future.

Kitchen Sink: This is a CSS / HTML or JavaScript which displays all the various patterns and elements on one page and ensures that nothing ruptures in the code or design when they are placed in different order. It’s actually simply native HTML components which ensure that the fundamentals are looked after.

UI Kit: UI kits are normally static PSDs which include stylized kinds of basic HTML elements. These include inputs, buttons, select boxes as well as datepickers and sliders. Some of them can be extremely inclusive and are normally delivered when the production process will be done by a 3rd party.

Illustrative Design Guide

Visual style manuals are much more than mere visual allusions to design. They include instructions and guidelines about where, when and how components and patterns must be displayed. They are created best in code and can be restructured as time passes by. The key to uniformity and maintaining it in a profoundly data driven and expanding product is to have a firm basis for all design decisions.

If you make a master copy and some simple rules to follow it means that anybody can create something and slot it into the design. If you notice something absent in your style guide, you can make your own solutions and add more patterns or elements or entire components to the design and lay down certain instructions and make them available to all.

Style guides constantly evolve but they must be maintained. If this is not done, people will gradually stop using them as they become outdated. Remember: It is you who set your customer’s hopes. If you claim that you will deliver absolutely perfect mock-ups, you should do just that!

Summing Up

For users, you must design in such a way that they can finish their tasks in the finest way with the least fuss. Patterns that are reusable hasten this method by enabling users to make use of one aspect they have learned of your interface and use it to another. Then they can quickly complete fresh tasks since they are more certain about their actions.

But don’t get carried away by looks only: Users are not bothered about looks; they care about how it works. Thus predictability and consistency play a huge role in this.

If you have some ideas about basic website designs please share them in the comments section.

Alan Smith is an avid tech blogger with vast experience in various IT domains, currently associated with SPINX Inc., a Los Angeles, California based website design, web development and internet marketing company. Follow Alan on Google + and Twitter.