UI Design Deliverables

Mood boards are one of the first deliverables you might create during the design process. Mood boards are often created to present to a client, to make sure you’re on the same page about what the general look and feel of the product should be.

Mood boards can be physical or digital boards, and generally include things like logos, typography, color palettes, images, sketches, and other design assets. They give the client and other stakeholders an idea of the direction the design is going to take. At this stage, specifics of the design are still easy to change, so gathering feedback on whether the designer’s ideas match the client’s is invaluable.

Type systems are key in design, shaping elements like typefaces, font sizes, and spacing. It ensures consistency and guides user attention. To craft an effective type system, consider these principles:

• Align with brand and audience: Match the brand voice and user expectations.
• Select fewer typefaces: 2-3 diverse typefaces often suffice.
• Build a hierarchy: Create roles for text elements to guide users through content.
• Prioritize readability: Check legibility across contexts and devices.
• Maintain consistent spacing: Consistency in line height and spacing adds visual balance.
• Coordinate with design system: Integrate the type system with other design elements like color and grids.

A color system in design is a carefully curated set of colors used consistently across a product to create a cohesive and engaging user experience. It's more than just picking a few favorite hues; a color system considers the psychology of color, accessibility, and the brand's identity. Whether it's a website, mobile app, or digital interface, a well-defined color system helps maintain visual harmony and guides users through different actions or states.

For example, specific colors may be used for primary actions, warnings, or background elements. By establishing rules for how and when to use each color, designers ensure that the product not only looks good but also aids in usability and comprehension.

A design system is a cohesive collection of design patterns, best practices, code snippets, and style guides, interwoven with brand values and principles. It serves as a unifying toolkit, streamlining the design process by promoting the use of reusable components.

Among other functions of design systems are:

• Ensuring consistency: By using standardized components, design systems help maintain a uniform look and feel across all parts of a product.
• Enhancing collaboration: Facilitating a shared language and understanding among designers, developers, and other stakeholders, making teamwork more efficient.
• Increasing efficiency: Saving time and resources by reusing existing components instead of creating each element from scratch.
• Aligning with brand identity: Reflecting the core values, mindsets, and beliefs of the brand, thereby reinforcing its identity through design.

Grid systems are essential for creating organized, human-oriented designs. They include a network of straight lines (both vertical and horizontal) that help designers align content consistently throughout the project and across different screen sizes.

Grids enhance visual hierarchy and can make even super complex designs appear logical and uncluttered. They also give designers a guide for how to lay out components without having to calculate spacing for every single element.

When a designer is ready to hand off the finished design to the development team, they create a design handoff. It's a document that includes mockups, interactions, copy, accessibility validations, specs, and assets necessary for a dev team to release the product or product updates.

Ideally, designers should consult with developers during the design process to make sure the assets they hand off can be implemented, particularly within the timeframe and budget of the project.

Mockups are a key element of the design handoff. Mockups are full-size models of devices showing how your designs will look in real life. They can help developers assess the functionality of the design, as well as the visual appeal.

Mockups are also used for showing other stakeholders the design before it’s handed off to developers. They can be shared with clients and other stakeholders, and even be used for user testing. A bonus use for mockups is in your portfolio, where they can make your designs look more professional and illustrative.

Icon sets are collections of symbols or images that represent different functions, actions, or content within a digital interface. These sets are an integral part of UI design, offering a visually engaging way to guide users through an application or website. Crafted to align with the brand's identity, icons enhance usability by providing clear and consistent visual cues.

By transcending language barriers, they quickly convey information, making the interface more intuitive. A well-designed icon set ensures that each symbol complements others in style, color, and size, creating a cohesive user experience. Whether used to represent a specific action or feature, icon sets work in harmony with the overall design system to strengthen the visual language of the product.