Website Wire-framing and Mapping – Design drafts and sketches

User Interface Design, web design, Website Design

For my Website Design class, I’ll be making a personal website with a portfolio of my art. This will be very useful for when I apply to any Universities or jobs in the future, and it will be a great way to show my work. Recently I’ve been sketching up some wire-framing and maps for my website.

Here's my brainstorming page for my website.

Here’s my brainstorming page for my website.

I first created a brainstorming page in my sketchbook to note and jot down my thoughts and ideas. It probably could have been done more neatly, but at the time I was still trying to figure out what I wanted on my website and what I didn’t. I would organise and modify my initial designs and go into more detail later on.

An in-depth site map.

A redrafted version of my site map.

After brainstorming, I turned to a new page and developed my site map. The idea was to have four pages including the homepage. I wrote down the content and widgets that each page would have, as well as navigational buttons.

Scan 1

Here are the second designs for my pages, excluding my homepage design.

The portfolio page was inspired by OMOCAT‘s portfolio page, but after some drafting I realised that the spacing of the gallery widget wasn’t very effective unless it took up the width of the page. So I decided to redesign the page.

These are my third designs of my webpages. They're more detailed and in-depth.

These are my third designs of my webpages. They’re more detailed and in-depth.

Here’s my final design for the homepage and portfolio page. I’ve changed the gallery widget to just a thumbnail grid format. To enlarge the thumbnails, the user will click on the icons and the icon will expand into the full size image on the page, with navigational buttons on the side to go to the next or previous image.

Scan 5

About and Contact page designs.

The About and Contact page remained pretty much the same. I just cleared and neatened up the overall layouts of the header, background and footer to the pages as a whole to make sure that it was all consistent, neat and easy to understand.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s