My UI and web design projects showcase my ability to blend visual design with usability and thoughtful interaction. I’ve designed and built a personal portfolio site using WordPress as my final graduation project, fully coded a website for the Chinese restaurant TOWN using HTML and CSS, and created responsive desktop and mobile designs in Adobe XD. Across these projects, I applied key UI principles such as wireframing, user flows, responsive layouts, hierarchy, accessibility considerations, and consistent design systems. These projects represent my growing experience in UI and web design, with many more to come as I continue to expand my skills and explore new digital experiences.
For this project, I was assigned the task of creating a mobile-friendly website. I conducted thorough testing to ensure compatibility across various web browsers, including Microsoft Edge, Chrome, Safari, and others. Adhering to brand guidelines, I incorporated color schemes, text styles, and imagery that aligned with the identity of the company I was working for—an authentic Chinese restaurant named "Town."
My goal was to craft a website that effectively introduced the restaurant while ensuring a user-friendly experience. To achieve this, I applied principles of user interface (UI) and user experience (UX) design. Leveraging HTML, CSS, and JavaScript, I showcased my coding skills and designed an elegant website that seamlessly integrated various design elements. Click the image below to view the website in action.
In this project, I designed and developed a self-promotional portfolio website using WordPress. I researched professional designer websites to understand how they promote themselves and applied UI/UX design best practices to create the themes, content, and layout for my site. I started by creating a visual sitemap to plan the pages I wanted to include. I wrote all the content and designed the visual elements, showcasing various projects from my previous jobs and freelance work. I focused on several key UI/UX principles during the design process such as user-centered design, consistency and accessibility.
Additionally, I implemented responsive design to ensure the website looks and functions well on various devices, including desktops, tablets, and smartphones. This involved using features within WordPress such as flexible layouts, fluid grids, and media queries to adapt the design to different screen sizes.
I also optimized images to improve the website's performance. This included compressing images to reduce file sizes without compromising quality and using appropriate image formats for different types of visual content. These optimizations helped to enhance the user experience by reducing page load times and ensuring the website was fast and efficient.
During this project, I created two high-fidelity mock-ups — one for desktop and tablet, and the other for mobile — using Adobe XD to ensure a consistent and intuitive user experience across different devices. My approach followed key UI/UX design principles, such as maintaining visual hierarchy, ensuring accessibility, and creating easy navigation paths. I also prioritized consistency in typography, color schemes, and interactive elements across breakpoints, ensuring users could transition smoothly between platforms without encountering disjointed experiences.
Throughout the design process, I collaborated closely with users to gather feedback on pain points they encountered. This helped me identify areas where they felt frustrated, such as cluttered layouts on smaller screens or difficulty finding essential features. Incorporating this feedback allowed me to make strategic adjustments, such as redesigning the menu for mobile views to a collapsible hamburger icon and streamlining forms to reduce cognitive load on smaller screens. I also ensured that interactive elements like buttons and icons were appropriately sized for both touch interactions on mobile devices and mouse clicks on desktops, enhancing usability.
The final mock-ups provided a seamless user experience across all devices by balancing aesthetics with functionality. The desktop and tablet versions emphasized more detailed layouts, while the mobile version was optimized with concise content and intuitive touch gestures to accommodate on-the-go users. This iterative process ensured that every design element aligned with user needs and expectations, leading to a polished, user-friendly product.
