Fiercie Toribio's Blog

Activity #7: Creating a Low-Fidelity Prototype of Your Personal Portfolio

Fiercie Toribio's photo
Fiercie Toribio
·

2 min read

Introduction:

Low-fidelity prototypes are simple, rough drafts of a design that focus on the basic layout and structure, rather than the details. They help designers and teams see the overall flow of a user interface (UI) and quickly test out ideas. By keeping things simple, it's easier to make changes and improve the design before moving on to more detailed work.

Advantages of Low-Fidelity Prototypes:

  • Quick Idea Generation: These prototypes are easy and fast to create, making them perfect for brainstorming and getting ideas down quickly.

  • Cost-Effective: They require fewer resources to make, saving time and money while exploring design ideas.

  • Focus on Core Functionality: By skipping detailed aesthetics, teams can focus on the most important parts of the design, ensuring the basic structure works well.

  • Early User Testing: These simple designs can be tested early on to make sure the UI is accessible and user-friendly, with feedback leading to quick improvements.

  • Encourages Open Feedback: Since they are easy to modify, low-fidelity prototypes make it simple to incorporate feedback and refine the design collaboratively.

    Low-Fidelity Prototype of My Personal Website:

    In this low-fidelity design, I’ve created layouts for both mobile and desktop screens, with a focus on responsiveness. The layouts are nearly identical, with the primary difference being the arrangement of elements.

    Mobile Layout:

    • Navigation Bar: Located at the top, including social links, a call-to-action (CTA) button, and the logo.

    • Hero Section: Features my picture and a short introduction.

    • Github and Certification Sections: These sections provide an overview of my projects and certifications.

  • Desktop Layout:

    • About Me Section: This section is more detailed than the mobile introduction, with a longer narrative about myself. It includes my tech stack and GitHub statistics.

    • Expertise Section: Dedicated to summarizing my professional experience.

    • Contact Page: Lists various contact channels for easy communication.

figmalow fidelity prototype