All Posts in ui

April 21, 2012 - No Comments!

Hacker News Clean Redesign

One of the greatest things for a designer is the challenge of redesigning something well-known - just for the hell of it. Here is my take of a redesigned Hacker News. Please note: This redesign was just for fun, based upon various points of discussion from another redesign.

Here's the details:

  • Everything fits on the one line which helps reduce the clutter and would allow more articles above the fold (in this design I have kept the standard 30).
  • The darkest items are now the titles taking the focus off the header and straight to the content.
  • Font used is Droid Sans (Google Webfont)
  • Secondary links (in header and next to titles) have been dulled slightly to be easier on the eyes.
  • Background has been lightened.
  • SUBTLE: Removed the dots from the position numbers (trust me, it makes a difference!).
  • SUBTLE: The More link is now orange. Yep, awesome.

Full size version here:
(Open this link in a New Tab to avoid the popup)

HackerNews Redesign by Diesel Laws

April 11, 2012 - No Comments!

UI/UX and the Importance of First Impressions [Deck & Video]

UI/UX and the Importance of First Impressions [Deck & Video] is an overview of User Interface and User Experience presented to the teams of AngelCube 2012.


UI/UX and the Importance of First Impressions
Presented to the teams of AngelCube 2012
Diesel Laws, Designer & Co-founder of
Ask the world questions and get opinions in realtime.

I’m here to mentor & help you with UI/UX design.
angelcube all the way baby.

UX is how a user experiences your product.
UI is what interface they're interacting with.
UX is the intangible feel, flow & simplicity.
UI is the tangible buttons, forms and images.

Path, Apple, Clear, Facebook (Timeline)
Path - UI is consistent theme, cute animations & simple layout.
UX is intimate, fun & inviting.
Clear - UI is heatmap gradient, interactive animations & clean layout.
UX is easy, unique & clear.

Good products sell.
Gorgeous products sell faster.
How can non-designers create gorgeous products?
TIP: A doctor doesn’t have to break every bone in their body to know how to fix one.

1. UX is everyone’s role.
When a user visits your website, downloads your app and uses your product they are following your direction. Every day you are crafting someones experience.

2. Think like a user.
iPhone message from mum: Hi were having a great time in bali the weather is warm and the shopping is great miss you
My brain corrected it: Hi, we’re having a great time in Bali. The weather is warm and the shopping is great. We miss you.
No one explains what these buttons do.
I completely forgot to think like a first time user.

3. Break down every page to the most important elements.
Ask yourself, what one thing does this page need to do?
Then remove everything else.*
*I’m serious.

4. 3 clicks to get anywhere.
As a general guide, a user should be able to reach any page within 3 clicks from their home screen.

Edit Company Page on Facebook:
1. Search for company.
2. Click on Company name.
3. Click Manage button.

Edit Bio on Facebook:
1. Click profile name.
2. Click Update Info.
3. Click Edit button.

5. Consistency is powerful.
Font: Sansation Bold
Cyan, Grey, Yellow, White
Consistency builds credibility

6. Realise that great UI/UX can keep users happy.
What do users think when your product has a problem?
Great UI/UX + Problem = “Annoying, but I’ll get used to it.” “Support were really helpful.”
Mediocre UI/UX + Problem = “Crap product, I’m not using it again.” “I’m not recommending it to friends.”

7. Everyone judges a book by the cover.
Most users believe that your website, logo or app is the whole product.

8. STEAL. Most things you’re building have been built before.
E.g. Profiles. Same same but different.

9. Design can sell a product before it’s built.
Yay, landing pages! And screenshots, mockups, templates & videos.

10. They come for the UI, they stay for the UX.
Check out this, you can _____
upload photos, watch videos, download music...
I love using this, it’s ______
fun, easy, quick, simple...

1. UX is everyone’s role.
2. Think like a user.
3. Break down every page to the most important elements.
4. 3 clicks to get anywhere.
5. Consistency is powerful.
6. Realise that great UI/UX can keep users happy.
7. Everyone judges a book by the cover.
8. STEAL. Most things you’re building have been built before.
9. Design can sell a product before it’s built.
10. They come for the UI, they stay for the UX.

Lets get simple.
Investors love traction. Traction comes from users. Users love great products.
Products that have great UI/UX appeal to both.
It’s as simple as that.

December 29, 2011 - No Comments!

Do You Still Use Physical Business Cards?

A while back I wrote a piece titled Pros and Cons Of Digital Business Cards. In it I listed a few of the benefits for digital business cards (e.g. creating an edge when meeting new clients) and reasons against.

But one thing I forgot to consider was the ratio of sharing. For a digital business card, the ratio is usually 1-1, and I imagine it would be quite rare for that person to forward it on. Yet with one physical card, it can sit on a bench and be seen by multiple people passing by. The ratio could be anywhere from 1-2 to 1-Unlimited depending on where it's placed. It's like a mini-billboard until it's collected, often promoting your name/business to more people in one go.

The great thing about this for my freelancing is that I can promote my UX/UI and design work with physical business cards (see below), while promoting my startup ( in person/digitally. Even though I look forward to the day when we don't 'need' to use physical business cards, it's worth making the most of both avenues now.

Do you still use physical business cards? Let me know in the comments.

December 22, 2011 - No Comments!

Great Design Is Now The Currency

With the likes of Google, Facebook, Twitter and Path taking big steps towards 'great' design we are starting to see the era of design come to light. It may seem biased from a designers point of view, but it only takes a moment for anyone to look at all the old/new services being represented with incredible user interfaces, solid user experience flow and gorgeous branding throughout. Great design is now the currency.

Many of us should be thankful to the behemoth that is Apple - who played the underdog for many years until finally finding its feet with the 'iRange'. Companies have since replicated the simplicity, elegance and beauty that is the Apple products as Apple moved to become the most valuable company worldwide. Their push into top position sparked the adoption of gorgeous design across the web and mobile alike. Of course, it's not just Apple that pushed the envelope. Many companies had already started shifting their focus towards a cleaner look, sexier user interfaces and a focus on seemingly irrelevant design details that even Steve Jobs would have appreciated.

There was a time recently where designers were an afterthought, an addon to an already existing product. Now designers are leading services with their unique vision, giving their products the edge needed in an over-saturated market. This big push into design has spurred on a flurry of activity in terms of new hires, incredible apps, designer co-founders and more. But what will the currency of design look like as the year rolls on?

Late 2011: Designers create new vision & push the boundaries in various areas of the tech landscape

As we've witnessed, Google+ has brought their UI/UX into line across multiple products (Youtube, Gmail, Reader, Google+) while Twitter pushed a completely new interface for its mobile market (to be later rolled into their core product). Many other companies have developed into new fields and led the way with new designs that have inspired many.

Early 2012: Customers/Sales define the leading designs - Companies start redeveloping to utilise the most popular design aspects

In a matter of months we are likely to see duplications of previous designs, layouts, buttons and other UI components at play. Naturally, this will alter the user experience and effect how websites and apps are used. Customers will request (design) features from other successful products and companies will adopt elements to suit.

Mid 2012: Many products become visually aligned - Interfaces are continually tweaked with small updates vs large redesigns or redefining concepts

Websites and apps will be at a stage where the functionality of their products will only slightly differ in the way of design. Animations, icons, flow and overall styling will have a familiar feel as customers jump between different platforms. In light of this, many companies will begin to alter their focus away from design, leaving only small tweaks in the spotlight.

Late 2012: Design hits a peak of awareness and alignment - Design begins to take a sidestep to the next focus area of the tech landscape

Design as a currency will funnel into a merge point. At this time, many companies will already be focused on the next big 'edge' for their products and stepping up to put that into motion. Design will not disappear - it will become an important element of a product but not nearly as powerful as the months prior.

Do you believe great design is now the currency? Share your opinion in the comments.

If you enjoyed this please follow me on Twitter.

November 11, 2011 - No Comments!

The UX Behind Barkles UI

Note: This post has been kept up for historic reasons as Barkles is no more.

For as long as I can remember I have questioned why things have been done a certain way and what other approach they could take. In its simplest form UX is just that - questioning why things are done a certain way and making them more fluid for the user.

What Is UX?

User experience as it stands is not just a great UI (User interface) or functionality. It's about the experience for the user as they click-through, try on, purchase, run between and more (Wikipedia - User experience (UX) is about how a person feels about using a product, system or service). It's how they connect. Unfortunately, it's very easy to ignore or overlook a great UX due to:

  • Designer/Developer is too close to the product and can't see it from a new users point of view
  • UX is hard to do correctly based on the many viewpoints
  • There is no manual - it's often just what you feel by using the product
  • User feedback is ignored
  • The developers, designers and general team aren't using their own product

By taking into account the importance of a great UX early on, you can start baking core principles into your design, functionality and concepts. This will help build the foundation of your platform just in the same way Apple represents brilliant design simplicity. At the start of development the UX will be directed to how you feel using your own product.

A Live Example

I always find it important to give a working example to provide clarity to the visual readers. So I will dive into my recently launched startup Barkles and point out a few things I did early on that fed into functionality, marketing and the end result.

Barkles is a side by side platform for debates. The premise is simple - show side by side debating with commenting sections. Based on the simplicity, I wanted the design and functionality to stand out - to be harder to instantly replicate. In that, we also had to build the functionality to the same professional level.

A Barkles Dogfight

As you can see above, the Barkles Dogfight interface is simple. Yet, there is enough functionality to get involved and share your opinion, view Dogtags (profiles) & throw Bones. The design gets out-of-the-way of the user and allows them to get involved in the discussion.

Scrolling Context

The experience with functionality replicates this. The Dogfight Starter that stretches the full width of the centered area follows the discussion. When you scroll down the page it comes with you - constantly keeping the debate in context. This in itself is a powerful UX addition as it keeps the user focused on the point of the debate further they go down the page.

The Dogfight Starter fixes to the top of the browser window

The Quick Scan

The page width also helps out in creating a simpler and more enjoyable UX. We could have easily let the width spread the full side of the page so the responses had more room, but this would have required much more involved left-right scanning of the debates themselves. By keeping it center aligned and focusing on a smaller width it allows the user to follow the debate easily by scanning each side with minimal eye movement. Below is a wider mockup which is uncomfortable to read in comparison (click to view the larger image).

A quick mockup of a larger width area Dogfight

Simplicity With Colour

Other elements that enhance the user experience are the simple coloured lines next to the avatars. These lines reinforce the different sides of the debate. This simple, yet effective addition is noticeable when taken out:

Different coloured lines taken away from each side

As you can see, even with the Agree and Disagree buttons labeling each side the lack of coloured lines blurs the lines between the sides. It's only a subtle difference, but enough to 'feel' confusing or messy as the user scrolls down the page. The colours also break up the grey/blue themed page and add some character.

Try The Functionality

Now, while this article focuses mainly on design aspects, it's important to note the underlying functionality that supports the UI/UX. The quick loading and simple interface functions well, and great care has been taken to enhance the experience of adding an opinion. From text-shadow, input box drop down to hover box-shadow, everything has been put in place for a stronger (and easier) experience for the user.

While I could talk about the functionality for a while, it's better for you to get a hands on feel of how it works. View this Dogfight and get a feel for the experience we have crafted -

I hope that these insights have given you a few ideas or at least an in-depth look at a Barkles Dogfight and the UX behind it. In future articles I will go into more detail about other pages of the Barkles platform.

If you have any questions just give me a shout me on Twitter.