The life blood of design is the crafting of solutions for other people. We designers seek out pain points, new challenges and flaws in existing designs. We strive to understand and feel compassion for those most affected. Embracing their perspective shines a light on opportunities for improvement.
Translating data, technology, ideas and feelings into physical representations can seem magical to those who are less creatively inclined. But, really, it comes down to process. While each designer may have their own specific creative process, there are some fairly common ways in which we express design concepts for digital products.
As soon as you start talking, a designer begins painting a picture. In our mind, we set the stage and every detail is important. With your business goals ahead of us, the obstacles begin to become clear. And then, options to resolve, remove or bypass them start to take shape. We sketch on bar napkins, whiteboards or whatever - vetting concepts through truly rapid iterations.
Sitemaps, Flow Diagrams & Wireframes
Websites and applications (basically) consist of a collection of pages or screens. The simplest of these collections require some level of functional design, such as navigation between screens. More complex functionality obviously requires more in-depth considerations. The decisions the designer makes should (most likely) be documented in detail. This ensures every other player on the team knows exactly what is happening and why.
A sitemap shows what screens exist and their relationship to one another. A flow diagram communicates all the potential paths a user may take through the collection of screens. A wireframe documents what and where elements appear on each screen.
This is where art meets functionality. If a wireframe is the blueprint for our home of a website, then the visual design is the tile, paint and wallpaper. Here, we incorporate branding, color palettes, photography, typography and more to pull at the heartstrings of our audience. We are aiming to inspire trust, understanding and more, while pushing the user to execute processes, like make a purchase.
Functionality, style and animation are explored and tested for feel and effectiveness. A prototype can be created with sketches, wireframes, visual designs and coded pages. As I've said in previous posts, no on knows if a solution is effective until it is tested with users. And, anytime you can test a prototype, your designs will benefit from it, greatly.
Keep in mind, all this documentation has a limited lifespan. Always, your designer must work ahead of and faster than your development team. Once new designs get into code, it is (typically) easier to make minor adjustments there. Rather than endlessly trying to maintain a massive deck of static designs, you should fall back to quick sketches that tackle your backlog of changes and enhancements. Return to an in-depth design process for your bigger projects.