Modura is a new eCommerce clothing brand designed for trendy men and women aged 18 to 25. These individuals are early in their careers and looking for an affordable solution for business casual clothing to wear to their jobs in urban areas.

Modura's target audience is fashion-forward and conscious of trends. They dress for the jobs they want without appearing overdressed. Your task for this project is to develop sketches of 3-4 distinctly different logo directions for Modura.

Now that you’ve chosen your strongest logo design concepts, it's time to digitize them in Figma or Sketch. You'll use text, shapes, and the Pen tool for this project.

From the logo concepts you've identified, choose two concepts to digitize. We recommend you paste your sketches into Figma or Sketch so they're easy to refer to.

Create a “master” digital version of your logo design. Once that’s ready, create the following responsive configurations of your logo:
‎ ‎ ‎ • Large: This might be your logomark and wordmark together. Consider different ways they could be combined—for example, horizontally and vertically.
‎ ‎ ‎ • Medium: This option might use just a wordmark on its own.
‎ ‎ ‎ • Small: This might be a version that’s just the logomark, or, if you're using a wordmark, perhaps it’s the first letter of the wordmark.

In this project, you'll be challenged to create a mini icon set. This work will give you more practice with the shape, pen, and boolean tools and deepen your understanding of icons and their role in creating effective UI designs.

The best icons are visually simple, but also clearly communicate a specific piece of information in a literal way. Here are the key requirements of an effective icon set:

‎ ‎ ‎ • Easy to understand and remember

‎ ‎ ‎ • Recognizable and clear, regardless of size

‎ ‎ ‎ • Increases ease of navigation and overall usability

‎ ‎ ‎ • Enhances brand recognition, provides extra information or an interaction cue

‎ ‎ ‎ • Consistency of style, appearance, weight, and dimensions

‎ ‎ ‎ • Can be paired with a text label to add clarity about the icon’s meaning and purpose

Open up the same file you used for your Modura logo design in the previous project.

Create a set of 4 or more icons for use in a future Modura app. Think about how the icons can complement the style of your logo while fulfilling all of the usability requirements listed above. You can choose any 4 icons to create, but here are some suggestions:

‎ ‎ ‎ • Icons for different categories of clothing

‎ ‎ ‎ • Standard icons like home, search, and settings

‎ ‎ ‎ • Checkout icons like cart, billing, and shipping

In this project, you'll continue your design work for Modura!

As a reminder, Modura is a new eCommerce clothing brand designed for trendy men and women aged 18 to 25. These individuals are early in their careers and looking for an affordable solution for business casual clothing to wear to their jobs in urban areas. They are fashion-forward and conscious of trends. They dress for the jobs they want without appearing overdressed. Your task for this project is to develop two color style sets for the Modura brand.

Take a few minutes to re-read the brief and think about the feelings you want each color style set to evoke.

Develop two color style sets for the Modura brand. In the resources section below, you'll find links to some color palette generators you can use. In each color style set, you’ll need to choose the following:

 ‎ 1. ‎ Primary palette: The most prominent color(s) that will be displayed across your website or app's screens.

 ‎ 2. ‎ Secondary palette: Provides more ways to accent and distinguish your product. They should be applied sparingly to accent select parts of your UI. Secondary colors can also be referred to as the highlight, action, or accent colors.

 ‎ 3. ‎ Neutral palette: Used for page backgrounds and text/body copy.

Document your colors in Figma or Sketch however you'd like. For example, you could lay the color style sets out as a series of filled rectangles in a row, each with a different color. We recommend you include HEX or RGB codes, too.

In the past few projects, you’ve designed many different assets for the Modura brand. 

Now it's time to bring all your work together into a style tile.

A style tile is a 1-page document that allows a designer to communicate color styles, typography styles, and graphic element styles (i.e., photography, illustration, and/or icon styles). Oftentimes, if you are in a situation that calls for style tiles, you’ll want to present stakeholders with at least a couple of options so they can visualize how the site or app may look.

Style tiles are also used within design teams to ensure they’re not diving straight into UI without a plan. It shows that the decisions have already been made (often with stakeholders), and allows a team to use the same styles throughout the product.

Style tiles typically include some or all of the following:

‎ • logo
‎ • brand keywords
‎ • color style set (including HEX or RGB codes and the purpose of each color)
‎ • typography (fonts, sizes, styles, and how to use each one)
‎ • photography style or photo treatment guidelines
‎ • icons and illustration style

The client has reviewed your style tile for Modura and is pleased with what they’ve seen! They’d now like you to design three sample screens for the Modura app.

Choose any three from the following screens:

‎ ‎ • Sign in/Sign up

‎ ‎ • Home screen showing latest offers on garments

‎ ‎ • Screen showing details of an individual item of clothing

‎ ‎ • Search results page

‎ ‎ • Account settings screen

Project originally submitted on March 27, 2022