The following selection is a partial listing of some web–based projects using Sketch and InVision that demonstrates the latest in mobile-first designs. Sketch is a digital design tool and InVision is a collaboration, interactive and prototyping tool.
The goal is to define the core components in the initial concept in an effort to quickly visualize the workflow, and build a prototype to further refine the idea. A typical first approach is to create a wireframe, which depicts the page layout or arrangement of the website's content, including interface elements and navigational systems, and how they work together. The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on what a screen does, not what it looks like.
The following art boards were created in Sketch and uploaded to InVision for easy review.
UX/UI Design Process
User Experience design includes a wide range of methodologies to ensure that an end product achieves its core (often business) objectives whilst providing its users with the most efficient and engaging experience possible. Together with user interface design, which is the actual visual design of a website or application, the focus remains on the user's experience and interaction.
I am personally a proponent of the “Lean UX” methodology with less emphasis on deliverables and greater focus on the actual experience being designed. This means all of your resources should be focused on planning, designing, developing, and delivering a remarkably well-crafted core experience.
Carefully plan and document requirements for each project or related-task, which will be instrumental for conceptualizing, designing, creating and improving the overall web presentation. In addition, some common documentation such as sketches, wireframes, task-flow diagrams, and design specifications influence intermediate and advanced deliverables such as storyboards, detailed mockups and even rapid prototyping. What's unique about this stage is that for most of the deliverables, the documentation is the design.
The design phase will help to turn ideas into an actual quality user experience delivering great concepts. The key is that documentation should help move the design forward. Simply put, it's all about making documentation complementary rather than supplementary to the design process.
The experience makes the website or product, not the features – by marrying business goals with user needs, and working to define an experience that engages your target audience and drives them to action.