Mon Cher Robot
Description: This portfolio piece showcases my design for a modern and minimalist website - NFT Marketplace platform. The project involved designing and developing a user interface (UI) for a web application. Once the design was finalized, the next step was to translate it into a fully functional web interface.
Design: Ideation, Mood-board, Wireframes(User Flow), High Fidelity Mockups, Revision.
Development: Translating mockups into a fully functional web interface. HTML for structuring and CSS for style.
Phase 1: Ideation
My design process for this specific project started with raw ideation and visualization of the future website. Given that I was working on the NFT Marketplace platform I wanted to design something different from classic style avoiding black and white color scheme. At that moment I clearly knew that final product must follow a clean and simple layout with a focus on high-quality imagery to showcase the featured artworks. The actual hands-on process started with user flows and main pages’ layout design.
Phase 2: Wireframes
Based on my practice, development of grayscale wireframes is a very significant stage of any project. At this stage you build layouts starting from the most important pages of your website/app and then outline the possible user flow between those pages. Such medium-fidelity mock-ups provide you with the initial rough understanding of your product structure and main features. Figure 1 shows the outcome of the process discussed above.
Phase 3: Mood Board & Style Guide
After confirming wireframes with the focus on such aspects as user navigation, website interaction and user goals I moved on towards designing high-fidelity mock-ups. Overall, mood boards are an important tool for designers working on high fidelity mockups because they help to establish a clear design direction and ensure that the final product accurately reflects the intended visual style.
The dominant black background creates a dramatic and sophisticated atmosphere, while the vibrant colors provide a strong contrast and catch the viewer's attention.
Challenge: Navigation Menu
It is worth mentioning that the navigation menu was the most problematic issue that we dealt with throughout the whole process. Finding the design solution wasn’t the hardest challenge for me, rather it was the internal team conflict that we had to solve. Linda is a designer with strong beliefs, who wouldn’t conceal something that is simply not working. On the other hand, I felt quite confident about my design and refused to even see the issue.
Eventually, both of us put effort into understanding each other and I offered a new layout design that we both liked. This design solution was applied to other pages that had the same issue and finally consistency was established throughout all components of the website.
Below you can observe my initial design proposal on the left and final design on the right:
This conflict helped me to realize that any team work would require finding compromises and there is no such thing as a constant consensus in all parts of the project development. Moreover, this reminded me that design practice cannot be linear and re-iteration is the key to successful design.
Phase 4: Implementation
This project was my first experience with web front-end development, where I learned the basics of HTML and CSS.To begin the project, I spent some time researching and learning about HTML and CSS. I learned about the various HTML tags, such as headings, paragraphs, and lists, and how to structure content on a web page. I also learned about CSS and how to use it to style HTML elements, such as changing colors, fonts, and backgrounds.
While creating the website's structure required a solid understanding of HTML, it was relatively straightforward to create the skeleton of the website. However, when it came to styling the website, I found that it required a more in-depth understanding of CSS, as well as a keen eye for design. Once I had a good understanding of the basics, I started design implementation from the landing page(Figure N). One of the challenging parts was to implement main navigation menu, for which I learned how to use position and hover properties.
One of the first difficulties I experienced was the grid property through which I achieved responsiveness of the content to page resizing.
Learned how to manipulate images through user interactions, utilizing hover property. Also, understood parent-child relationship of HTML tags. Here form “flex-child” parent class contains label and input objects that represent a button and a heading.
