About the project
Quoteup is a start-up application aimed for easy quote and invoice management. It allows an user to prepare, send and track quotes and invoices. The application also sports minimal CRM features to keep a log of all conversations between the user and her clients.
The idea behind Quoteup is to simplify the management of leads. While traditional software focuses on offering a wide set of features that increment its complexity, the applicacion focuses on a small, basic set of features that keep lead management for small businesses as simple as possible.
Editing a company profile.
I was contracted to design the application from scratch. We started from wireframes and concepts in pen & paper that promptly morphed to Illustrator and Photoshop mockups. With a good understanding of the application screens and workflow, I later continued coding a basic XHTML structure that was used for the programmers to get everything started.
Each iteration (against a SVN server hosted in Beanstalk) allowed to fix errors, add functionality and tweak visual details.
As you can see in the screenshots, a good eye on details and typography were seek in this project. I’ve used the universal Helvetica/Arial (Mac/PC) for secure display of content in all platforms, and developed a neutral, yet enjoyable, color schema based on blue and gray.
Gradients and textures.
Subtle gradients and shadows added complexity and texture to the application, while avoiding temporary tendencies (say, reflections, a characteristic of the Web 2.0).
To increase the quick scanning of buttons and page titles, royalty-free icons were bought from Icon Drawer. Two sizes of buttons were designed using these icons, the big ones (with their proper shadows for suggesting a more real environment) for being placed in top of main sections and the smaller ones for in-page (AJAX) transitions.
I’ve delivered a set of flexible, bulletproof™ (term coined by the inimitable Dan Cederholm) templates that were coded with future changes in mind. Since the site was thought as modular, it’s easy to add new navigation items, descriptions and form items when needed.
Behind scenes, the templates were all coded using EMs on a strict 12 column grid framework specially developed for this application. The result was a elastic layout that doesn’t break when the user changes the size of the text.
These templates are currently being implemented using Ruby on Rails.