You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
9.0 KiB
XML
180 lines
9.0 KiB
XML
<?xml version="1.0" encoding="utf-8"?>
|
|
<feed xmlns="http://www.w3.org/2005/Atom">
|
|
|
|
<title><![CDATA[Category: jib.li | ]]></title>
|
|
<link href="http://sp4ke.github.com/blog/blog/categories/jib-li/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>
|