Vlado Varbanov - Webdesigner, Front-end developer - Webdesign Portfolio

Work

  • UI wireframe for a website
  • UI wireframe for a website
  • UI wireframe for a website
  • UI wireframe for a website
  • UI wireframe for a website
  • UI wireframe for a website
  • UI wireframe for a website
  • UI wireframe for a website
  • UI wireframe for a website
Share:            

UI wireframe for a website

UI/UX Design, Mar, 2012

I was in touch with developing directory for worldwide rentals. The project needed wireframe and grid design prepared first and then developed in UI prototype with actual front-end and ready for design implementation.

My first mockups was done using Skeleton CSS grid, where a lot of ui assets was done nicely and gracefully played on mobile. The problem was that Skeleton has 960px fixed width, which is a little bit narrower for todays displays (desktops and laptops), but otherwise nice behavior on mobiles. Therefore we decided to make some modifications on the current Skeleton version to be able to use 1280px of the screen with the same 16 columns grid. I have to say that skelaton is really nice - I used before 960.gs as well as Blueprint in both fixed and fluid versions, but skeleton is much more simpler and “human understandable”.

From some point of the UI development I was asked to migrate on the 1140 css grid, which is really simple and have great behavior on mobiles. I did some mix from Skeleton and 1140 css grid so to be able to use some of the skeleton reset and UI elements such as nicely styled button and form inputs and at the same time to take advantage of the 12 column fluid 1140 grid.

I developed the front-end of the project ready for integration with a various of the pages and views of this web app.

In this porject I did: