User interface (UI) and user experience (UX) are two related terms that make-or-break your site’s relationship with its visitors. Though the two terms describe different concepts, together, UI and UX will determine conversion, return business, and word-of-mouth recommendations. A digital agency has a lot of options to choose from when picking UI/UX tools. Here are some free online tools to make your website UX/UI friendly.
A newspaper’s most important story of the day goes above the fold on page A-1, on the right-most column. That layout has stayed the same for centuries because of the simple fact that readers’ eyes go there first.
The rules for laying out a webpage aren’t as well-established as the rules for laying out a newspaper. Customers’ eyes can be directed away from your content with a less-than-optimal layout. Web visitors also have shorter attention spans—for instance, nearly half of web users expect pages to load in two seconds or less. So you have precious few seconds to make a lasting impression.
Five Second Test is a UI tool that measures how effectively you’re communicating. You submit your page, and Five Second Test crowdsources it to report on what users remember about your site after five seconds. The site also offers simple comparisons, to see how your site stacks up versus others. You only have one chance to make a first impression, so give your site the best shot.
Wireframes are the basic skeleton for a website—UI starts with the wireframe. There are plenty of wireframing tools available online, and many offer free trials.
However, if you were to pick one, Axure is a good starting point. What you’re looking for in a prototyping tool is a program that lets you do a basic website mockups with as little coding as possible. Axure has the benefit of being both simple and complete. Its simple click-and-drag interface and a wide range of features, let you construct a demo site easily.
The program is frequently lauded as “the most complete wireframing and prototyping tool on the market.” You can download a free trial of Axure and see what this comprehensive toool can do for your site.
If you’re ready to go beyond a basic mockup, and head into real coding territory, then responsive web design is a must-have element of good UI. You’ll want a web design framework that gives you many options for page customization.
Bootstrap lets you easily create a fully functional website. Built by engineers from Twitter, it’s a great tool for front-end development. It features a responsive grid, typography and form controls, and numerous other components. If you’re armed with a little knowledge of HTML and CSS, Bootstrap can give you a great deal of control over your web design.
Bootstrap’s community also a big selling point. Since it’s free and it offers so many features, there’s a lot of online support from outside developers. An online Bootstrap showcase boasts that over 1500 sites have been built using the framework, and many of site creators are active online with advice about how to best use the tool. This means there’s a lot of crowdsourced troubleshooting, as well plenty of additional themes.
For a top-of-the-line illustrator, Webalys’s UI Design Framework is a good, free choice. The tool comes with a graphical user interface (GUI) elements library, filled with hundreds of design elements. It also has an expansive library of graphic styles, so you can customize buttons, headers, and other features with just one click. This framework also comes prepackaged with minimalist vector icons.
The tool’s elements make it a good choice for both flat and more complex design. Its GUI library and styles library alone make it a must-use tool for wireframe and mockup work.
Color is such a basic part of design that it’s easy to take it for granted. However, as many as 10% of people have some form of color-blindness. Your website needs to be easy to navigate for the substantial minority of users with this condition. Coblis is a free color blindness simulator that shows what your website will look like for users who are differently abled.
Many designers rely on color cues in order to guide users through a site. For instance, a red error message or a green check mark are common signs to indicate that a step is needed or complete. Would a user who can’t see these colors be able to proceed as easily as other users? Upload screencaps to Coblis to see what your page looks like in different color spectra.
Has your site used these UI/UX tools, or have you discovered any free ones you like better? Let us know in the comments below.
Latest posts by Sukesh Jakharia (see all)
- How to Use and Customize EverWeb - December 7, 2015
- Commonly Made Sidebar Mistakes and How to Correct Them - November 24, 2015
- How to Design Functional Menus - November 18, 2015