Personal website design
My creativity, my code, my project - a design realised on Webflow
year
2024
service
UX Research, UX/UI, Webflow
client
Olga Ilina
As a UX/UI designer, I'm always striving to create user-friendly, aesthetically pleasing and thoughtful interfaces. At some point, I wanted to move beyond a concept to a full-fledged website that reflected my style and approach to design.
I started my work by analysing the websites of other UX/UI designers to understand what sections were most common on their pages and how they structured their information. I studied their approaches to navigation, project presentation and case study design. I then moved on to stylistic solutions: I analysed colour schemes, typography and design trends. This helped me determine the direction I wanted my own site to take, so that it would not only look stylish, but also be user-friendly and informative.
• case study
Creating a personal website is not only a way to showcase my portfolio, but also an opportunity to showcase my approach to UX/UI design. I didn't just want to collect my work in one place, but to create a user-friendly, logical and visually appealing platform that reflects my skills and style.
As a UX/UI designer, my knowledge of HTML and CSS helps me understand how web pages are structured and how my design decisions are implemented in code. This allows me to create layouts that take into account the technical limitations and capabilities of browsers, and to communicate more effectively with developers.
However, I chose Webflow for this project because it allows me to work with a visual interface while retaining full control over layout and styling. My knowledge of HTML and CSS made it easy for me to customise the structure of the site, work with flexboxes and grids, and apply custom styles to achieve the desired results. Webflow was a great tool that combined visual design and technical flexibility without requiring a deep dive into programming.
However, I chose Webflow for this project because it allows me to work with a visual interface while retaining full control over layout and styling. My knowledge of HTML and CSS made it easy for me to customise the structure of the site, work with flexboxes and grids, and apply custom styles to achieve the desired results. Webflow was a great tool that combined visual design and technical flexibility without requiring a deep dive into programming.
01
Research and analysis
Before designing the website, I did a competitive analysis. Many competitors were selected, including the websites of UX/UI designers, graphic designers.
02
Wireframing and prototyping
During the prototyping phase, I created a block structure to visualize how the design interface would look and where the different elements would be located. I started with simple diagrams to define the main areas and components such as buttons, menus, and input fields. I then moved to a more detailed prototype, adding all the text, fonts, and basic interactions to the pages. This process allowed me to see how users would interact with the site. I was able to make any necessary adjustments before the development phase began.
03
UI Design
At the stage of designing the user interface of the website for myself, I tried to use graphic elements to make the interface more visually appealing. I used different colours and carefully selected images to give the design a finished and harmonious look. This not only provided aesthetic appeal, but also helped to create a pleasant and intuitive user interaction, which improved the perception and usability of the website.
• conclusion
Developing my own website was a valuable experience where I was able to apply all stages of UX/UI design - from research and prototyping to final implementation. This project allowed me to gain a deeper understanding of website structure, improve my Webflow skills and work through every detail to create a user-friendly and aesthetically pleasing interface.
[1]
The process
I wanted the website to be not just a showcase for my work, but a logically structured, intuitive and visually expressive platform that reflected my style and professional approach. The orange colour, adaptive grid and fluid animations helped create a dynamic, modern and memorable design.
[2]
HTML/CSS
Knowing HTML helped me organise content, while CSS knowledge helped me style, customise and animate. This enabled me to work effectively with Webflow, using its powerful tools and making spot changes to the code. The result: a technically competent, visually appealing site with a well-thought-out structure and adaptive layout.