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.
303 lines
13 KiB
HTML
303 lines
13 KiB
HTML
|
|
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Redesigning jibli - lessons learned form Hack Design Part 1 - </title>
|
|
<meta name="author" content="Chakib Benziane">
|
|
|
|
|
|
<meta name="description" content="Redesigning Jibli - Lessons Learned Form Hack Design Part 1 As many programmers, I have always thought web design is a
|
|
discipline best reserved for …">
|
|
|
|
|
|
<!-- http://t.co/dKP3o1e -->
|
|
<meta name="HandheldFriendly" content="True">
|
|
<meta name="MobileOptimized" content="320">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link href="/blog/atom.xml" rel="alternate" title="" type="application/atom+xml">
|
|
|
|
<link rel="canonical" href="http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/">
|
|
<link href="/blog/favicon.png" rel="shortcut icon">
|
|
<link href="/blog/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
|
|
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
|
|
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
|
|
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
|
|
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="left-col">
|
|
<div class="intrude-less">
|
|
<header id="header" class="inner"><div class="profilepic">
|
|
<script src="/blog/javascripts/md5.js"></script>
|
|
<script type="text/javascript">
|
|
document.write("<a href='http://sp4ke.com'><img src='http://www.gravatar.com/avatar/" + MD5("chakib.benz@gmail.com") + "?s=160' alt='Profile Picture' style='width: 160px;'</a>");
|
|
</script>
|
|
</div>
|
|
<h1><a href="/blog/"></a></h1>
|
|
<p class="subtitle">An entrepreneur thaughts and ideas.</p>
|
|
<nav id="main-nav"><ul class="main-navigation">
|
|
<li><a href="/blog/">Blog</a></li>
|
|
<li><a href="/blog/blog/archives">Archives</a></li>
|
|
</ul>
|
|
</nav>
|
|
<nav id="sub-nav">
|
|
<div class="social">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<a class="rss" href="/blog/atom.xml" title="RSS">RSS</a>
|
|
|
|
</div>
|
|
</nav>
|
|
<!--<hgroup>
|
|
<h1><a href="/blog/"></a></h1>
|
|
|
|
<h2>An entrepreneur thaughts and ideas.</h2>
|
|
|
|
</hgroup>
|
|
-->
|
|
</header>
|
|
</div>
|
|
</div>
|
|
<div class="mid-col">
|
|
|
|
|
|
|
|
<div class="mid-col-container">
|
|
<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
|
|
<h1 class="title" itemprop="name">Redesigning Jibli - Lessons Learned Form Hack Design Part 1</h1>
|
|
<div class="entry-content" itemprop="articleBody"><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="/blog/images/jibli_old.png" width="390"></p>
|
|
|
|
<h4>After</h4>
|
|
|
|
<p><img class="hover center" src="/blog/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="/blog/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="/blog/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="/blog/images/jibli_design_1.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_2.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_3.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_4.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_5.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_6.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_7.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_8.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_9.jpg" width="50">
|
|
<img class="hover" src="/blog/images/jibli_design_10.jpg" width="50">
|
|
<img class="hover" src="/blog/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>
|
|
</div>
|
|
|
|
</article>
|
|
|
|
|
|
<section id="comment">
|
|
<h1 class="title">Comments</h1>
|
|
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
<footer id="footer" class="inner"><p>
|
|
Copyright © 2014 - Chakib Benziane -
|
|
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
|
|
</p>
|
|
|
|
</footer>
|
|
<script src="/blog/javascripts/slash.js"></script>
|
|
<script src="/blog/javascripts/jquery.fancybox.pack.js"></script>
|
|
<script type="text/javascript">
|
|
(function($){
|
|
$('.fancybox').fancybox();
|
|
})(jQuery);
|
|
</script> <!-- Delete or comment this line to disable Fancybox -->
|
|
|
|
|
|
<script type="text/javascript">
|
|
var disqus_shortname = 'sp4ke';
|
|
|
|
|
|
// var disqus_developer = 1;
|
|
var disqus_identifier = 'http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/';
|
|
var disqus_url = 'http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design-part-1/';
|
|
var disqus_script = 'embed.js';
|
|
|
|
(function () {
|
|
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
|
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
|
|
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
|
}());
|
|
</script>
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-31299938-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|