union-carunion-car-02

Overview

Union Car is a brand new car saloon that needed a distinctive website to enter a difficult market.
We decided to go for simplicity and ease of use.

I’ve employed some new technologies (such as AngularJS and Go) to make the development fast and easy to maintain.

Details

  • Site: http://www.unioncar.it
  • Technologies: AngularJS, ZURB Foundation, Go
  • Role: Web designer, developer and consultant
langkeeping-01langkeeping-03langkeeping-02

Overview

When Giacomo came to me and described his personal project, I couldn’t resist but help him.
He want to create a website to save world’s dialects. In fact, he already had one but it definitely needed a revamp.

This project happened around the time I was starting with the magnificent AngularJS. Giacomo is really pleased by the graphical and interaction results. He is currently working to produce the content and organize the launch of Langkeeping.

Details

  • Technologies: ZURB Foundation, AngularJS
  • Role: Web designer, developer and consultant

Overview

InteractionAlex is the portfolio website of Alessandro Filippi, a great web and UX designer. He needed a modern, responsive website to show off his works and talent.

I worked closely with Alessandro to create the website he needed from his indications.

Details

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!