An excerpt from sophilabs playbook
Visual experience
It is crucial to put the design of the application ahead of the development. Focus should be placed on wireframing usability, user experience, and flows. We find it important to keep the design and development cycle adequately tight, since as we approach certain areas of the product, we often decide to cut or change features. Those changes are an expected part of the iterative process and feedback loop between the client, the sophilabs team, and users. The designer will refine the sketches into HTML and CSS wireframes. HTML and CSS wireframes are built on moqups. It also allows developers to start implementing features within the wireframes.
In the context of our software, the user interface is the individual view that allows for goal completion.
We evaluate interfaces on the following criteria:
We put the user’s goals first. No one is using our software solely because it looks nice. There’s a reason they sought out our solution. Our number one priority is making that outcome desirable and easily attainable. We make software easy to understand. It’s not enough to be functional, users must know capabilities exist and be able to anticipate how the software is going to react to their inputs. Our software should be as intuitive as possible. We remain consistent with platform guidelines. Interfaces look and feel best when they are congruent within their context, rather than being strictly branded across all platforms. We prefer common patterns when designing, and we maintain consistency. Usable interfaces work as expected across the entire application.
Interaction gives users the ability to change the canvas, and to directly manipulate it. Designing those interactions is what makes our software come to life. Interactions should provide affordance — animation, for examples, can be used as a powerful metaphor to help a user understand an interface. Interactions help guide a user from the beginning of a task all the way through it’s completion.
Designers guide these interactions from prototype to implementation. For web applications we start in the browser. For review, we use gifs to demonstrate interactions.
We refer to an application’s visual design exclusively as its style. We use the universal design principles to communicate and bring order to those ideas in our applications.
Those fundamentals include, among others: