Week 1: Starting to Create Mockups
Starting to Create Mockups INTRODUCTION
In this section of the Google UX Design Professional Certificate program from Coursera, you’ll focus on visual design. Creating mockups is a great way to put everything you’ve learned into practice. These high-fidelity designs represent the final product and include key elements like typography, color, iconography, and more.
You’ll also explore methods for arranging these elements into layouts using grids, containment, and negative space. With these principles in mind, you’ll build upon the mobile app designs you’ve worked on in earlier parts of the program. Start designing now to gain a deeper understanding of how visual design contributes to a positive user experience!
Learning Objectives
- Define the role and purpose of a mockup
- Create a mockup in Figma
- Apply foundational elements of visual design to mockups, including typography, color, and iconography
- Use grids and containment elements in mockup layouts
- Demonstrate the benefits of using negative space to improve mockups
TEST YOUR KNOWLEDGE OF PRIOR CONCEPTS
1. What are some key benefits of considering accessibility in UX design? Select all that apply.
- Addresses a11y ideas
- Creates solutions that often help everyone (CORRECT)
- Addresses societal structures and products rather than a person’s ability (CORRECT)
- Ensures underrepresented and excluded groups are taken into account (CORRECT)
Whether or not a person has a disability, considering accessibility in design often benefits everyone, including those with temporary, situational, or permanent disabilities. Products created to enhance the user experience, such as closed captioning, enlarged fonts, and magnifying tools, offer solutions that help all users.
In the disability community and within UX design, the social model of disability is defined as a disability being caused by the way society is organized or how products are designed, rather than by a person’s ability or difference. Similar to how many products are designed for right-handed users and less often for left-handed users, designers consider how a product should transform to meet the needs of underrepresented groups.
Accessibility in design, particularly equity-focused design, considers all aspects of a product to ensure it is accessible and fair to various genders, races, and abilities, with a focus on historically underrepresented groups.
2. Which phase of the design sprint helps the team find solutions to build on?
- Test
- Decide
- Understand
- Prototype
- Ideate (CORRECT)
Correct: After setting the stage in the Understand phase of the design sprint, the Ideate phase allows the team to explore potential solutions. In this phase, the team generates ideas and refines them to create viable solutions that can be built upon. This brainstorming and ideation process encourages creativity and innovation, enabling the team to tackle challenges with fresh perspectives.
3. What can a researcher learn when they properly empathize with users during user research?
- The wants, desires, and fears of their users
- The opinions, feelings, and biases of their users
- The needs, behaviors, and motivations of their users (CORRECT)
- The hopes, dreams, and assumptions of their users
Correct: Empathizing with users allows researchers to gain insights into what users need, why they need it, and how they approach problem-solving. This understanding is essential for creating positive user experiences, as it ensures that the design addresses real user challenges and aligns with their goals.
4. Which of the following are examples of pain points?
- Completing the checkout process for a food delivery app
- Receiving the same response to three different questions from an automated chatbot (CORRECT)
- Struggling to interact with a button on a mobile app’s homepage because it’s extremely small (CORRECT)
- Being asked to submit credit card information when no payment is required (CORRECT)
This is an example of a support pain point, since the user can’t get the answers they need.
This is an example of a product pain point, since it is a usability issue that frustrates the user.
This is an example of a financial pain point, since the user has to provide sensitive personal information without a clear reason.
5. You are designing a life-coaching app for people between the ages of 21 and 30. After conducting research with a diverse set of users, you discover that established professionals are three times more likely to use life-coaching services than those at the beginning of their careers. Which of the following is an example of a complete user persona for your user group?
- Nistha Dube, a 29-year-old engineer and foodie from Chennai, India, who makes viral cooking videos on the weekends. Nistha has been thinking about how to balance their career and their passion for food, but they also want to make more time for their mental health in their schedule. (CORRECT)
- Michael Embery, a 22-year-old from Indianapolis, Indiana who has a busy work schedule.
- Rita Dieguez, a 24-year-old who identifies as non-binary from Manaus, Brazil.
- Liz Fontaine, a 27-year-old veterinarian who enjoys video games
Correct: This is an example of a user persona that captures various aspects of a user’s life. Understanding who you’re designing for and acknowledging their complex needs allows you to create targeted solutions. By developing a detailed persona that mirrors the characteristics of a real person within your user group, you can design solutions that effectively address the specific challenges faced by individuals like Nistha.
6. Which of the following user stories is complete?
- I want a bookshelf so I have somewhere to store my book collection.
- As a yoga instructor, I want to create a consistent class schedule so that my clients know how to confidently plan their weekly exercise. (CORRECT)
- As a scientist, I want access to my colleagues’ published research.
- As a chef, I want access to the freshest ingredients and the highest-quality cooking utensils.
Correct: This user story is well-structured, including a specific type of user, an action they take, and the benefit they receive. A complete user story ensures the focus remains on the user’s needs, is actionable for the team, and provides clarity in addressing the problem.
7. Fill in the blank: Designing products with accessibility and inclusivity in mind ensures that you _____.
- include solutions that benefit specific individuals, which improves the user experience for all users. (CORRECT)
- create a different solution for every single user.
- create an identical experience for all users
- focus on creating one solution for as many people as possible
Correct: This approach addresses a problem for a specific user while also benefiting a broader range of users. By considering diverse needs—such as those of users with disabilities or individuals from traditionally marginalized backgrounds—it ensures the design accommodates various user groups. These thoughtful considerations enhance the overall user experience, not just for the intended audience, but for all users of the product.
8. Which of the following is a complete problem statement?
- Angelo needs a toolbox and shingles to fix the leak in their roof.
- Bella is a dance choreographer who needs to create a practice video because some of their students have school during the day and can’t attend lessons in person. (CORRECT)
- Hakim is an accountant who needs to collect expense reports from their coworkers.
- Akiko is a construction consultant who is building a skyscraper.
Correct: In this statement, the user’s name, characteristics, need, and the reason for the need have been clearly defined.
9. Identify the steps of the ideation process in the correct order.
- Brainstorming, documenting ideas, focusing on quantity, gathering a diverse team, questioning obvious solutions, and evaluating the ideas. (CORRECT)
- Gathering a diverse team, brainstorming, documenting ideas, questioning obvious solutions, focusing on quantity, and evaluating the ideas.
- Documenting ideas, brainstorming, focusing on quantity, questioning obvious solutions, gathering a diverse team, and evaluating the ideas.
Correct: Starting with brainstorming a wide range of possible solutions and documenting them creates a broad pool of ideas. Involving a diverse team ensures a variety of perspectives when narrowing down the most promising options. Once you’ve refined your list of solutions, you can evaluate which ones best meet the needs of your users. Following this structured ideation process helps you explore a variety of potential solutions and ensures you make informed decisions that align with user needs.
10. You’re a UX designer working on a gaming app in a competitive market space. You want to figure out what your competitors’ strengths and weaknesses are, and how to create a better product. What should you do?
- Conduct a competitive audit (CORRECT)
- Contact each company directly
- Conduct informal research online
- Create a marketing plan
Correct: A competitive audit is an analysis that assesses the strengths and weaknesses of competing products or companies. By understanding what your competitors are excelling at and where they fall short, you can identify opportunities to improve your own product. This audit helps you pinpoint gaps in the market and areas where your product can stand out, ensuring that you address issues that your competitors may have overlooked.
11. Which of the following scenarios would be most appropriate to use a close-up storyboard?
- You create an app that connects people who are interested in gardening via a social forum. You want to implement an inbox feature and test whether or not users find it easy to use. (CORRECT)
- You are in the middle of the design process for a grocery delivery app. You want to pitch some ideas to the team about how the user could use it and benefit from it.
- You begin creating a new finance management app. You need to demonstrate when and how a user might interact with it during a normal work day.
Correct: This scenario focuses on testing a particular feature or interaction within the product, making a close-up storyboard the ideal choice. Close-up storyboards help designers focus on specific actions, such as how a user navigates from one screen to another. By zooming in on individual steps and interactions, designers can clearly define and test the flow of the user experience, ensuring each part of the process is intuitive and functional.
12. Which of the following UX tools and processes demonstrates the basic structure and layout of a design without including specific visual details?
- High-fidelity designs
- Ideation exercises
- Wireframes (CORRECT)
- Low-fidelity designs
Correct: Wireframes serve as the foundational blueprint for your design, outlining the structure and layout of each page. By focusing on the placement of elements like buttons, images, and text, wireframes allow you and your stakeholders to assess the functionality and organization of the design before diving into more detailed visuals. This helps identify potential issues early on, making it easier to iterate and make informed decisions about the next stages of the design process.
13. You are working on an app that connects users to tree removal services in their local area. You have already created paper wireframes and now it’s time to build the design on the computer. What is the next step?
- Create high-fidelity mockups
- Create a high-fidelity prototype
- Create digital wireframes (CORRECT)
- Create a low-fidelity prototype
Correct: Digital wireframes are an evolution of paper wireframes, offering a more precise and interactive representation of your design. Unlike hand-drawn sketches, digital wireframes allow you to focus on specific elements like spacing, alignment, and content hierarchy. They also offer the advantage of being easily shareable with team members and stakeholders, promoting efficient collaboration and feedback. Digital wireframes are also versatile, making it easier to update or iterate on the design as you move closer to the final product.
14. How is a prototype different from a wireframe?
- Wireframes and prototypes are both interactive representations of how a design works.
- A prototype is a single screen that shows all the details that will go into a final design. A wireframe is a set of interactive design solutions made up of many prototypes and demonstrates how the entire design works.
- A wireframe is an interactive representation of a complete design solution that shows stakeholders how it will work. A prototype is a single screen with basic elements that establishes the structure of a page.
- A prototype is an interactive representation of a complete design solution that shows stakeholders how it will work. A wireframe is a single screen with basic elements that establishes the structure of a page. (CORRECT)
Correct: Prototypes are interactive simulations that showcase how a design functions as a whole. They go beyond wireframes by allowing users to click through the interface and experience how the product will work in real life. Wireframes, on the other hand, are static blueprints that outline the structure and layout of each screen. While wireframes focus on the organization and basic elements, prototypes bring those elements together and simulate the flow and interactions, offering a more comprehensive understanding of the user experience before development begins.
15. Identify the benefit of using paper prototypes in the design process
- Paper prototypes are polished and represent a final design solution
- Paper prototypes require large amounts of time and resources to produce
- Paper prototypes are inexpensive and convey complex visual details
- Paper prototypes allow rapid iterations and require low commitment (CORRECT)
Correct: Paper prototypes are a quick and cost-effective way to test design concepts. Since they only require basic materials like pen and paper, they enable designers to rapidly iterate and explore various design ideas. This low-fidelity approach is ideal for early-stage testing and allows designers to gather feedback quickly, making it easier to make changes and refine concepts before moving to higher-fidelity designs. Additionally, paper prototypes can help identify potential issues early in the process, saving time and resources down the line.
16. Fill in the blank: _____ is the collection of attitudes and stereotypes we associate to people without our conscious knowledge.
- Recency bias
- Primacy bias
- Implicit bias (CORRECT)
- Sunk cost fallacy
Correct: Implicit bias refers to the attitudes or stereotypes that affect our understanding, actions, and decisions in an unconscious manner. These biases are formed through personal experiences, social influences, and cultural norms, and they often operate automatically, influencing our judgments about others without us being aware. Implicit biases can manifest in various ways, such as in hiring practices, interactions, and decision-making. Recognizing and addressing implicit bias is essential in creating more inclusive environments, as it helps to ensure that decisions are made based on merit and equality rather than unconscious assumptions.
17. Which of the following is an example of a usability study?
- Arthur recruits participants for a study, gives them specific tasks, and asks them how difficult each task was to complete afterwards (CORRECT)
- Daryl presents their prototype to several strangers on the street and asks them to see how they like using it
- Darla recruits participants for a study, gives them specific tasks, and asks them for only positive feedback about each task
- Marlene has each stakeholder review their design before handing it off to the development team
Correct: Usability studies evaluate how challenging it is for users to complete key tasks within a design. These studies gather valuable user feedback, enabling the design team to make informed improvements to the overall user experience.
18. A moderator conducts a usability study to solicit feedback on a mileage tracking feature for a cycling app. Which type of bias may occur if the participant gives multiple pieces of feedback in the same answer?
- Friendliness bias
- Implicit bias
- Serial position effect (CORRECT)
- Social desirability bias
Correct: The serial position effect is a cognitive bias where individuals are more likely to remember the first and last few items in a list, while those in the middle are often forgotten or overlooked.
19. You are a UX researcher who just finished the research for an app that helps users find speciality coffee brands. You’ve gathered all of the observations from your interviews and identified the common themes. What comes next?
- Evaluate the themes to determine which observations to disregard
- Write down insights based on the themes you’ve identified (CORRECT)
- Organize your data using an affinity diagram
- Propose solutions to the common themes you’ve identified
Correct: Once you identify the themes in the data, you extract insights from each theme. These insights will guide the design team in making informed decisions to enhance the design.
20. Strong insights uncovered in research should be easy to understand, answer the research question, and increase empathy for the user.
- True (CORRECT)
- False
Correct: A good insight is clear, addresses the research question, and helps stakeholders connect with the user’s needs.
21. What types of content should be included in your presentation slide deck when presenting UX research insights to stakeholders?
- Themes, insights and recommendations, and details about the study (CORRECT)
- Affinity maps, research methods, research questions, and key performance indicators (KPIs)
- User stories, user flows, user journeys, and pain points
Correct: Your presentation slide deck should include sections for themes, insights, and recommendations, as well as details about the study and an appendix for additional information.
TEST YOUR KNOWLEDGE OF TYPOGRAPHY
1. A _____ is the size, thickness, and emphasis of letters.
- typeface
- font (CORRECT)
- sans serif
- serif
Correct:A font is the size, thickness, and emphasis of letters. Some variations include light, bold, italicized, or regular.
2. Which of the following is an example of a typeface name?
- Heading
- Arial (CORRECT)
- Normal
- Underline
Correct: Arial is an example of a sans serif typeface name.
3. You want to include a serif typeface for an upcoming design project. Which of the following font families work best for the design?
- (CORRECT)
Correct: This is an example of a serif typeface because of the extra lines hanging from the text.
4. What are the benefits of good typography? Select all that apply.
- Typography limits wasted text space.
- Typography demonstrates brand guidelines. (CORRECT)
- Typography makes text easier to read. (CORRECT)
- Typography adds hierarchy to help readers navigate a page better. (CORRECT)
Correct: Typography communicates a brand’s identity and values, adds hierarchy to help readers navigate a page better, and makes text easier to read.
Correct: Typography makes the content legible for users, adds hierarchy to help readers navigate a page better, and demonstrates brand guidelines.
Correct: Typographic hierarchy helps people better navigate a page, makes text easier to read, and demonstrates brand guidelines.
TEST YOUR KNOWLEDGE ON COLOR
1. In the 60-30-10 rule for design, which color characteristic makes up 10% of the palette?
- Accent color (CORRECT)
- Primary color
- Complementary color
- Neutral color
Correct: Designers should use the accent color sparingly (in about 10% of the design) to add emphasis to a specific design element.
2. A design team builds a site for a travel company and wants to incorporate vibrant colors into the design. The team consults the _____ to ensure the colors they select follow contrast guidelines and maintain accessibility.
- hex code
- color code
- Web Content Accessibility Guidelines (CORRECT)
- 60-30-10 rule
Correct: Designers should follow the Web Content Accessibility Guidelines (WCAG) to ensure their designs are accessible.
3. Why is color an important factor in designing your product? Select all that apply.
- Color allows the designer to introduce their personal preferences into the design.
- Color draws the attention of the user. (CORRECT)
- Color can convey emotions for the user. (CORRECT)
- Color helps the user effectively navigate the design. (CORRECT)
Correct: Effective use of color can direct the user’s attention to specific areas of your product and guide where they should look.
Correct: Color plays a significant role in influencing how users feel as they navigate through a product.
Correct: Color can guide the user flow within your design and enhance the overall user experience by making the journey through your product smoother.
4. Luanne is an American, but she’s designing a food delivery mobile app for a client that is based in Peru. Luanne uses green as an accent color to represent prosperity. Her client criticizes the design’s color scheme because the color green has negative connotations in Peru. What could Luanne have done differently? Select all that apply.
- end the design directly to the engineering team.
- Perform regional research on color. (CORRECT)
- Contact the client prior to choosing colors. (CORRECT)
- Conduct competitive research into other apps used by the target market. (CORRECT)
Correct: A color’s meaning can vary depending on the user’s region. Color plays an important role in conveying emotion to your users, and the best way to ensure your product is communicating the correct emotion is through relevant research.
Correct: If the brief hadn’t been clear about the client’s expected brand colors, Luanne could have asked questions before completing the high-fidelity design.
Correct: Luanne could have gained better insights into what similar apps were doing if she had conducted competitive research before starting her app design.
5. A typographic hierarchy creates visual cues to show users where to focus and how to find information.
- True (CORRECT)
- False
Correct: A typographic hierarchy is a system for organizing typefaces and fonts in a layout consistently, helping users navigate a page more effectively.
6. How does iconography in visual design impact the user experience? Select all that apply.
- Icons are easily read by a screen reader.
- Icons create easy transitions to another page or location. (CORRECT)
- Icons support global audiences. (CORRECT)
- Icons limit wasted space. (CORRECT)
Correct: Icons that create easy transitions improve the user experience by limiting wasted space and supporting global audiences.
Correct: Icons have universal meanings that make them accessible to a wider audience. They should minimize wasted space and enable easy transitions to other pages or locations.
Correct: The compact size of icons minimizes wasted space by linking to necessary functionality, improving the user experience. They should support global audiences and enable easy transitions to other pages or locations.
7. When you are designing your mockup, what should you do with the content?
- Use placeholders and empty spaces for the content.
- Add the actual content so you can see what it looks like. (CORRECT)
- Leave the content out and look at the white space to ensure you have enough screen space.
- Use Lorem Ipsum text for the content.
8. One of your peers asks you to help them get started with Figma. They indicate that they are ready to create a mockup including the layers and objects for their design. Which name are they referring to in Figma?
- Grid
- Frame
- Pointer
- Canvas (CORRECT)
9. You’re designing a new app for a small business. You’ve worked quite a bit on it and are now to the point of selecting typography. What do you need to do to determine the typography that is best for your design? Select all that apply.
- Choose a color.
- Choose a font. (CORRECT)
- Select a type classification. (CORRECT)
- Pick a typeface. (CORRECT)
10. You’re designing an app and need to show users where to focus and how to find information. What can you create to do this?
- A typographic hierarchy (CORRECT)
- A hamburger menu
- A navigation hierarchy
- A sitemap
11. You would like to use the same fonts and sizes throughout your design. How would you make this happen in Figma?
- Create a new page for each font and style. (CORRECT)
- Create multiple layers.
- Create a text style.
- Create a new file for each font you’d like to use.
12. Your client has asked for a very eye-catching website. You’ve recommended the use of color to meet this need. What are the best ways to explain to your client how color can impact the website design? Select all that apply.
- Color is irrelevant in your design.
- Color can help communicate branding. (CORRECT)
- Color can add emphasis and draw attention to certain areas. (CORRECT)
- Color can affect the accessibility of your design. (CORRECT)
13. You know that icons will play a key role in the user experience for your app. What best practices should you consider when using icons?
- The icons should be a complementary color.
- The icons should be universal. (CORRECT)
- The icons should keep the branding clear. (CORRECT)
- The icons should use a text label. (CORRECT)
14. You’re ready to start your app design and will use grids. What type of grid includes a series of colored columns and uncolored alleys that allow you to organize the elements in your design?
- Graphic grid
- Layout grid (CORRECT)
- Basic grid
- Square grid
15. In your app design, you’ve got content on one page that doesn’t really fit together. Which is the best containment element to separate the content?
- Divider (CORRECT)
- Shadow
- Border
- Fill
16. Your client has a lot of content that they want to include in an app you’re designing. You’re worried about the amount of white space. What is the best way to express this to your client?
- Recommend that they update their color palette to have more white and contrasting colors in the design.
- Advise them that too little white space in a design increases the risk of error. (CORRECT)
- Suggest that they work with a copywriter to streamline their content.
- Suggest their device requirements include devices with larger screen dimensions so users will see more white space.
17. You’ve designed a static, high-fidelity design that represents a final product. What is this called?
- A sketch
- A mockup (CORRECT)
- A wireframe
- A test case
18. You’d like to use a serif style type in your design. How can you identify a serif style type?
- The type is straight with no trailing lines from the letters. (CORRECT)
- The type has tiny lines that trail from the letters.
- The type is a combination of script and block lettering.
- The type is italicized.
19. What are some examples of typographic hierarchy? Select all that apply.
- The number of topics in a hamburger menu
- Sidebars in magazines
- Newspaper headlines (CORRECT)
- Book chapter titles (CORRECT)
20. You’re designing a mockup for a mobile app. You need to ensure the images and text fit on the device screen. What function in Figma will help you achieve this?
- Constraints (CORRECT)
- Alignment
- Layers
- Text styles
21. You’re designing an app in Figma and have decided on some icons you’d like to use. You’ll use Font Awesome in Figma to work with the icons. What does Font Awesome allow you to do with the icons? Select all that apply.
- It allows you to create customized icons for your particular design.
- It allows you to make the icons solid so they’re easier to see. (CORRECT)
- It allows you to view and copy icons from the cheat sheet. (CORRECT)
- It allows you to copy and paste an icon onto your canvas in Figma. (CORRECT)
22. You are using Figma and have created your grid to help with the structure. You are now ready to align your design elements to the grid. Which feature can help you complete this in Figma?
- Hand tool
- Control (CORRECT)
- Layout move
- Frame
23. In your app that you’re designing, you’ve got an important line of text that needs to be separated out from the rest of the content. Which containment element could you use to differentiate the content?
- Shadow
- Divider (CORRECT)
- Fill
- Border
24. You’ve asked a colleague for feedback on your app design. They mentioned there should be more negative space in the design. What does this mean?
- It means there’s not enough white space in your design. (CORRECT)
- It means you have too much content and need to cut some out.
- It means the photos you used are not projecting a happy feeling.
- It means the menu is encroaching on the edges of the device screen.
25. When do UX designers use low-fidelity designs?
- When defining the sitemap and navigation
- When they want to hand off designs to development teams
- When ideas need to come out quickly (CORRECT)
- When the user flow needs to be refined and checked
26. You’re ready to create a mockup in Figma. You’ve already created a new file. What is your next step?
- Create a design.
- Create a canvas.
- Create a layer.
- Create a page. (CORRECT)
27. The project requirements ask for the design to work with specific phones and tablets. What can you do in Figma to accommodate this need?
- Resize the type, icons, and graphics to accommodate the varying device requirements. (CORRECT)
- Drag the dimensions of the grid to match the dimensions of the device.
- Select the canvas that corresponds to the indicated device requirements.
- Select the frame that corresponds with the devices indicated in the project requirements.
28. Your client asks you to use better font choices throughout the design. Which one is a font? Select all that apply.
- Comic Sans
- Arial
- Italics (CORRECT)
- Bold (CORRECT)
29. You’ve asked for feedback on a mockup of an app that you’re designing. One of your peers asks if you considered the 60-30-10 rule. What are they referring to?
- The number of clicks it takes to get to the desired location
- The proportion of colors used in your color palette (CORRECT)
- The size of the headers in relation to the screen dimensions
- The amount of content in the window versus the content in pop-up boxes
30. You’re designing a mobile app for a new client. The client has a lot of content and they want all of it included. You are worried about the amount of white space in the design. What is the best statement to help your client understand the use of white space?
- Tell them that white space doesn’t really matter. The content is good and the users will be drawn to it.
- Tell them more white space will make their product easier to use. (CORRECT)
- Tell them that you’ll fit all of their content, but they just won’t see much white space.
- Tell them to use more pictures and that will increase the use of white space. Users like pictures more than words anyways.
31. You’ve been working on designs for a website and an app for the same company. How should you treat the typography for each product?
- The typography should match the organization’s brand guidelines. (CORRECT)
- The typography should be bold and emphasize where users should focus their attention.
- The typography depends on the type of device and where users will see it.
- The typography you choose can vary between products.
32. You’ve created buttons in your app design. You want to show that a button has been selected or pressed. Which shadow type would do this?
- Inner shadow (CORRECT)
- Outer shadow
- Select shadow
- Drop shadow
Starting to Create Mockups CONCLUSION
To conclude, grasping visual design and its impact on user experiences is essential for every designer. In the course curriculum, students not only learn about key visual design elements, but they also gain hands-on experience through mockups. Mastering typography, color, iconography, and other design principles empowers designers to create engaging visuals that captivate users as they interact with an app or product. The knowledge gained in this program lays a strong foundation for developing a mobile app’s design from the ground up.
To take your learning to the next level, consider joining our full certificate program. Why wait? Enroll now on Coursera for exclusive access to courses led by top industry professionals and gain valuable experience as you work toward crafting exceptional designs!