UI-UX Design: Week 2-3

UI-UX Design: Week 2-3

Introduction to UI-UX, Definition of Ideation: Techniques and Creative process

Introduction to UI-UX, Definition of Ideation: Techniques and Creative process

In the second week, we delved into the fundamentals of UI-UX design, explored the stages of the creative process, and learned how to generate ideas that we could subsequently bring to life as digital products.

SHARE:

Slack Focus Group Analysing

What is Ideation process?

What is Ideation process?

The ideation process is the heartbeat of creativity in UI-UX design, breathing life into the conception and development of digital solutions. At its core, ideation is the art of brainstorming, sketching, and cultivating a fertile ground for innovative ideas to flourish. It's the phase where designers, often working in collaborative teams, aim to think outside the box and explore uncharted territories.

The process is dynamic, sometimes chaotic, but always guided by a singular objective: to generate a wide range of concepts and solutions. It encourages designers to shed preconceived notions and embrace unconventional thinking, paving the way for breakthrough innovations. In this critical phase, the ideation process transforms abstract thoughts into tangible design elements, setting the stage for a user-centric and engaging digital experience. Whether through mind mapping, sketching, or rapid prototyping, ideation is the compass that leads designers toward the destination of exceptional UI-UX design.

lofi-sketching-wireframing
lofi-sketching-wireframing

Slack: Brainstorm & Reviewing :)

Slack: Brainstorm & Reviewing :)

As we opted for Slack as our communication and feedback exchange platform, the team and mentor collectively decided to conduct an analysis. We engaged in brainstorming sessions to pinpoint the platform's strengths and critical shortcomings.

I had prior experience using Slack as a "business messenger," so the user interface didn't appear as confusing to me, especially compared to Discord, which has similar functions. Nonetheless, I remained interested in analysing it further and hearing the opinions of others.

lofi-sketching-wireframing-team-task
lofi-sketching-wireframing-team-task

Using ‘Crazy 8’ method to define ideas for fictional Coffeeshop website

Crazy Eights Method

Crazy Eights Method

One of the most dynamic ideation techniques in the realm of UI-UX design is the Crazy 8 method. This fast-paced and exhilarating exercise encourages designers to think on their feet and generate a multitude of ideas in a constrained timeframe. Picture a scene where participants fold a sheet of paper into eight equal sections, like a tic-tac-toe board, with each section representing a different design iteration. In a race against the clock, designers are given just eight minutes to sketch out eight unique solutions to a specific design problem. The intensity of this exercise forces designers to tap into their creative reservoirs and produce ideas they might never have considered in a more relaxed setting. Crazy 8 is a remarkable technique for breaking through creative blocks, encouraging diversity in design thinking, and fostering a sense of friendly competition among team members, all while producing a flurry of innovative ideas.

Team-working Task

Team-working Task

Our first task was to create a website sketch-concept for a coffee shop owned by lovely Phoebe (a fictional character). In the given scenario, it was the grand opening day of her coffee shop, and our objective was to brainstorm ideas for the website. This included promotional advertisements, features, and a business strategy designed to set Phoebe apart from the competition. The learning class was divided into several groups. Below, you can view my sketch, along with ideas and concepts from my team.

Team work Brainstorming in Slack :)

lofi-sketching-wireframing-team-task
lofi-sketching-wireframing-team-task
lofi-sketching-wireframing-team-task
lofi-sketching-wireframing-team-task

Word-playing with “Phoebe” and “Coffee”

Slack Group Discussion
Slack Group Discussion

Team work Brainstorming in Slack :)

Introduction to Figma: How to Use; Creating Wireframes and Prototypes

At the heart of the UX design process lies the indispensable tool of wireframing, serving as the blueprint for a digital masterpiece. The key purpose of wireframing is to provide a skeletal framework that outlines the structure and functionality of a website or application. It acts as a visual guide, delineating the placement of key elements such as buttons, navigation menus, and content blocks, without the distraction of colours or intricate design details. By focusing on the essential layout and user flow, wireframing allows designers to iterate quickly, gather feedback, and ensure the overall usability of the final product. Ultimately, the primary goal of wireframing is to crystalize the conceptual vision, fostering effective communication among team members, stakeholders, and clients, and laying the groundwork for a user-centric and aesthetically pleasing digital experience.

Wireframe Prototyping in Figma
Wireframe Prototyping in Figma
Wireframe Prototyping in Figma
Wireframe Prototyping in Figma
Wireframe Prototyping in Figma

Typical team working in Figma file :)

SHARE:

Digital Skills for everyone!

It's free! Gain digital skills and employability support at no cost to you. Take your career to the next level with free digital training, employability coaching and mentoring from industry professionals.

© 2023 Fyonh Bui – Made for Click Start with love in Figma & Framer.

Click Start Free Digital Trainings Bath Spa

Digital Skills for everyone!

It's free! Gain digital skills and employability support at no cost to you.

Apply now!

Learn more

Click Start Free Digital Trainings Bath Spa

© 2023 Fyonh Bui – Made for Click Start with love in Figma & Framer.

Typical team working in Figma file :)