[Portfolio Website] #01 - Analyzing Websites and Making Wireframes

 

 

This is part of a series of logs about my journey to build a portfolio website using Next.js and React.js. 💻

---

 

I am planning to build a simple portfolio website. Before starting, I referred to several examples of portfolio websites through Readymag and analyzed their main page structures.

 

• Yulia's Portfolio 
• Valentin's Website

hey.Valentin – Freelance Product Designer & Illustrator

 

 

Condense Elements from Other Websites

After selecting my favorite portfolio websites, I analyzed their elements and structure, creating wireframes using Uizard and Draw.io.

 

Commonly, the landing page features an introduction with key phrases, and the navigation bar at the top remains fixed as you scroll 

through the entire page. 
The main structure of the content includes an introduction, a slideshow of previous project images with information, and a contact section.

 

Landing Page 

• Navigation Bar
• Introduction with highlighted key phrases 

Scrolling down

• Image Scroller of previous projects
• Contact

Wireframe for the Portfolio Page (Created by @turi, 2024).

 

 

 

 

Additionally, I discovered a beneficial platform called Uizard. It allows you to easily create mockup designs with the help of an AI chat tool and convert them into Sketch or other mockup designs with images and various customization options.

 

 

🔍 Remaining questions

• What is Wireframe and its purpose?Due to their simplicity, wireframes can be utilized during development to visualize and test different layout ideas (Springboard.).
• Should I specify and design the CSS layout for the next step?

 

🔗 References

• how to evaluate a wireframe
• What Is a Wireframe? A Beginner’s Guide