This would be what the portfolio page looks like.
The left side bar would be where mini pics of portfolio pieces are, along with a short description. The big area on the right would be where a large picture of a portfolio piece would be shown (when a small pic is clicked on). Then underneath it would be information about that portfolio piece. The header would have my logo on the right side, and all the navigation on the right side.
There are three things that are most important for my personal portfolio website: My portfolio, a blog, and information about myself.
my site map
My portfolio section would include pictures of designs I’ve made, and some would have detailed descriptions. Like sketches, the process of how I got to the end product, and written descriptions. The “about me” section would include information about myself, as well as some way to contact me.
I wanted the site to clear, simple, and concise. The viewer needs to be able to quickly a easily access and assimilate the information provided. Hopefully this graphic explains things for you.
I cut out a section that wasn't needed
Planning out my site map helped me to actually flesh out what pages my site consisted of. Before drawing it out, the information to meet the objectives was a little ambiguous and I wasn’t sure if I any of the content was missing. The process of creating my site map helped me to see some major holes in my information and where I had excess content not related to the objectives.
The following show the general relation of the main pages of the site and the sub navigation categories of each page locally:
Site Map
The wire frame has undergone a little bit of revision. My aim for this site is to stick to the main web conventions as much as possible. I imagine 5th graders have a ton of experience surfing the web and, by using the conventions, I hope to make navigation of the site as intuitive as possible. My main goal in doing this is to keep their attention on the content, rather than trying to figure out how the site works.
The initial wire frame had a side bar on the right. After playing around with the design of the main content, however, I didn’t see a need for it. The current design is as follows:
Wire Frame
Creating structure by using wire frames…
From the sketches I made earlier, I used those to create a wire frame that I can use later on as a basis for my design. By looking at how I want the basic structure to be, I can go on to make a gray box and so on.
my basic structure for website
I will probably continue to work on more wire frame ideas, but so far this one is the one I like the best out of all of them. I think having a wire frame is a good idea, because it helps to know what the layout should be, and can be used as a sort of map while designing later on.
Unable to restrain my desire to design, my wire-frames are way over worked. I admit to have wasted time on details and I’m not ashamed in the least. I’m having a blast.
I’ll quickly represent the several versions in order of their creation:
Graybox 1
I began focusing on the different types of erosion. Before long I realized that this approach may not be very helpful to the student or teacher. Landforms don’t just change through erosion. I neglected to include the lesser known but equally important principle of deposition. They are really the yin and yang of this natural process that shapes our world.
Graybox 2
Although this was an improvement, it became apparent that I’m a boring 30-something trying to design a website for kids. So below is my first stab at trying to redeem myself.
Graybox 3
After nailing down the content & concept of the site coming up with the structure seemed to come very naturally.
My site is going to have 3 basic learning areas, with one overview/summary area.
My site map
The wire frame of my site is simple at the moment, and I don’t anticipate the site being cluttered with much more. While there will be a guided or preferred way to move through the site, the navigation will be under the main logo so people will still be able to move around freeling
My site's basic layout (probably less than 960px)
I did have a little trouble making the wire frame because it seemed like I was having to guess a lot on how much visual weight the design elements would take, and so I’m sure the structure will change through the process but that’s the general idea.
Presentation of the information
Presentation of the information
It is most important for the information to be presented in a logical way to help the main audience, the ten year old students, understand and learn. For this reason I’ve broken the information into five easy categories. To keep it simple, each secondary page will contain all the information for that topic and for now it will scroll down as the student goes through the data.
Here is an overview of the structure of what I would like my website to include (according to the content that I have found online). I also wrote down the objectives that I need to fulfill so that I would keep that in mind when I was designing the structure.
The Monograph is required reading before the first day of class, but you may also be interested in the 30+ interviews from international web professionals and other resources that the site offers.
