Interaction Design

The structure for my website is shown in this image. i used my home page as a place that leads you to eh various parts of my website. I think that this way of designing is effective and that it’s helpful to the viewer to see what parts of my portfolio are there and how i can show them the best.

This is a master wire-frame that is design to cover jst about all of the pages

wireframe

wireframe 2 lawrencefolio

Here is my wireframe.

I never considered having a left sidebar before, but it’s growing on me. I don’t mind this structure, but I am finding that the content section (550px wide) may be slightly small? Then again, I don’t want the user to be overwhelmed. This did help me to see where parts of the site end and begin.

Framework for my style guide.

These are the wire frames I made to replicate the finished web page I’ve been working on. I made these to go in my style guide so I’ll know what the basic framework is.

I changed the way the navigation looked in the header, and added a third navigation towards the bottom of the main content part of the page.

My frame for my portfolio site is  3 divs so very simple. a header, content and sidebar. the blog wire frame diffres just a little bit from the main wire frame. the side bar is a little skinner.

Like I’ve said before, I have made a lot of changes throughout this project… but defiantly for the better.

My site structure hasn’t changed much from when I started a month ago, but the idea of my site has grown a lot. This site has one master page and stays constant throughout the site, but continues to change within the content area. So instead of structuring the whole site, I kept my mind focused on how each content page would function within itself and the site.

Keeping myself restrained has helped my creativity reach a whole new level. I’m excited for this site to be up and running in WordPress.

Here are some of structure pages that are guiding my design decisions.

[caption id="attachment_4423" align="aligncenter" width="300" caption="Wireframe of Portfolio page"][/caption]

The 12 column grid really helps keep proportion and positioning. I think next time I do a site that I will use the 16 column grid for more options. I had to remember to KISS.

My sketches are scattered accross post-it notes stuck around my house.

A few sketches of my site that I managed to round up are right here:

It’s hard to see, because my sketches aren’t very tight but I’m playing with large margins and a sloping design that starts heavy in the top-left and moves your eye down to the bottom right.

Here is the wire-frame that I ended up with. I’m a little worried that I’m creating some weird negative shapes between the margins, so I’d love some feed back.

It’s a 4 column grid, 220px per column (20px gutters).

This is the sitemap and wireframe of my website.

So I went pretty straightforward with this, the site is divided into 3 sections that are the sidebar and two content sections. The main content is where all the different pages in the side are displayed, while the secondary content stays the same. I wanted this to be very simple and easy to navigate because the last thing I want is for someone to get frustrated and leave.

This is the Wireframe for my personal site.

The structure is simple on purpose so it doesn’t distract from the content. The goal is for the content to be the focus, hence it has the most space. The navigation is straightforward and easily understood so the user can spend more time enjoying the site.