Website Mockup

This assignment's main goal was to create mockup website designs for a website we hope to build in the future. The purpose of this project was to plan and visualize the website's overall design, layout, and user experience before it was actually built. We were able to test out several design concepts, color schemes, typography, navigation menus, and page layouts by making mockups to see how the finished website may appear and work.

The Process

Overview

Behind The Pen is an online art platform that presents artwork from a variety of perspectives, including completed pieces, artist biographies, creative processes, and community involvement.

Brainstorming

This shows the beginning phases of Behind The Pen's brainstorming process, when concepts, themes, colors, and key elements are collected and organized. It demonstrates how the project got started, with inspiration, research, and an expanding list of objectives that influenced the final website design.

Sitemap

This stage demonstrates how I created my Behind The Pen sitemap, which displays all of the primary pages and subpages to show how visitors navigate the website. I made sure that every page connected organically and supported a clear, user-friendly structure by specifying the Home, About, Gallery, Events, Blogs, Community, Contact, and Shop/Donate sections.

Wireframe

This step illustrates the wireframe phase of my website design, during which I prepared each page's fundamental structure and layout before incorporating colors, graphics, or other complex components. In order to make sure the website feels balanced, well-organized, and simple for users to navigate, the wireframe assists in laying out the locations of the navigation, graphics, text, and content sections.

Moodboard

I experimented with various hero section designs in this step to see how Behind The Pen's homepage might present the website. Typography, layout, and personality are the main themes of each hero concept. They might be bold and daring, traditional and elegant, or basic and minimalistic. By making several sections, I was able to evaluate aesthetics and determine which path best complemented my entire website theme.

Iterations

In order to experiment with how Behind The Pen might appear and work, I drew out many potential homepage and gallery layouts. I was able to arrange the logo, navigation bar, photographs, search tools, and category sections like media, era, and artist with the aid of these basic sketches. Before using wireframes and digital mockups, sketches made it simpler to visualize concepts.

3 Different Approaches

A deep red color scheme was experimented with in the first mockup, which gave the website a striking and dramatic tone. In order to generate a gallery-like, cinematic vibe, this version experimented with great contrast, black backgrounds, and emphasized navigation elements. It clarified for me how mood and readability are impacted by color intensity. The second design changed to a serene, earthy green color scheme that was influenced by art museums and the natural world. The third design utilized a warm brown color scheme to create depth and an organic, gallery-like vibe.