The purpose of this site is to build an active community for UIMinds, PHP, HTML, JavaScript, Jquery Developers and UI/UX Designers to Network, Exchange ideas and talk about Code, Architecture, Innovation, and open source in general. Share the Open Source, Examples, Inspirations and best practices.

Tuesday, April 5, 2016

UI And UX Tips (Secrets) To Improve Your Skills

If you have a passion for art, and a good head for technicalities, chances are that UI/UX designing is your jam.

This is one of the few jobs that provide an outlet for skill, imagination, creativity and technological know-how, which also makes it so demanding.

If you’re looking for ways to improve on your skills, though, this is the roadmap to a pro designer mode.

Spend Time in Drawing and Sketching

The job of a UI/UX designer is to combine the role of a visual artist with that of a techie, but in paying attention to codes and digital designs, but over time I found myself more and more distant my first true passion for art.

This caused difficulties in designing, until the day I picked up a sketchpad and just started conceptualizing…on paper. Just think of what many art classes focus on: positive and negative space, colors, perspective, depth, layout and framing. Each of these elements counts amongst essential skills for an UI designer, and can help you get closer to your dreams of success.

Make Use of User Testing with Prototyping Tools

This is an important secret for UI and UX designers: user testing. The basic idea behind it is the thinking out loud approach, which works so well in a variety of fields and situations.

Methods vary from discount testing to lab tests, and there are some really good books if you want to go into details e.g. the Handbook of Usability Testing by Jeffrey Rubin and Dana Chisnel. One of my favorite tools is Invision, which lets me transform my own designs into interactive and totally-clickable mockups.

Optimizing UI and UX for Mobile Devices

One mistake I’ve seen very often is that designers leave just one design framework for both mobile and desktop devices. Realizing this, I mobilized my own design team to work on separate versions.

Together, we created a mobile optimized design module that had bigger text, less number of elements, automatic input zoning, and more such features. One UX design principle we utilized was breaking each task into smaller portions, so that we could focus each task towards one particular process.

We also use particular mobile-oriented designs that factor-in hand/finger positions for hand-held devices.

Utilizing UI Recurring Pattern Libraries

Design patterns are big on abilities, make no mistake. If you want to up your designing skills, you’ll have to take advantage of these to a great extent. A popular design pattern to use is the Card: you identify a key component, represent it in the form of a card, make sure the user associates the shape/style with something, and then use instant recognition to reduce load.

Unearth the Ways in which Process Works to become Better

If you want to be a great – and not just a good – UX designer, you should turn your attention towards how Processes work. It is a fundamental aspect of designing, so all you need is to choose the right method depending on the context of use.

You can choose Agile development methods for incremental and interactive designing, you can use the Capability Maturity Model (CMM) and Improved CMM (CMMI) for quality control and analysis, and you can use the Lean Startup as a framework for understanding user needs and requirements through the MVP (Minimum Viable Product) hypothesis.

If you Want to Improve, Research Your Potential Users Well

I cannot emphasize on this enough, really! Imagine that you’re trying to sell steak to an 80 year old with no teeth, or a drug to a policeman, and you’ll see exactly how risky it is to go in blind.

Without knowing the age, context, needs and requirements of your prospective audience, you really can’t figure out a good design. A hip and cool nightclub’s web page would be totally different from that of MIT, now, won’t it?

So do a bit of research and find out what kind of things you’ll be offering on the page: then run a mockup to see if it lives up to what you’d imagined inside your head initially. Works like a charm, every time!

Use tools like GoogleDrive

Google Drive is the collaborative cloud storage tool which saved me so many times that I’ve lost count! There’s a reason why it’s so awesome for UI and UX designers, and that’s mostly related to its amazing sharing abilities.

For instance, you can use Sheets to break down tasks, you can use Presentations to represent wireframes and UX flows, and you can use Google Drawing to share simple state diagrams. Plus, you and your team can use it to share notes and feedback: which is very useful especially if you want to make edits later on.

Learn the Technical tricks of the Trade for Great Success

Okay, now it’s time to look into some technical aspects like spacing and buttons. Now, web-designing requires typographers, but as an UI/UX specialist, you should have some idea of letter spacing (via CSS letter spacing property).

Next, pay attention to how you use typesetting buttons: misplaces labels are the worst thing imaginable, so be careful! Also, make sure to link with the help of padded block links which highlight clickable areas so as to give users a better experience (it can be frustrating clicking beyond the text are, and finding out you’d been hitting up on blank space all along).

Be careful to add enough padding to the links, because simply converting it to a block format won’t really help much except to increase the width and height.

Improve on Color Skills for Overall Development

This is another skill development point that should take you back to Art class, but it’s absolutely critical if you want to be a good UI and UX designer. By using correct colors, you can highlight a particular element on a page, provide some good contrast, and direct the flow of attention.

Used properly with the help of block grid elements on a particular page, effective coloration can give a huge impetus to how your design is perceived. Better visuals, more money: at least in my experience of the past years! Besides, color and contrast are great but little known tricks for managing your visitors’ attention and focus.

Use design elements like Lines, Animation, White Space

Image source: Ramotion

The reason why I’m paying so much attention to white spaces, line and animation, is that I learnt its importance the hard way. When I first designed a website for a client, I hardly knew about these factors. Speaking to him after about a month or so,

I learnt of the less-than expected success of the site. I was young, naïve, and optimistic, so everything was personal: which is why I went back to some guidelines and tried to analyze what went wrong.

Using white space more often, a couple of animated elements, and some lines to draw between components, I offered another version of my initial design. Surprisingly enough, this actually worked and led to some great feedback.