Shut Up. I'm Talking.

Design

• link

  16th Aug 2011

  Contrast in design

  I am 100% guilty of not creating enough contrast in my designs. For a while I have been obsessed with setting copy on a white background to #595959.

  However, since working more with Mobile designs I have come to realize and accept that a setting between #333 and #111 is much more readable and acceptable.

  I know that I am not the only design who has made / is making this mistake. Check out the link above for a good slap in the face and right those wrongs!

  • • Tags:
    • design
    No Comments
  • • Tweet
    Short Url
• link

  1st Mar 2011

  Re-designing Motribe

  Link: Re-designing Motribe

  Earlier today the new Motribe site was launched. The design is done by Obox (yours truly) and I could not be happier with the outcome.

  It started with a phone call from one of their co-founders, Nic Haralambous. Nic and I have known each other for a while and we both respect each others businesses considerably.

  My initial thought when he asked me to redo their site was “WOOHOO!”, however it wasn’t until I sat down to think of what I was going to do did I realise the pressure I had put myself under.

  Let me explain why.

  Motribe is one of the hottest startups to come out of South Africa. They are approaching 1 million users and only launched this venture in August 2010. It’s exploding in growth and, in my opinion, is by far one of the best SA Start Ups that I have seen. I didn’t want to disappoint and I definitely didn’t want the new design to be the weak link in the chain.

  On top of the pressure to deliver ‘the awesome’ was also the timeline. Nic and Vince leave for SXSW tomorrow – I was asked to design the site 5 weeks prior.

  For me personally, to come up with something decent  I need a long time to think about it. No pen, no paper, just thinking.

  Luckily through the whole process the ‘Mobros’ were open to all my suggestions / opinions on where the design should go, what colours to use and even what the copy should say. It was a special experience to have that much freedom with a client project.

  At the end of the day the first design iteration got rejected but to be honest I sent it to them way too soon, but did so knowingly to gauge their initial reaction. Once that was out the way some of the pressure resided and I was able to do what I knew best.

  The new designs focus was on clear typography, a clean and very professional feel (white space, font sizes) and nothing too playful. So the colours couldn’t be too vibrant and the icons I chose were from the solid vector side of life.

  The 960 grid was used with a bit of ‘poetic license’ when aligning the elements. I have learned that some pages require a 16 column whereas others need a 12 column grid – I’m perfectly fine with that as long as it serves its purpose.

  Flow and focus points were carefully considered which can be seen on both the home page and sign up page. A lot of questions were asked when it came to the layout of those pages.

  My favourite pages:

  Sign Up Page

  Features Page

  Brands Page

  And so, the end result is what you see today. There were minimum tweaks along the way, especially the sub pages – which got approved almost right away. I would say the home page got the most love and attention.

  If you have any opinions please @obox me.

  I also want to thank my main man Gavin Elliott for some invaluable help along the way. I think everyone needs an Elliott in their Skype contact list.

  • • Tags:
    • client
    • design
    • obox
    • redesign
    No Comments
  • • Tweet
    Short Url
• aside

  3rd Feb 2011

  More on sign up forms

  I read a good analysis on 37signals earlier about their sign up form redesign.

  This is quite an interesting clip:

  We’ve been watching a lot of Clicktale recordings of form usage and we noticed that just about everyone scrolls down to the bottom of the form, then back up, before they start filling out the form. So we wanted the redesigned form to be markedly shorter than the one it was replacing.

  Interesting how so many clients stress about fold this and that when the first thing that happens is people scroll up and down to check the actual form length before committing to sign up.

  Let that be a lesson friends.

  • • Tags:
    • design
    • sign
    • ui
    • ux
    No Comments
  • • Tweet
    Short Url
• post

  2nd Feb 2011

  Discussing a sign up form design and user path

  Gavin Elliott: It’s a self contained form, my eyes are on the form. etc. I’d fill that form in. I’m wondering though, “Create an Account” …can I click on style your site (Tab 2)?
  
  David Perel: I’m considering how to sort that out because, no it wont be clickable, so the button at the bottom maybe has to say “proceed to step 2″ instead of “Create your Account” OR I must put everything on one page (but I’m not sure they can do that with their current system).
  
  Gavin Elliott: Are the top three things steps?
  
  David Perel: Yes.
  
  Gavin Elliott: Can you create an account without styling your site? Why is there a finish button if you’ve already created the account?
  
  David Perel: The finish button will confirm your details
  
  Gavin Elliott: Ok, just getting you thinking.
  
  David Perel: If I change that ‘Create my Account’ button to ‘Proceed to Step 2′ I think a lot of these questions will no longer be questions. Also I think that the tabs at the top either need numbers or arrows to signify steps or something to that effect.
  
  Gavin Elliott: Yeah they do, or you somehow need to talk them through it.
  
  David Perel: No, it needs to be intuitive. If I can remove the steps and make it all on one page, then all these problems are solved.
  
  Gavin Elliott: Maybe even hide the process? So create my account, once you hit it takes you to the style your site bit. Then people won’t be like… oh for fucks sake there is a process to this?
  
  David Perel: Or I can remove the tabs and say: “Step 1 of 3: Create your Account”
  
  Gavin Elliott: Because you technically don’t need a “Finish” tab.
  
  David Perel: Yea, agreed.
  
  Gavin Elliott: Because finish is technically creating your account.
  
  David Perel: True, since the title says “Sign Up”
  
  Gavin Elliott: Exactly yeah.
  
  David Perel: Maybe if it said “Build your network”, then it would be a completely different story
  
  Gavin Elliott: Yes, but “Build your network” isn’t a demand.
  
  David Perel: True
  
  Gavin Elliott: “Sign up” is a demand
  
  David Perel: And that’s what we want them to do, we need to tell them exactly what needs to happen, without having tell them how (minimize all the copy).
  
  Gavin Elliott: Yup. Number 1 had a big itch by the way. Just looked at it again.
  
  David Perel: Ye it was literally attempt 0.1, it was the alpha of alpha, I think I let it out too soon. Image 2 is miles better.
  
  David Perel: Thanks for the feedback
  
  Gavin Elliott: No worries.

  • • Tags:
    • design
    • sign up
    • ui
    • ux
    No Comments
  • • Tweet
    Short Url
• aside

  1st Feb 2011

  The new Mailchimp site, my thoughts

  I think MailChimp have got their new home page design wrong.

  I am not a fan of the colors or the noise / diagonal stripe textures. This however is a matter of personal taste and I am sure that many of you will like it.

  What I think is wrong is that they don’t tell you what they are. In order to find out what MailChimp does you have to watch a video. What if I don’t have time for that? Why can’t I read a three worder like ‘We send newsletters’?

  I think that the top half of the site may be a bit confusing to new visitors, with a guy holding a wine bottle and another talking about designer templates at first glance the average visitor would get confused. Where am I? A web design site? A wine shop? Why is Mailchimp Free? What is for free? Do I get a free website? This is all too much to take in.

  Scroll down the page and you are presented with some cool videos (not a fan of those long thin buttons if I’m honest) but I’m in a rush so I don’t have time to watch those.

  Then below that are some logos, but since I haven’t really read what the site is about I am not sure what the logos are for, is Mailchimp part of the Gawker network? Are these their sponsors?

  Lastly, at the bottom of the page is a “Completely Free Account” title with a sign up button. I still haven’t read what this site is about but I see that on the right is a “Subscribe to our Newsletter” title, so maybe I can subscribe for free?

  I’m confused.

  • • Tags:
    • design
    • mailchimp
    • ui
    • ux
    No Comments
  • • Tweet
    Short Url

• 

  My site is based off our popular TinyBlog WordPress Theme.

• Contact Me

  Want to get in touch? Drop me a line

• Tweets

• Social Links