If we want users to like our software we should design it to behave like a likable person: respectful, generous and helpful. Alan COOPER
In any kind of software product, whatever the good processing you do in background, optimized back end algorithms and good architecture design..., all those concept doesn't interest the end user. The only things that he considers to judge your product after fitting his needs, are the interfaces and his experience while interacting with it. That's an enough reason to spend much time while designing and programming the visible part of your iceberg ;)
Today i want to share with you some great tips and tools i use for UX design during the projects that i'm working on inside xHub, it's helped me a lot to design a great interfaces that feet the costumer needs, and that create a great user experience.
1. First thing first, Notepad, pen and paper
I know it sounds silly, in the presence of the mock up and prototyping tools, but having those three things gives you more liberty rather that any other digital tool.
You need definitively make sure you walk with this everywhere you go. I know we all have our mobile phones, laptops and everything digital, but nothing beats the written words.
Most of the interfaces i developed, i started their design from my notepad, specially when the costumer didn't give any specification, then i start typing the HTML and CSS code, without breaking the grids layout rules (Bootstrap in my case). Here are an example of UI that i designed using notepad and pen.
2. Lol Colors
Sometimes you are confused about which colors to choose for your app, specially when the costumer don't imposes any graphical charter, you should diffidently check lol colors. It's one of the amazing websites that suggest some sets of colors that feet each others.
3. Stylify ME
As a UX designer you constantly analyze other products because it helps us improve our own work. It also helps because we pull inspiration for a design from anywhere (Website, poster, ...).
If you have ever looked at another product and wondred what color was being used, you can ask Stylify Me.
It’s a reverse engineer tool that crawls a URL and returns the HEX values of the colors used. Simply enter the URL of the site you want to copy, and the tool will spit out the HEX values.
Here an example where i requested the colors used in Airbnb home page, the result was :
You can also download the result as PDF document and review it offline.
4. Total Validator
A comprehensive validation tool for designers. Total Validator checks accessibility, spelling and broken links on an HTML or XHTML page and points out significant problems, so you can fix them. After a long crunch session, where you’re tired and ready to take a break, a tool like this can work wonders. It discovers problems you might overlook on a quick pass of your prototype or site design.
You can install the basic version, it's free.
The power of the this tool is that it gives you a complete analysis of your website, errors, warning and recommendations by generating an HTML page containing the result.
Now you definitively asking yourself for what all this check and validation of your website if it looks okay in your browser. Here are our top five reasons :
1. Accessibility:
Just because you can use your website doesn't mean that someone with a disability can. Making sure your site is accessible is not only a moral requirement, but in many countries a legal requirement. So you should ensure that your site conforms to the W3C Web Accessibility Guidelines, or US Section 508 standard if you want your site to be accessible to all. Note that conforming to these standards means strictly validated HTML, which dedicated accessibility checkers tools fail to check.
2. Search engines :
These can be very fussy and may not index invalid web pages or those with with broken links. So if you want people to find your site, you need to validate it and fix any broken links.
3. Happy visitors :
Who wants to come to a site that looks bad in their browser, has broken links, and is full of spelling mistakes. Each browser has its own quirks, but all are striving to conform to the standards. So make sure your site follows the standards, so it looks its best. Regularly check for broken links and for spelling mistakes. Annoy or upset your visitors and they are less likely to return.
4. Maintenance :
Constantly updating and improving your site will keep people returning to see what's new. A validated site will be easier to maintain, easier to improve, and easier to keep up with the latest trends.
5. Tools and CMS :
Authoring tools make it easy to write and maintain pages, and content management systems that generate pages may speed up development. But by default almost all will produce non-standard and inaccessible HTML. So you need to regularly check their output, if you wish to meet any of the reasons above.
5. FREE FORMATTER
I can say that i use this tool everyday, it's one of the website that should be in the bookmarks of every developer.
FREE FORMATTER is a website that provide a bunch of free tools such as :
- Formatters
- Validators
- Code minifiers
- String escapers
- Encoders and Decoders
- Message digesters
- Web resources
- And more...
6. Mr. Data Converter
Generally while developing a product (Web, desktop ...), you may ask your customer for some dataSet to feed it into your database, that generally you received it as word document, or Excel document if you are lucky. Mr. Data Converter is a website where you can past you data, and generate useful output (Json, SQL query, PHP Array ...ect) that you can use for your app. Here is an example :
If you have any suggestion, other tools, questions or remarks, please feel free to comment below.
Sources :
