Finally the UI Design Begins

Learning the Art of UI Design

When I first started exploring UI design, I felt both excited and overwhelmed. Initially, I thought the main goal of UI design was mainly about making elements on a page look visually appealing, but I quickly realized there was much more to it. There is the challenge of finding the right balance between appearance and functionality. I am starting to understand how important it is to guide users effortlessly through an interface, which they can navigate through the page without confusion.

One of the most important lessons I learned was the impact of organization in design. It is not just about arranging elements on a page, but about guiding the user’s attention in a way that feels intuitive. The placement of buttons, text, and visuals, along with proper spacing and emphasis, can make a huge difference in how easily someone navigates an interface. I realized that a well-structured design does not just look good, but it enhances usability by making interactions smoother.

Usability became a major focus for me as I worked on refining the page designs. It is not enough for something to function correctly. It should also feel natural for the user. Every detail, from how content is grouped to how easy it is to interact with, plays a role in shaping the overall experience. Learning to prioritize structure has helped me approach design more thoughtfully. I have to ensure that every element serves a clear purpose, while keeping the user’s needs at the center.

Accessibility also changed the way I approached design. I had not given much thought to how color contrast, text size, and readability could impact people with different needs. It made me realize that good design isn’t just about aesthetics. It is about making sure everyone, regardless of their abilities, can enjoy the experience. Looking back, my journey into UI design has been a mix of creativity and problem-solving, and I love how I can learn something new.


Designing Your Medium-Fidelity Prototype

For the medium-fidelity prototyping, I continue to use Figma because it offers a great combination flexibility and ease of use. I can easily make the transition from the simple wireframe diagrams of the tutorial application I made earlier to more detailed designs. Additionally, another reason for choosing Figma was how accessible it was. I could work on my designs from anywhere and easily collaborate with my other group members.

When working on the layout for the tutorial application, I wanted to ensure that everything felt easy to navigate. I focused on creating an organized structure that would make sense to users, so they would not have to spend time figuring out where different elements were. Choosing the right colors and fonts was also important. I wanted the color scheme to be visually appealing but also practical, ensuring everything looked consistent throughout the tutorial application.

The user feedback was valuable in shaping the refined look and feel. Early users pointed out small elements that made a big difference, such as adjusting button placement to make interactions smoother, allowing different font sizes for better readability, and improving contrast so that important elements stood out more. Seeing the design evolve from basic wireframes into a more polished, user-friendly interface was a transformative experience. With each revision, I could feel the design becoming more functional, reinforcing the importance of user input in creating something truly effective.





Challenges & Breakthroughs

One of my biggest challenges was making the UI of the tutorial application easy to use and visually appealing. At first, I focused on adding all the features of the tutorial application without thinking about how they looked on the page. I realized that the colors, text sizes, and spacing needed more adjustment than I expected. User feedback helped me rethink how customization options should be presented. For example, a checklist for adjusting tutorial settings felt confusing, so I switched to sliders, which made the process smoother and more visually appealing. These small changes made a big difference and proved that good design is about both function and aesthetics.


Personal Reflection: Designing for the User

This stage of medium fidelity prototyping gave me a fresh perspective on UI design. I realized that even small details, such as button placement and text clarity can have a huge impact on how easily a user can interact with an interface. More importantly, gathering user feedback helped shape the overall structure of the tutorial application. It showed me the importance of incorporating different visual elements to enhance user experience and including prebuilt templates so users can use to create tutorials, rather than requiring them to customize every part from scratch.

One of the most valuable lessons I learned was how to transition from simple wireframe sketches from the low fidelity prototyping to more detailed designs in medium fidelity prototyping. The basic layouts evolved into more refined designs with the addition of colors, icons, rounded structural elements, and improved overall organization. Each iteration brought new insights, reminding that good design is an ongoing process of improvement.

Looking back, I would remind myself not to be so focused on getting everything right the first time. UI design is not about achieving perfection from the start. It is about making adjustments, testing different ideas, and refining until everything feels intuitive. The more I invest in the process of iteration, the more I improve and adapt my designs.



Comments

Post a Comment

Popular posts from this blog

Exploring User Research: Understanding People, Needs & Assumptions

Image
Research Process Problem The main problem I am investigating is the shortcomings of online tutorials as a learning resource for solving problems. Despite their widespread use, many users struggle to find tutorials that effectively address their needs.       Some common issues I observed with online tutorials include: Lack of Engagement : Some tutorials rely on textual content or long-format videos, which can be difficult to follow. The experience often gives the impression of being more like an assignment rather than an engaging interaction, which leads to disinterest.  Lack of Real-World Application : Some tutorials present only basic examples that lack real-world relevance, making it difficult for users to apply what they have learned. Additionally, some tutorials fail to provide detailed instructions tailored to specific models or situations, leaving users frustrated as they struggle to adapt generic guidance to their needs.  Assumption of Prior Kno...
Read more

Bringing Ideas to Life: Creating Your Concept Video

Image
From Idea to Solution: Defining Your Concept The problem that needs to be solved is the lack of engaging tutorials that cater to diverse learning preferences. Many existing online tutorials are either outdated, too restrictive, or limited to a single format. This makes it difficult for users to find content that suits their needs. The concept that is proposed addresses this by allowing users to customize the format of their tutorial to ensure a more engaging and adaptable experience that aligns with individual learning styles. During the brainstorming process, various approaches were considered, such as offering only video-based tutorials or focusing purely on interactive content. However, relying solely on these formats felt too restrictive and didn’t fully address the need for flexibility in learning. Like many current tutorials available online, these approaches lack the adaptability many users need. The refined solution allows users to combine multiple content types, such...
Read more

My Journey to Human-Computer Interactions

Image
Who Am I? Hi everyone!  My name is Leo Wu. I am a first-year graduate student in Computer Science at San Francisco State University. My personal interests include collecting technology, designing PowerPoint presentations, 3D printing, and researching topics of interest, such as technology, aerospace, and general facts. One interesting fact is that my academic journey didn’t start in computer science, but I actually began studying mechanical engineering. My fascination with mechanics of machines and robotics initially led me down that path, but over time, I became more interested in the interactive elements between the user and the machine.  Education Bachelor’s degree in Mechanical Engineering – University of California, Davis (2018 - 2022) Bachelor’s degree in Computer Science – San Francisco State University (2022 - 2024) Master’s degree in Computer Science – San Francisco State University (2024 - TBD) My Story One defining moment in my journey was purchasing an iRobot Roomb...
Read more