sp4ke.github.com/blog/blog/categories/ui-design/atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Category: UI Design | ]]></title>
  <link href="http://sp4ke.github.com/blog/blog/categories/ui-design/atom.xml" rel="self"/>
  <link href="http://sp4ke.github.com/blog/"/>
  <updated>2014-01-29T16:29:16+01:00</updated>
  <id>http://sp4ke.github.com/blog/</id>
  <author>
    <name><![CDATA[Chakib Benziane]]></name>
    <email><![CDATA[chakib.benz@gmail.com]]></email>
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Redesigning jibli - lessons learned form Hack Design Part 1]]></title>
    <link href="http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/"/>
    <updated>2013-03-06T20:01:00+01:00</updated>
    <id>http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1</id>
    <content type="html"><![CDATA[<p>As many programmers, I have always thought  web design is a
discipline best reserved for people doing art and design.
You know, the hipster with his MacBook, his pletora of Adobe suites,
and the huge time spent learning to use them.</p>

<p>I come from a background of system administration and networking, always
fascinated by the obscure backend's thing happening behind what you
see on your screen. Furthermore, I started web development for the sole purpose
of building <a href="http://jib.li">Jib.li</a>, as a CoFounder and CTO on this
project, and as a team which had no money to hire a full time designer.</p>

<p>Needless to say I boarded the UI Design ship on the wrong foot.</p>

<p>In this first article I am going to share my experience on how I got passionate
about creating and designing a User Interface and what I learned from all the
resources shared on HN and <a href="http://hackdesign.org/courses/"> Hack Design </a> lessons which helped me redesign Jib.li.</p>

<!-- more -->


<h4>Before</h4>

<p><img class="hover center" src="/images/jibli_old.png" width="390"></p>

<h4>After</h4>

<p><img class="hover center" src="/images/jibli_new.png" width="400"></p>

<h2>Where to start ?</h2>

<p>We launched the public beta of jib.li on October 2012. A few weeks later we had had
plenty of feedback and proposals for new features.</p>

<p>For strategic reasons, we chose to start Jib.li with no registering process and just a "Connect with Facebook" instead.</p>

<p>We had no money to make a "how it works" video we could show
next to the home page form, like many startups do when they launch their
product. We only had a <a href="http://www.youtube.com/watch?v=KOYTefUmygA" title="Jib.li teaser video">teaser video</a> that we made before starting this project
where you see a bunch of people (our team at that time) pitching the idea.</p>

<p>The home page actually <a href="http://jib.li/homeold" title="Some styles are a little broken since we're migrating to the new design"> looked </a> like many location based services and the
typical workflow of a user was:</p>

<ol>
<li><p>Fill in the "From" and "To" location fields</p></li>
<li><p>Choose what action to take: Send, Deliver</p></li>
<li><p>A modal shows up to let him select a date depending on which action he chose</p></li>
<li><p>Redirecting the user to a listings results page</p></li>
<li><p>The user can then click on listings or create a new one if he's not satisified</p></li>
</ol>


<p>We noticed that many people when they first reached the home page, where not able to figure out what to do next.
To assist new users we used bootstrap tooltips everywhere, even on the action buttons.</p>

<p>On the graphic design aspect, we were just using a slightly customized <a href="http://bootswatch.com/cerulean/"> bootstrap theme </a></p>

<h2>Getting inspiration</h2>

<p>So after we decided it was time to have a fresh and better look, I saw the opportunity
to start practicing what I have been learning on HN, Hack Design and <a href="http://www.amazon.com/About-Face-Essentials-Interaction-Design/dp/0470084111"> About Face 3 </a> about
UI/UX Design. It was also a good opportunity to stop frontend programming with spaghetti jQuery dom
manipulation and start using AngularJS which devprived me of my sleep hours lately.
(frontend programming will be the subject of an other article)</p>

<p>I think the most difficult step when you start working on something, no matter what kind
of project, is actually to <strong>start</strong>. For me it was no exception. I was certainly looking
for visual inspiration because a User Interface for a web application is first of all something
we see before we touch and interact with.</p>

<p>To help me filter out the overwhelming quantity of images, photos and visuals available on the internet,
I made list of words that sum up what Jib.li was about and started combining those words in search queries
for images and photos.</p>

<p>I ended up with this one when looking for the words <em>bike</em> and <em>bag</em>, which seemed to summarize the ideas
of transportation, carrying and environment which jib.li is all about.</p>

<p><img class="center" src="/images/hero_bike.jpg" width="300"></p>

<p><em>This photo comes from this <a href="http://letsgorideabike.com/blog/2011/03/beautiful-bicycles-yuba-mundo-cargo-bike/#comment-823035149"> beautiful article </a> by Dottie and all credits go to her.</em></p>

<p>When I saw this one ideas started immediately flowing and I knew where to start.</p>

<h2>The color palette</h2>

<p>The first thing I did was to choose a color palette. To do so, I used the inspiration photo
to <a href="http://vimeo.com/7109253"> extract a simple color palette.</a></p>

<p><img class="right" src="/images/color_swatch.jpg"></p>

<p>I actually repeated the process until I get a set of colors which validate these conditions:</p>

<ul>
<li>Have at most 3 main colors</li>
<li>Have dark close to black color</li>
<li>Have a light close to white color</li>
</ul>


<p>This one has two main colors, a wide blue range and the yellow/gold one. Grays and white are
just desaturated and very light colors.</p>

<p>This should suffice to always have a color to pick from this palette instead of choosing
one from a color picker, and so basically when looking for black I just choose the darkest one and when looking for white I pick
the most close to white.</p>

<p>The wide range of blue colors made me choose the blue as the main color.</p>

<p>I was heavily inspired by this <a href="http://ianstormtaylor.com/design-tip-never-use-black/"> article </a> of Ian Storm Taylor, which also made me
start using HSL (Hue, Saturation, Brightness) everywhere I wanted to get new colors from the palette.</p>

<h2>Rapid prototyping vs flat PSD design</h2>

<p>One thing I learned in interactive design is that a User Interface can't possibly be represented as a flat image only.
<a href="http://www.youtube.com/watch?v=PUv66718DII"> Bret Victor made an excellent talk </a> about the process of creation and the necessity to get immediate visual feedback.
My design process has been a mix of rapid prototyping and design exploration with <a href="https://developers.google.com/chrome-developer-tools/"> chrome developers tools </a> then representing ideas in
a PSD file as a reference for later.</p>

<p>Although I'm not going to talk much about frontend programming, this is the stack I prepared to quickly test ideas and move back and forth
from prototype to PSD.</p>

<p><a href="https://github.com/sp4ke/Angustrap.git"> The stack </a> consists of:</p>

<ul>
<li>Angular Seed project from AngularJS</li>
<li>Stylesheets using Less</li>
<li>Using git submodules to add frontend dependencies (Bootstrap, AngularUI, FontAwesome ... )</li>
</ul>


<p>Whenever I wanted to test some <em>behavior</em> feature I first tested it with Chrome, played
with styles and interactions, then tried to represent it as a layer in PSD.</p>

<p>On the other hand, when trying to work on the <em>look</em> aspect of something, I prefered the PSD
approach first, which gives more freedom on the graphics.</p>

<p><img class="hover" src="/images/jibli_design_1.jpg" width="50">
<img class="hover" src="/images/jibli_design_2.jpg" width="50">
<img class="hover" src="/images/jibli_design_3.jpg" width="50">
<img class="hover" src="/images/jibli_design_4.jpg" width="50">
<img class="hover" src="/images/jibli_design_5.jpg" width="50">
<img class="hover" src="/images/jibli_design_6.jpg" width="50">
<img class="hover" src="/images/jibli_design_7.jpg" width="50">
<img class="hover" src="/images/jibli_design_8.jpg" width="50">
<img class="hover" src="/images/jibli_design_9.jpg" width="50">
<img class="hover" src="/images/jibli_design_10.jpg" width="50">
<img class="hover" src="/images/jibli_design_11.jpg" width="50"></p>

<h2>End of Part 1</h2>

<p>I hope some programmers who are interested about web design and don't know how
to start might find some insight from this article and the next ones.</p>

<p>Part 2 will be about getting from prototype to stylesheets using chrome devtools, the importance of shadows and
some tips I learned about textures and details.</p>
]]></content>
  </entry>
  
</feed>