About nikso.net

This new layout of nikso.net took me a week of inspired work and I loved it. It all started with a shot on Dribble that inspired me.

Design

My first step was put down some sketches of how the website would have looked like. As the computer is gradually substituting all the paper in my life (toilet one is still useful though), I did those sketches directly in Illustrator.
Wikipedia was really useful to deliver a blank world map and the rest was just mix and matching.
Pretty soon I ended up with a design that I was satisfied with.

On to the behaviors. I wanted those full colors to get the whole screen and be impacting. The scrolling than needed to snap a page into place to avoid seeing a slice of a second, distracting, color.
I needed the expected menu though. I ended up hiding it under the arrow in the top right. I knew that, being a page very colorful and with few elements, it would have stand out.
The search field was there and offering ajax searches seamed the way to go.
Lastly, the world map was there for a reason: show the location of the job the user was hovering. I needed some SVG manipulation then.

Coding

When choosing the technologies, I got lucky that the new ZURB Foundation 3 came out that week. I used it in its SASS variant. It’s incredible how much more you can do when a tool push up the limit.
Knowing that I wanted some custom behavior for the site, I also decided to use CoffeeScript to have a better control over my source. jQuery for the heavy lifting.
All was set to create my new custom WordPress theme.

I first builded a prototype of a functioning home page without mixing server side code. I got the first version of (s)css and scripts.
From the pleasant experience with the SVG world map, I decided to use SVGs where possible (and convenient). This way the site is already retina ready!
Creating the theme by trowing in PHP was straight forward.

Conclusions

Putting the hole thing online was incredibly easy. Even if the first revision is almost always more a prototype, it worked very well.
Debugging and tweaking minor issues took me the majority of time; but it felt as petting a purring cat!

Comments

  1. Fixed some scrolling bugs with iOS and added comment support.
    When I’ll eventually write something meaningful, everyone will be able to complain now :D

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>