If I would have mocked up my site more, It would have turned out nice. Instead the most important thing is figuring out space and value on the page. Both are lost. Hope this helps you see again what I mean.
Composition screenshot.
I really wanted a good idea of where I was going visually with all of the different sites, so i made a mock op of each one covering a different type of topic.
The home page that explores all type and rollover treatments.
A page depicting one of the different types of simple machines
A page that gives real world examples of simple machines
A page encouraging students to create their own compound machines
A page citing the purpose of the sites and my sources
As I have been working on these I am realizing that my skill set, hinders me making the pages look how I had envisioned them. At this point, if I can link all my pages, have content that adheres to a style guide, and get the message of simple machines to 5th graders, I will consider this a success.
My website:
This is my photoshop comp. I like the look of it because it’s clean and simple. I don’t want to overload on the information. I choose the colors because they seem like colors a 10-year-old would like.
I redesigned my mock-up to look a little more kid friendly.
It’s got a pattern for the background (or wrap around), and a happy, smiling raindrop. I also implemented some waves to emphasize the fact that this is a website about water. I made everything different shades of blue. Please let me know if you guys think that’s too much and I should try a different color, or if it works nicely.
second design for water cycle home page
design for condensation page
I think I like the brighter blue better for the subhead…
Here are a couple of pages that I liked out of my most recent photoshop comps. I think having the tabs really does help out more as far as “non-linear” navigation, don’t you think? Also I’m not exactly sure what to put in the footer, but also I kind of would like to know what is the legal policy on copying text from other websites? I tried hard to write my own text but since you said I needed more information on the page I don’t think I could have written all that so I just copied more text.
Here are some mock-ups of what my website will look like. I think I need to work on the landing page to look a little more interesting because it probably doesn’t look so amazing right now. Also I don’t know if I’ll stick with these colors, but I would like to limit the color scheme. I just want each page to be really simple so that they can just take in little bits of information at a time without being overwhelmed with scrolling down lots of text.
This is the challenge, making the actual website work as imagined in Photoshop.
So far, the wireframe is built and lacks a couple functionality details. From past projects I’ve found it easier to make one wireframe, like a template that is refined, and then to make the rest of the pages is quicker because only the content needs to be changed. All of my written content has been finished.
A challenge I’ve had is putting my navigation and footer information in an external HTML document and getting the connections to work. The images show up in Dreamweaver, but the connection isn’t making it to the web. So, the learning process continues.
Being able to pull all my work together to create what I have been visualizing for this website was a very rewarding step. And as usual, it has pointed out areas that I need to go back and adjust.
Photoshop mock up for 5th grade simple machine website main page
I realized that I had done my grey box method at the full browser size (1024 x 768) instead of 960 x 600. Luckily those adjustments didn’t take me too long.
Since my grey box method nailed all of my elements down, the thing I got to concentrate on most was color. Color actually seems to be a finicky thing with kids, especially tween 5th graders. Too monotone and it’s boring, too many swatches and it’s overwhelming and a bit nauseating. I took a good look at other popular kids websites, and noticed that the gender-linked colors (pink/blue) were even, and they were indeed bright! Even though these bright colors often reflect immaturity, the design brought back a level of sophistication and communicated to the young viewer respect. “You are young but you’re smart enough to use this site”. I don’t know if that insight is too hippie-dippy of me, but in today’s world I know that that market is very, very finicky. I looked at good color pallets on kuler and found a few that I liked. I combined core colors and landed on 11, which seems like a lot, but no more than 4-6 will be used on one page.
Also, like everyone in our class, I was hesitant to comp this in Photoshop because of the limited type options. I worked from my grey box method to get to this in Illustrator and then converted it to Photoshop and was able to get a better feel for it. Good practice!
This is a little closer to what I had in mind, but didn’t have time to make in my first photoshop comp
Photoshop comp - Constitution website
My main concerns are about balance and where my site’s elements are placed
I’m not as concerned with how the logo/illustration quality because at this point they’re about as good as they are going get if I want to get the project done, but critiques are always welcome. (the logo has a long way to come but sadly my photoshop skills are lacking in that dept.)
Any input is appreciated!
Home
organism survival
I’m still playing around. I’m thinking the seaweed, fish will be static on all of my pages. I don’t know how I feel about the shark yet, it felt kind of nice in the corner for now. Once I get more images completed I will be able to get a better feel for it.
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.
