Robin Titus’ Post

SKETCHING IN UI/UX DESIGN Sketching is the first part of the design process. It is where you generate as many ideas as you can quickly and get them down on paper. Details are not important at this stage. After gathering your ideas together, you can then decide which is the best and most efficient strategy to work with. Sketching process; To create a successful sketching process follow these steps: ▶ Be prepared! Gather any tools you may need before you start working. These tools could be rulers, markers, pens or pencils, or even a tablet. ▶Understand your goals and what audience you will need to reach with this design. ▶Always time yourself. Keeping yourself within a time limit helps you to focus your time and energy on the things that matter most and not get bogged down by the details. ▶Create a frame for your design. This could be a mobile screen for an app or a desktop frame for a website, anything that will help you guide the context of your design. ▶Annotate, document, and make notes on your sketches. Once you are ready, share your sketches. Anyone can provide valuable insight and feedback about the flow of the design. ▶Refine your sketches. Add titles to your sketches and add notes about elements that may be too hard to draw. Numbering and adding arrows to your sketches can help to label and add a visual flow that will help others give better feedback. Gestures such as pressing or swiping can be added to those sketches that reflect an action. Sketching user flows ▶To start creating your first sketch, you should first understand what you need to draw. Ask yourself, what part of the project do you want to start with and decide where you want to begin. Decide where you want to lead the users and what they need to do to get there. As you are sketching, continue asking yourself what would happen if a user clicked here or what do I want this thing to do? Think about this as the users journey through the product, from the time they enter, to the time they leave. Always be on the lookout for pain-points and ways you can improve the experience.

One of the delights or perks of being a designer is that you can work with pen and paper. Sketching is a great and low-effort way to quickly iterate on ideas and should be a crucial part of your design process. Especially when the scope and requirements are still vague it can help you, your stakeholders and your team to come to a joint understanding quickly. Benefits of low-fi design work are plenty - here are a few: - Feedback can be processed quickly into a new iteration - Sketches invite others to add thoughts as it does feel less ‘finished’. Having some joint sketching sessions with your team really can help create a shared understanding and ownership of the problem you’re trying to solve. - It avoids discussions about non-important details such as button placements, colours, spacing etc. Instead you can focus on the flow and the job-to-be-done for the user. - It is also a great technique for ‘solo-brainstorming’ as you can go through a bunch of ideas rapidly (and get the bad ones out of your system). Lastly, when I sketch it gives me a sense of calm and clarity. That’s also the reason I might work on some extra details in my sketches such as shadows and adding key brand colours. Not only does it make the sketches more appealing, but going through the motion of colouring also puts my mind in ‘the zone’ which helps me be more creative. So, next time you're stuck in Figma looking at a blank canvas, turn of the computer, grab a pen and start sketching to bring your ideas to life! #uxdesign #ux #userexperience

𝐖𝐡𝐲 𝐝𝐨 𝐰𝐞 𝐬𝐤𝐞𝐭𝐜𝐡 𝐚𝐬 𝐔𝐈/𝐔𝐗 𝐃𝐞𝐬𝐢𝐠𝐧𝐞𝐫𝐬? As product designers (UI/UX), sketching plays a vital role in our creative process. It's more than just putting pen to paper; it's a way to explore ideas, communicate concepts, and ultimately craft better user experiences. In my experience, clients often come with excitement and preconceived notions about what they want. While a product requirement document can be helpful, it's crucial to empathize with the client as a user persona. This approach allows us to understand their goals, pain points, and aspirations on a deeper level. That's where sketching comes into play. I often engage in early, casual conversations with clients about their objectives and any digital products they've used or admired. These informal chats create a relaxed atmosphere, fostering open expression and allowing me to truly understand their emotions and aspirations. Through this process, I gain valuable insights that help me add genuine value to their business or brand while crafting a visually stunning design that exceeds their expectations. The attached image showcases a quick sketch I scribbled down after one such conversation, alongside the low-fidelity wireframe it inspired. This iterative process, moving from rough sketches to more refined wireframes, is crucial in translating abstract ideas into tangible, user-centric designs. 𝐃𝐨 𝐲𝐨𝐮 𝐩𝐫𝐞𝐟𝐞𝐫 𝐬𝐤𝐞𝐭𝐜𝐡𝐢𝐧𝐠 𝐝𝐢𝐠𝐢𝐭𝐚𝐥𝐥𝐲 𝐥𝐢𝐤𝐞 𝐦𝐞, 𝐨𝐫 𝐝𝐨 𝐲𝐨𝐮 𝐥𝐞𝐚𝐧 𝐭𝐨𝐰𝐚𝐫𝐝𝐬 𝐭𝐡𝐞 𝐭𝐫𝐚𝐝𝐢𝐭𝐢𝐨𝐧𝐚𝐥 𝐩𝐞𝐧𝐜𝐢𝐥-𝐚𝐧𝐝-𝐩𝐚𝐩𝐞𝐫 𝐦𝐞𝐭𝐡𝐨𝐝? 𝐏𝐥𝐞𝐚𝐬𝐞 𝐬𝐡𝐚𝐫𝐞 𝐲𝐨𝐮𝐫 𝐭𝐡𝐨𝐮𝐠𝐡𝐭𝐬 𝐚𝐧𝐝 𝐞𝐱𝐩𝐞𝐫𝐢𝐞𝐧𝐜𝐞𝐬 𝐢𝐧 𝐭𝐡𝐞 𝐜𝐨𝐦𝐦𝐞𝐧𝐭𝐬 𝐛𝐞𝐥𝐨𝐰! #uiux #designthinking #buildinpublic #userresearch #uxdesign #sketching #figma #uiuxdesigner #productdesign #designer #opentowork #uidesign

Auto Layouts in design tools like Figma can be a powerful asset, but they often intimidate designers due to their perceived complexity. Let's unravel this mystery and explore how Auto Layouts work, why they're beneficial, and a simple hack to get started. At its core, Auto Layouts are a feature that allows designers to create dynamic, responsive designs that adapt to different screen sizes and content changes. This is achieved by defining rules or constraints that govern the behaviour of elements within a layout. Auto Layouts work by applying constraints to elements within a frame. These constraints dictate how elements should behave when the frame is resized or when other elements within the frame change. For example, you can set constraints to keep elements centred, aligned, or spaced evenly. Here's a simple hack to get you started. 1. Create a Frame: Start by creating a frame in your design tool (e.g., Figma) to contain your elements. 2. Add Elements: Populate your frame with the elements you want to include in your layout, such as buttons, text boxes, or images. 3. Enable Auto Layout: Select your frame and enable Auto Layout from the properties panel. Choose between horizontal or vertical layout, depending on your design needs. 4. Adjust Settings: Fine-tune the spacing, padding, and alignment of your elements using the Auto Layout controls. These controls are intuitive and allow you to see real-time changes as you adjust them. 5. Resize and Reposition: As you add or remove elements from your layout, the Auto Layout will automatically adjust, ensuring that your design remains responsive and visually appealing. Benefits of Auto Layouts Efficiency: Save time by letting Auto Layouts handle the resizing and repositioning of elements. Consistency: Ensure that elements are consistently aligned and spaced, maintaining a cohesive design. Flexibility: Easily make changes to your design without having to manually readjust elements. In conclusion, while Auto Layouts may seem daunting at first, they are a valuable tool for creating responsive and dynamic designs. By understanding the basics and using the simple hack provided, you can start using Auto Layouts in your designs and take your designs to the next level. #ProductDesign #UXDesign #UIUX #DesignThinking #UserExperience #Innovation #CreativeDesign #DigitalProduct #UXResearch #DesignInspiration

Tips of the week: Designer to follow - Peter Gregersen Join Peter at UX Nordic Conference 2024 and explore the power of sketching. UX Sketching Workshop Are you ready to step away from your digital tools and embrace the tactile world of pen and paper? Turn off your Mac, close Figma and Photoshop, and join us on a pixel-free adventure. What to Expect: Our UX sketching workshop is a dynamic day filled with engaging presentations and hands-on exercises—all done on paper. Together, we’ll explore how simple doodles evolve into low-fidelity prototypes and, ultimately, transform into functional designs using AI. No Drawing Skills Required Don’t worry if you’re not an artist. This workshop is for everyone, regardless of your drawing abilities. Through a series of exercises, you’ll develop a visual vocabulary that empowers you to communicate and visualize elements from your daily work life. What You’ll Learn Sketching Confidence: Grab that pen and start sketching confidently on paper or a whiteboard. Visual Vocabulary: Build your own set of visual symbols and concepts tailored to your work. Low-Fidelity Prototyping: Dive deep into low-fi prototyping techniques to enhance your digital design skills. Materials Provided All participants will receive a sketching pad and a set of sketching pens to kickstart their creative journey. Join him for a day of exploration, creativity, and skill-building. Let’s turn your ideas into compelling models—one stroke at a time! Book to read - Non-Designer's Design Book, The: Design and Typographic Principles for the Visual Novice By Robin Williams For nearly 20 years, designers and non-designers alike have been introduced to the fundamental principles of great design by author Robin Williams. Through her straightforward and light-hearted style, Robin has taught hundreds of thousands of people how to make their designs look professional using four surprisingly simple principles. Now in its fourth edition, The Non-Designer’s Design Book offers even more practical design advice, including a new chapter on the fundamentals of typography, more quizzes and exercises to train your Designer Eye, updated projects for you to try, and new visual and typographic examples to inspire your creativity. Whether you’re a Mac user or a Windows user, a type novice, or an aspiring graphic designer, you will find the instruction and inspiration to approach any design project with confidence. THIS ESSENTIAL GUIDE TO DESIGN WILL TEACH YOU: The four principles of design that underlie every design project. How to design with color. How to design with type. How to combine typefaces for maximum effect. How to see and think like a professional designer. Specific tips on designing newsletters, brochures, flyers, and other projects Published by: PEACHPIT PRESS INC #uxevent #uxworkshop #uxnordic #uxconference #uxdesign

Tips of the week: Designer to follow - Peter Gregersen Join Peter at UX Nordic Conference 2024 and explore the power of sketching. UX Sketching Workshop Are you ready to step away from your digital tools and embrace the tactile world of pen and paper? Turn off your Mac, close Figma and Photoshop, and join us on a pixel-free adventure. What to Expect: Our UX sketching workshop is a dynamic day filled with engaging presentations and hands-on exercises—all done on paper. Together, we’ll explore how simple doodles evolve into low-fidelity prototypes and, ultimately, transform into functional designs using AI. No Drawing Skills Required Don’t worry if you’re not an artist. This workshop is for everyone, regardless of your drawing abilities. Through a series of exercises, you’ll develop a visual vocabulary that empowers you to communicate and visualize elements from your daily work life. What You’ll Learn Sketching Confidence: Grab that pen and start sketching confidently on paper or a whiteboard. Visual Vocabulary: Build your own set of visual symbols and concepts tailored to your work. Low-Fidelity Prototyping: Dive deep into low-fi prototyping techniques to enhance your digital design skills. Materials Provided All participants will receive a sketching pad and a set of sketching pens to kickstart their creative journey. Join him for a day of exploration, creativity, and skill-building. Let’s turn your ideas into compelling models—one stroke at a time! Book to read - Non-Designer's Design Book, The: Design and Typographic Principles for the Visual Novice By Robin Williams For nearly 20 years, designers and non-designers alike have been introduced to the fundamental principles of great design by author Robin Williams. Through her straightforward and light-hearted style, Robin has taught hundreds of thousands of people how to make their designs look professional using four surprisingly simple principles. Now in its fourth edition, The Non-Designer’s Design Book offers even more practical design advice, including a new chapter on the fundamentals of typography, more quizzes and exercises to train your Designer Eye, updated projects for you to try, and new visual and typographic examples to inspire your creativity. Whether you’re a Mac user or a Windows user, a type novice, or an aspiring graphic designer, you will find the instruction and inspiration to approach any design project with confidence. THIS ESSENTIAL GUIDE TO DESIGN WILL TEACH YOU The four principles of design that underlie every design project How to design with color How to design with type How to combine typefaces for maximum effect How to see and think like a professional designer Specific tips on designing newsletters, brochures, flyers, and other projects Published by: PEACHPIT PRESS INC #uxevent #uxworkshop #uxnordic #uxconference #uxdesign

*Here’s How To Document Your Design Process* Embarking on a design project is an exciting journey, but success hinges on a well-structured approach. Whether you're a seasoned designer or just starting out, having a clear roadmap is essential. In this guide, we'll walk you through three critical stages of the design process *Before Designing:* Before diving into the design process, it's crucial to set the foundation right. You should draft a clear product requirements document (PRD) giving an overview of the product, problems to solve, functional requirements and estimated timelines Next, fire up your design tool, like Figma, and organize your workspace efficiently. Open multiple pages within your project file to keep things organized. Create sections for mood boards, typography, color schemes, icons, logos, components, and drafts for both mobile and web interfaces. This ensures you have everything you need at your fingertips during the design journey. *During Design:* As you embark on the design, keep referring back to your design brief to stay aligned with the project's goals. Try to also name your screens as you design, and update mood boards, components and any other changes you may make along the way. *After Design:* Once you've completed the design phase, it's time to document your process for future reference and sharing. Compile all your design assets, including mood boards, typography choices, color palettes, icons, logos, and final designs. Reflect on your design journey and document any challenges faced, decisions made, and lessons learned. This reflection will not only help you improve your process but also provide valuable insights for future projects. Share your design documentation with stakeholders and team members to ensure everyone is on the same page. This transparent approach fosters better communication and collaboration throughout the project lifecycle. By following these three stages—before, during, and after designing—you'll not only streamline your design process but also create a comprehensive documentation that adds value to your work as a product designer. #appdesign #mockup #uidesign #uidesigner #webdesign #uiux #userinterface #design #webdesigner #wireframe #uitrends #uxui #designer #contentcreator #dailyui #designinspiration #designtips #userinterfacedesign #workfromhome #designer #career #learndesign #designtips#uiux #ui #uidesign #ux #uxdesign #webdesign #design #userinterface #appdesign #uiuxdesigner

🌟 Day 6 of My UI/UX Learning Journey: Nested Framing, Constraints & Adaptive Design! 🌟 Today's focus was all about mastering Nested Framing, Constraints, and understanding how Frames and Auto Layouts behave differently in UI design. Here’s a deeper dive: 🖼️ Nested Framing in UI Design: 👉 Organizes content in layers, creating a clear visual hierarchy. 👉 Groups elements within parent-child containers for structured interactions. 👉 Frames are where children adapt when the parent changes, ensuring responsiveness within a device range. 👉 Provides context-specific information based on user interaction, reducing cognitive load. 👉 Supports consistency and scalability. 🔗 Nested Constraints in UI Design: 👉 Applies rules within layers for alignment and behavior. 👉 Auto Layout is where parents adapt when the children change, making design flexible and dynamic. 👉 Enables adaptive layouts for different screen sizes. If your website has too many components for mobile, you choose adaptive design, where unnecessary components disappear. Components adapt as you shift between devices. 📱 Responsive Design focuses on maintaining balance within the same device range, while adaptive design works when you shift across devices. Frames = Responsive Components = Adaptive 💡 Figma Tip: About Section in Projects In Figma, the "About" section of a design document is a great space to provide key details: 👉 Project Description: Brief overview of the project. 👉 Design Objectives: Main goals behind the design. 👉 Stakeholders: Individuals or teams involved. 👉 Resources: Links to external files, brand guidelines, etc. Providing this context helps collaborators understand the project vision better! 📚 Resources: Space, grids, and layouts: https://lnkd.in/dfarYjw8 Spacing & layout grids in UI design: https://lnkd.in/df4KiPRP Responsive grids and how to use them: https://lnkd.in/dfV7ujkg 🎥 Video resource: Quick response in design: https://lnkd.in/dsjf-NpM #Figma #uiux #uidesign #design #productdesign #uxdesign #designer

Auto Layouts in design tools like Figma can be a powerful asset, but they often intimidate designers due to their perceived complexity. Let's unravel this mystery and explore how Auto Layouts work, why they're beneficial, and a simple hack to get started. At its core, Auto Layouts are a feature that allows designers to create dynamic, responsive designs that adapt to different screen sizes and content changes. This is achieved by defining rules or constraints that govern the behaviour of elements within a layout. Auto Layouts work by applying constraints to elements within a frame. These constraints dictate how elements should behave when the frame is resized or when other elements within the frame change. For example, you can set constraints to keep elements centred, aligned, or spaced evenly. Here's a simple hack to get you started. 1. Create a Frame: Start by creating a frame in your design tool (e.g., Figma) to contain your elements. 2. Add Elements: Populate your frame with the elements you want to include in your layout, such as buttons, text boxes, or images. 3. Enable Auto Layout: Select your frame and enable Auto Layout from the properties panel. Choose between horizontal or vertical layout, depending on your design needs. 4. Adjust Settings: Fine-tune the spacing, padding, and alignment of your elements using the Auto Layout controls. These controls are intuitive and allow you to see real-time changes as you adjust them. 5. Resize and Reposition: As you add or remove elements from your layout, the Auto Layout will automatically adjust, ensuring that your design remains responsive and visually appealing. Benefits of Auto Layouts Efficiency: Save time by letting Auto Layouts handle the resizing and repositioning of elements. Consistency: Ensure that elements are consistently aligned and spaced, maintaining a cohesive design. Flexibility: Easily make changes to your design without having to manually readjust elements. In conclusion, while Auto Layouts may seem daunting at first, they are a valuable tool for creating responsive and dynamic designs. By understanding the basics and using the simple hack provided, you can start using Auto Layouts in your designs and take your designs to the next level. #uiux #uidesigner #uxdesigner #productdesigner #autolayout #uxwriting

Concept Sketches An underrated and ignored approach You are excited about a project that you just got, your imagination about designing an outstanding and sick-looking interface is forcing you to get into Figma and start moving pixels. So, you fall into the trap i.e. visit dribbble, get inspiration, jump into Figma, and then start creating the high-fidelity designs. Let's observe what you missed: - Did you dive deep into the nitty-gritty of the problem? - Did you observe the problem from different angles? - Did you think of all positive and negative scenarios before jumping into Figma? - Did you test (dry run) the first solution you had in mind with pre and post-scenarios? - Did you consider the development effort of the solution you have in mind before proceeding? The answer is: NO, you didn't. You were just too excited or overconfident. ------ Concept sketches aka pencil sketches. The idea of this approach is to start with paper and let your hand draw your imaginative solution but it's not limited to it. Drawing the layouts on the paper isn't the only thing. The main goal is: - Check the pre, post scenarios and practicality of your imaginative solution. - Let your mind explore different options and proceed with the best one. - Keep it dirty, don't start beautifying it. Why concept sketches? - They are quick. - You don't have to worry about pixels and auto-layout. - Feedback is shared quickly - Check design solutions from all angles to identify any hidden scenarios or drawbacks. Tip: You can learn and apply the Crazy 8's technique for quick ideation ------ Resources to learn from: Basics of Concept Sketches: https://lnkd.in/dzWEVW9d Crazy 8's https://lnkd.in/dXNNnKBj Concept Sketches 101 https://lnkd.in/d2Qmkewh #uxdesign #design #ux