My Website Wireframe & Design Process


For my website wireframe, I used Canva to create a simple, clean layout that focuses on clarity and user-friendly navigation. The wireframe is structured into three main sections: header/logo, main content, and footer.

Header / Logo:
At the very top, I included a header box for my website name. This is the first thing visitors see, so I wanted it to clearly establish the brand. I also placed navigation links directly below the header to make it easy for users to move between different parts of the site.

Main Content:
The main content area contains three boxes. The first box is a welcome message, where I introduce myself and give visitors a friendly, approachable introduction to the site. The second box is a contact form link, providing users with a clear way to reach out to me. The third box is for a gallery display or additional content, giving visitors more interactive or visual elements to explore. The vertical arrangement makes it easy for users to scroll and digest the information without feeling overwhelmed.

Footer:
At the bottom, I included a footer with contact info and social media links, as well as copyright information. This ensures that users always have access to essential information, regardless of where they are on the page.

Rationale and Implementation:
I designed this wireframe with simplicity and usability in mind. By using boxes to separate content, I made the layout visually organized and easy to read. The header and footer provide consistency across the site, while the main content boxes guide visitors’ attention to important sections. I chose a straightforward vertical layout because it works well on both desktop and mobile devices, ensuring a responsive and user friendly experience.

Overall, this wireframe serves as a blueprint for my website, helping me plan where elements like the logo, content, and contact form will go before building the actual site. It demonstrates my approach to creating a clear, functional, and engaging online presence.


Here's the link to my website -  My First Website

 

Comments

Post a Comment

Popular posts from this blog

Module 4 Assignment

Image
Module 4 Assignment 1. JavaScript If Else Condition For this assignment, I created my own customized if-else condition using JavaScript. The goal was to display a message based on how many hours someone studied. This script checks the value of studyHours and displays a different message depending on whether the condition is true or false. I chose this example because it felt relatable and easy to understand, and it helped me see how if-else statements can be used to make decisions in a program. My First Website   Reflection: Creating the if-else condition was easier than I expected once I understood the logic behind it. The easiest part was deciding what condition to check and writing the messages that would display on the page. The harder part was making sure the syntax was correct, especially remembering where the curly braces go and how the if-else structure is supposed to be written. 2. The original code had an issue with the if-else statement structure. The problem was that t...
Read more

Module #9 Assignment

Image
  Creating My First MySQL Table For this assignment, I created my first MySQL table using InfinityFree and phpMyAdmin. The process had three main steps: creating the database, designing the table, and inserting data. Step 1: Create a New Database I started by logging into InfinityFree and opening cPanel. I clicked “Create New MySQL Database”, gave it a name, and saved it. This step was pretty easy since the interface guided me through it. The only slightly confusing part was understanding that the database is just a container for the tables I’ll create. Step 2: Design the Table Next, I opened phpMyAdmin and selected my database. I created a new table called MyFirstTable with three columns: FirstName, LastName, and Age. I chose VARCHAR for the name columns and INT for age. This step was a bit tricky because I had to decide which data type to use for each column, but once I understood INT vs VARCHAR, it made sense. Step 3: Insert Data Finally, I clicked the Insert tab in phpM...
Read more