Portfolio Design - AdamSpace

The design stage of any project is a long and messy one. Scrolling down you will find some early sketches of ideas and concepts I had, and how some of them progressed into wireframes. Some elements from these sketches were still used, as you will probably notice!

The start of a design process requires some sort of brainstorming and/or idea gathering. Somewhere to spill all your ideas in order to have a solid reference when beginning the implementation process.

In the video below I illustrate my ideas for the portfolio page structure. I also include a brief on the function of each page, and the elements on them.

The initial sketch of my portfolio home page (above) follows a different concept of layout and navigation design. The orbs are hyperlinks, and are spread around another central orb. I have always liked this alternate way of presenting data (buttons, in this case) so I thought this would be a good starting point.

The orbital idea was a strong possibility. Each page would have the orbs positioned differently, as does the solar system. I felt however that while my various HG pages would be easy to design and implement, there would be very little gain other than them being aesthetically pleasing. How would navigation work? How would it be displayed on the page? Apart from having the navigational buttons and nav bar as orb images, I couldn't answer myself these questions. So I decided to scrap the orbs, and draw up a new design (right).

Probably a standard page design, but I tried to alter it by vertically mirroring the list elements one after the other. The navigation bar and buttons were then easier to design since I had no restrictions to shape and no concern of disrupting the flow of the page, that I may have had with the orb design.

In the 'Home 1' wireframe (right) I show the home page design and what each element (box) will contain.

The biography and contact pages were simple to design, as a small amount of information will be displayed on them. While drawing, I maintained the overall block layout, in order to stay on track with the rest of the site. Features like my Youtube channel, Twitter feed and email will also be clearly displayed for the user to contact me.

Above are two initial page designs of the 'Projects' page. The left follows the orb concept and the right the standard block layout. Once again, I chose to implement the block layout for the reasons stated before.

My final wire frame of the Work page. I decided to rename the page from Projects because Work is a more appropriate term for a portfolio.

My work will be listed as blocks, progressing down the center of the page. Each individual project will link to it's respective web page. I plan on placing a transparent placeholder that covers the entire width of the project element (, so I won't need to create a link for each of the twelve elements.