Introduction

Designing an engaging user interface and user experience is the requirement to captivate users and create meaningful interaction in this digital age. In this critical analysis I will focus on the UI and UX of my data visualisation website, analysing its layout, navigation, typography, responsiveness, and overall user experience. showcasing its strengths and suggesting ways I will improve it in the near future, which is tomorrow.

My Proposed UI and UX

What I mostly love about this website is how it welcomes its users with a clean, simple design, that is followed by a logo that is merged with the navigation bar. These visuals create a strong first impression and show how this website is committed to professionalism, yet creative and friendly. The colour palette is dominated by pink and purple, it gives a feeling of excitement, enthusiasm, and creativity, complimenting the content of data visualisation, as the Visuals themselves are captivating. The visuals of the website are well-thought with the headings and sub-headings in proper font and sizes that can easily enable the users to navigate through the content easily.

The navigation of this website is straightforward. The "Home," "Blogs," "Visuals," and "Design" sections are displayed at the top and centre, providing easy access to other pages and helping in locating content as the headings are clearly labelled. With the icons on the far right, to make the website even more appealing.

The sticky navigation bar remains fixed at the top as the user scrolls through the page helps in navigating. However, on smaller devices such as smartphones, the sticky navigation occupies most of the valuable space. What I intend to do in further production of this website is so that when using mobiles, the navigation bar will collapse into a small icon that the users can press on when needing to navigate elsewhere. Which will boost the user experience.

Typography is important in UI and UX, as it influences readability and aesthetics. The sans-serif font I chose gives a proper appearance, not too formal, not too friendly, just in between, aligning with the website properly., however I feel like the font sizes and line spacing especially in the mobile view need adjustments to enhance readability. And I want all sizes to be consistent throughout the entire website.

One thing I am proud of however is the responsiveness of the website. The media queries are well implemented and assists the layout in adapting throughout different screen-sizes. The content keeps its structure both in desktop and mobile devices, making the website highly responsive. However even though its good, I feel like I still need to add more effort in refining the design for smaller screens, to increase the user-experience more, because I am not proud of the homepage on mobile view. with that, I also want to comment on the blogs section, with my paragraphs breaking their structure as the screen is resized, I need to fix that, as sometimes the last paragraph is the first and the first is the last, and that just shows how the user-experience is affected in mobile view.

The design section showcases wireframe visuals, providing insight into the design process and the plannings and design choices taken before building this website. The use of images shows clear design concept to users. The use of captions user the images disrupts the flow of content, I am not sure of how I can place the captions however I feel like maybe on the side or top can be more visually appealing and won’t break the reading experience.

The design section lacks in user experience. I want to add brief explanations of each wireframe’s purpose in the next submission and explain each wireframe’s purpose and importance.

From a User Experience viewpoint, my website is good in guiding the users throughout the content with properly labelled headings and subheadings. The blogs section is structured with a good layout that has many clear headings and subheadings, promoting easy navigation and readability. However, I feel like adding more life to the text, such as adding images, could help in breaking the text overwhelm and help the users into seeing what they are reading about, increasing their user experience.

The UI and UX of tis website show a strong foundation, there is a lot of room for improvement though. The colour choices, navigation and responsiveness are the strengths of this website. To enhance user-experience, the design section needs refining and more interactivity. I feel like this time, I managed to succeed in creating a visually appealing and user-friendly website that focuses on both its content and aesthetics. In the ever-evolving world of web development, the UI and UX of websites are the key to creating better user experience.

Reflection

When designing this website, my aim was to have vibrant colours, to spark excitement and creativity. I was aware of readability and accessibility with using such bright colours, so I chose a cleaner simple font, sans-serif. And it made content consumption easier for viewers as the typography was more user-friendly.

My navigation bar plans were all about simplicity, so I positioned it on the centre of the homepage, and it acted as a focal point for my introduction. Which aligned with an idea by (Papanek 1984) that “Design is Intuitive”. I created a navigation that was aimed to increase user engagement, as after the user is done reading the introduction, their eyes would be directed to the navigation.

In terms of the UX, the typing animation gives the website a bit of personalisation and uniqueness. I added it so I can keep the users engaged.

My website does not have any CTA basically and that one was intentional. I was thinking on whether to control the pace for the users or let them read at their own pace, then I remembered that users want freedom. Nielsen (2006) says that users want to feel like they are in control, which made me leave out CTAs.

In the blogs sections, I was trying to be more professional, using the strong colours and using a consistent font, I maintained the same design structure. I wanted that section to be in-between creativity and formal. And now I realise that more white space around the text could make it more professional, giving it a distinctive aura.

Although I was successful in creating part of my ideal website, there is a lot of room for improvement and with the next submission, hopefully there will be less room for improvement.