Site updated at 2013-03-12 02:40:42 UTC
After Width: | Height: | Size: 6.7 KiB |
After Width: | Height: | Size: 171 KiB |
After Width: | Height: | Size: 635 KiB |
After Width: | Height: | Size: 136 KiB |
After Width: | Height: | Size: 143 KiB |
After Width: | Height: | Size: 152 KiB |
After Width: | Height: | Size: 250 KiB |
After Width: | Height: | Size: 313 KiB |
After Width: | Height: | Size: 136 KiB |
After Width: | Height: | Size: 157 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 115 KiB |
After Width: | Height: | Size: 130 KiB |
After Width: | Height: | Size: 522 KiB |
After Width: | Height: | Size: 1.1 MiB |
@ -0,0 +1,302 @@
|
||||
|
||||
<!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 have 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 © 2013 - 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>
|
@ -1,135 +0,0 @@
|
||||
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Redesigning jibli - lessons learned form Hack Design - </title>
|
||||
<meta name="author" content="Chakib Benziane">
|
||||
|
||||
|
||||
<meta name="description" content=" Redesigning Jibli - Lessons Learned Form Hack Design Comments Please enable JavaScript to view the comments powered by Disqus. ">
|
||||
|
||||
|
||||
<!-- 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/">
|
||||
<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</h1>
|
||||
<div class="entry-content" itemprop="articleBody">
|
||||
</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 © 2013 - 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/';
|
||||
var disqus_url = 'http://sp4ke.github.com/blog/redesigning-jibli-lessons-learned-form-hack-design/';
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|