A Modern, Responsive Workflow

Traditionally, when designing a website, the visual designer would create static designs for each main website template, using applications like Adobe Photoshop.

Responsive web design focuses on running a website on every device, and emulating a devices behaviour along with the look and feel and user interaction. This becomes very hard and time consuming, using static design files for each content view (mobile, tablet, desktop, etc).

As a result, UIF’s workflow differs from that of a traditional web agency. 

Step 1:  UI/UX Sketching & Prototyping

After agreeing the functional requirements and specifications for the site, the UX designer will undertake sketching of the page templates.

The designer and developer work together to create a fully responsive HTML prototype that provides multiple benefits.

A major benefit is that the client can see the wireframes via a URL as a real HTML responsive prototype on any device and on any supported browser. At this early stage, the client can see how the site will interact with the user and how the flow of the website works.  Usability studies are then performed at this stage.

Step 2: Design

UIF then takes the approved HTML responsive wireframes (keeping a separate URL for the wireframe version) and designs directly into the browser, by applying the design patterns on top of the wireframes using the web’s natural language tools: HTML5, SASS (CSS3) and Javascript.

By doing this we achieve the following benefits:

  • A live URL instead of a series of image files.
  • The real product, not a mockup.
  • A design that shows the full user interaction.
  • Something you can see and test on any device.
  • Real web typography.
  • Real web colours.
  • Client changes are a lot quicker than changing static image files and making subsequent development changes.

Step 3: Final Output

As we are now designing directly into the browser we already have the final HTML responsive site.

As this point, the responsive website (built with HTML/CSS/JS) will be handed over with a full style guide for all design patterns.  The client can then perform final usability testing such as user acceptance testing and then the site is ready to be deployed live.

Want to learn more about how UI Farm can help your business?

Get in touch

Get in contact.

Please leave this field empty.