Template Title

The 10 commandments of user interface design

by: Neil Potter on

This infographic lays out the rules for getting your site's user interface just right.


This is one of the best infographics we've seen covering user interface, or UI design. The creators of the 10 commandments of typography, Designmantic.com, have come up with this go-to graphic to help you get your website interface just so. 

The 10 commandments of colour theory

by: Neil Potter on

This infographic lays out the rules for getting your site's colour scheme spot-on.


We visited Designmantic.com and found this – one of the best infographics we've seen covering colour theory in web design. Designmantic created the 10 commandments of typography and 10 commandments of UI that you may have seen on our pages already, and now they've designed this bold graphic to help you get your website colour scheme spot-on.  

5 ways to tackle creative block

by: Neil Potter on

Stuck in a creative rut? The answer lies in mockups, explains Jerry Cao of UXPin.  

Designer's block is a downward spiral. It's a lot like quicksand – the more your struggle, the deeper you go. But what are you supposed to do, just sit there and sink?

We know what it's like, so we want to throw you a rope. Here are 8 strategies that we've found useful in unblocking ourselves, all of which can be executed specifically with mockups.  

 

01. Redraw existing sites

If this sounds like mindless busy work, it's because it is – but that's exactly what you need. Shifting your focus out of the problem at hand and onto something still design-related will reveal new options, whether on the screen or in your head.

Why redraw existing sites, though? As you (re)build multiple sites, you'll start to notice repetitions in structure and recognize similars skeletons behind the design. You'll see UI patterns implemented in various ways, but learn which elements are always the same, or should be. It's a practice that's always helpful in general for sharpening your skill as a designer, but when you're blocked, it could be a life-saver.

As recommended in Web UI Best Practices, first begin with skeletal wireframes, then move into detail. Each new phase reveals different elements you hadn't thought of before, and challenge your creative thinking in how to recreate them.

02. Zoom out

both literally and figuratively. Perhaps the reason you're stuck is that you can't see the forest for the trees. Try shifting your viewpoint away from the details and onto the big picture – and the best way to do that is to physically change your viewpoint.

Working in a zoomed out view of a mockup creates the proper context you need to reevaluate the problem. You'll see how each element relates to the whole, and notice layout choices you hadn't seen before.

New methods of rearranging paragraphs, columns, sidebars, menus, navigation bars – anything, really – will come to light just by changing your perspective. 

03. The Blur Test 

The blur test is a personal method of Lee Munroe, which he describes on his blog. It's used to test visual hierarchy, but can also help in designer's block by giving you a fresh outlook on a mockup.

The idea is that you view a blurry version of a screen so that, with the details obscured, you won't be distracted when analysing how the overall format fits together. Yes, visual details are the most important part of a mockup, however, these details won't matter unless your visual hierarchy is on point.
Image courtesy of UXPin via Lee Munroe

Munroe recommends taking a screenshot at blurring it with a Gaussian Blur filter in Photoshop by 5-10 pixels. Your screenshot will be reduced to colourful blobs, text will be unreadable, and you'll be able to see which blobs stand out (and which ones don't, but should).

04. Try new software

It's a poor craftsman who blames his tools… but a clever one who experiments. Trying out new design tools gives you an immediate change, or at the very least a distraction.

The excitement of a new “toy” might be enough on its own to inspire some new ideas. If not, exploring the new features and relearning your old techniques might spark something inside you previously forgotten. Equally possible, you might realise how much you miss your old software's features, and the reason why might be the inspiration you were needing. 

05. Design badly on purpose

This may seem like one of the more “alternative” strategies, but it's also one a lot of respectable designers use successfully. Often designer's block is less about not having any ideas, and more about not having any good ideas. This puts a lot of pressure on you to stop thinking up bad ideas, and designing badly on purpose alleviates that pressure.

As graphic designer Alexander Charchar suggests, try creating or recreating your mockup with a few ugly design elements. Use that creative but illegible font. Clash the colors of the icon against the background. Make the logo tiny. Indulge in any fun or goofy instincts, then still try to structure the overall layout so the design makes sense. What happens is you're still thinking critically about the design, but with a new calmness in the absence of pressure.

At the very least, you'll get those bad ideas out of your system, and have a bit of fun before a more serious fresh start.

Even the best of us are susceptible to designer's block from time to time, so it's helpful to know which ways work best for unblocking yourself.

In addition to these mockup strategies, there's the tried-and-true methods: get plenty of sleep, exercise, eat healthy, and try to distract yourself a little bit. And remember to relax – battling designer's block is a battle against yourself, and the best ideas sometimes surface in passing.

 

 

Case Study - Blades Barbers

by: infinity design on

We have pleasure in publishing the latest hair salon website and app...

Welcome to Blades Barbers. Embracing a holistic approach towards its treatments aiming to promote well-being. Experience a SPA like feeling within an everyday barbering environment. App Features: Blades Barber Shop Information One Touch Calling GPS Directions Services & Gallery Facebook & Twitter Special Offer Coupons and Much More!

Here's are the links to download the App - iTunes & Google Play

And you can check out their website here - Blades Barbers Website

Here are some screen shots of the website and app: 

 

~ Powered by infinity design ~