This is the design we chose to go with, but if yours is better we could go with that. The way it works is you'd start on a mostly blank home page with only the navigation and some directions, and then you'd pick a person or category and that image pops up as the background. If you picked a category, it would default to the first person, and if you picked a person it would default to their Love pic. The white underline is for mouse over, and the student pics jump up with the name when moused over. Active selections go blue.
The shelves slide out from the side revealing the selected person's profile and some detail on what the photo is. We were also thinking that all the photos would be arranged in a large grid that would have some nice movement to the next desired pic. We also talked about having the person's favorite song play while they are selected.
These really look great so far. For purely aesthetic reasons, I like the transparency and the variety of colors a lot. They add visual interest and make the interface more enjoyable to work with.
I might be making this more difficult in my head than it would actually be, but having separate navigation for loves/defines/fears/hates and each student might be complicated. Try to follow with me here - suppose someone chooses a student (Amalia for example), they would then be able to use the navigation at the far left to view just her loves/defines/fears/hates, right? But if they were to click this same far left navigation at the beginning, it would default to the first person (not Amalia, or whoever). So different things are happening when you select that far left navigation at different times. Did that make any sense?
Would the user be able to open and close the drawers on their own? If so, they would have easy access to see the full image in the background without anything overlaying it. Also, the ultralight text used for all the information might be a little hard to read against the light blue background.
I really like the way you have your large image as the main focus. i think it makes it look very clean and neat. I am immediately drawn to the page.
As far as the second page, I think that you should have the colors of the information page box correspond to the box color of the selected person. I think i've suggested this for other groups too, but as a user I know it would really help me on the site, especially since you have people's pictures below and they're smaller than a normal size might be.
The main selection color could be a monochromatic, a light Grey to be different than the other colors. Im also wondering if youre going to include a title, our class name or something and where would that fit in on your large image layout.
I like the fact that the picture takes up most of the screen. On a lot of the other designs the picture is placed into a smaller pop-up and this makes it hard to appreciate the content.
I know that we talked about it in class, but I feel like the love, hate, fear menu could be placed somewhere else. Perhaps it could come down from the top? I'm not sure, but I think that it would be nice if the only thing on the bottom were the students faces.
The only other thing I wanted to say was that I agree with Sarah about the starting page. I think it should be some kind of gray or neutral color. This way you don't say something about the class that you don't want to. But altogether I think its a great design.
I really like that the main focus is the image, especially since within the info menu the picture is described by the person to show why that image is about them. The menus on the side are much better with rounded edges, not such strong edges, and the same color as the tab on the bottom. Love them. I also like the change in the "loves, defines, hates, fears" menu being pushed over from the side and given more room. I think this design is really successful and I'm excited to see where your group is going to go with this...great work!
Here the layout is very developed. I like the color coding to connect students with their content. I also like the darkened info box which allows for text to be read easier than what we had before. Again maybe this does not have to be transparent at all though, since it can be hidden, though this does give it a good effect that is appreciated. The use of the color rainbow is very nice and pleasing to the high, no harsh color changes and there is no feel of object seperation from the project. Most items seem to work very well together.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
My main problem with this layout is the navigational issues we talked about in class. (Adam brought up the same issue).
I think you are best served to use tham as a multiple navigation theme...search by content or person...
This necessitates a basic (more general page) for love, hate, fear and define...and one for each person. They need a bit of design and I am curious to see how you design them.
You will also need to address the home page.
I like the multicolor and larger names..in general I feel that most of the changes have been positive ones.
I was a little confused by the left hand navigation box because loves looks like it's underlined but then fears is highlighted. I wasn't sure which one was "on." It's really nice that you can browse by person or by subject. What image is there at the very beginning when you haven't clicked anything yet? I'm worried that it might look a little empty without any photo there.
I really like how much room there is for the content; there really is no dead space in these layouts. My only suggestion is make sure you call out that the roll-out panels can be "rolled out" - having windows come from the side would be pretty new to many users, especially the not-so-computer-literate ones. Even the concept of "minimizing" a window is still foreign to some. So, do something to those buttons - make them glow, or animate them somehow so the user's attention is drawn to them.
I really like this design. My only beef with it is that I feel like the info box is given a small amount of space, although you all have made it big enough to hold all desired information. It feels pushed to the right, even when the window is open. I think to me it's an alignment issue. I think some kind of aligment with the small profile images might be nice, or something for the info window to meet up with/relate to. I think there could be some more room for breathing with some of the type. That's really my only thing. Making the window maybe 50px wider might make it more comfortable, especially since the photo behind it is largee and you are using opacity.
i definitely enjoy these layouts, which is why my comments are only on slight tweaking.
first, good job on the small heads on the bottom in their placement. before, you had them enlarging in width and causing some awkward space, but now since they increase in height, you don't cause any placement issues. so good catch there.
i also really like the slide out bars, which is fitting since my group copied that idea in a way.
so now for the tweaks! 1. using helvetica neue ultralight is not always then best decision unless you give it a lot of space in between letters, when not in all uppercase. so either pull out the spacing, or switch to using bold and regular, and ditch the light/ultralight.
2. the bottom left bar - you want these to be seen more, probably go with regular here, too.
3. using rounded corners on the pull-out bar doesn't match the square face photo. so maybe place those in a rounded square too, so it all matches!
the simplicity of this design is nice. i like that you decided to go with the spectrum at the bottom rather than a gradient of one color. the fact that you guys went with the design with the large background images separates this design from everyone else. the simplicity works well. the slide-out bars still feel a bit awkward to me but they're easy for the user to locate.
16 comments:
This is mostly for Adam's benefit:
This is the design we chose to go with, but if yours is better we could go with that. The way it works is you'd start on a mostly blank home page with only the navigation and some directions, and then you'd pick a person or category and that image pops up as the background. If you picked a category, it would default to the first person, and if you picked a person it would default to their Love pic. The white underline is for mouse over, and the student pics jump up with the name when moused over. Active selections go blue.
The shelves slide out from the side revealing the selected person's profile and some detail on what the photo is. We were also thinking that all the photos would be arranged in a large grid that would have some nice movement to the next desired pic. We also talked about having the person's favorite song play while they are selected.
These really look great so far. For purely aesthetic reasons, I like the transparency and the variety of colors a lot. They add visual interest and make the interface more enjoyable to work with.
I might be making this more difficult in my head than it would actually be, but having separate navigation for loves/defines/fears/hates and each student might be complicated. Try to follow with me here - suppose someone chooses a student (Amalia for example), they would then be able to use the navigation at the far left to view just her loves/defines/fears/hates, right? But if they were to click this same far left navigation at the beginning, it would default to the first person (not Amalia, or whoever). So different things are happening when you select that far left navigation at different times. Did that make any sense?
Would the user be able to open and close the drawers on their own? If so, they would have easy access to see the full image in the background without anything overlaying it. Also, the ultralight text used for all the information might be a little hard to read against the light blue background.
I really like the way you have your large image as the main focus. i think it makes it look very clean and neat. I am immediately drawn to the page.
As far as the second page, I think that you should have the colors of the information page box correspond to the box color of the selected person. I think i've suggested this for other groups too, but as a user I know it would really help me on the site, especially since you have people's pictures below and they're smaller than a normal size might be.
The main selection color could be a monochromatic, a light Grey to be different than the other colors. Im also wondering if youre going to include a title, our class name or something and where would that fit in on your large image layout.
I like the fact that the picture takes up most of the screen. On a lot of the other designs the picture is placed into a smaller pop-up and this makes it hard to appreciate the content.
I know that we talked about it in class, but I feel like the love, hate, fear menu could be placed somewhere else. Perhaps it could come down from the top? I'm not sure, but I think that it would be nice if the only thing on the bottom were the students faces.
The only other thing I wanted to say was that I agree with Sarah about the starting page. I think it should be some kind of gray or neutral color. This way you don't say something about the class that you don't want to. But altogether I think its a great design.
I really like that the main focus is the image, especially since within the info menu the picture is described by the person to show why that image is about them. The menus on the side are much better with rounded edges, not such strong edges, and the same color as the tab on the bottom. Love them. I also like the change in the "loves, defines, hates, fears" menu being pushed over from the side and given more room. I think this design is really successful and I'm excited to see where your group is going to go with this...great work!
Here the layout is very developed. I like the color coding to connect students with their content. I also like the darkened info box which allows for text to be read easier than what we had before. Again maybe this does not have to be transparent at all though, since it can be hidden, though this does give it a good effect that is appreciated. The use of the color rainbow is very nice and pleasing to the high, no harsh color changes and there is no feel of object seperation from the project. Most items seem to work very well together.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
I really enjoy this layout! The head (sort of "Guess Who!" display is well integrated and very clever! Also, the text box seems to be slightly more opaque than the original design, which conveys the information much more legibly.
The only thing I'm concerned about is the menu bar... I'm not particularly happy withit in the bottom left corner. I'd prefer it in the top left. But hey, that's merely my 2 cents.
Elisha really wanted you to see her comments : )
My main problem with this layout is the navigational issues we talked about in class. (Adam brought up the same issue).
I think you are best served to use tham as a multiple navigation theme...search by content or person...
This necessitates a basic (more general page) for love, hate, fear and define...and one for each person. They need a bit of design and I am curious to see how you design them.
You will also need to address the home page.
I like the multicolor and larger names..in general I feel that most of the changes have been positive ones.
I was a little confused by the left hand navigation box because loves looks like it's underlined but then fears is highlighted. I wasn't sure which one was "on."
It's really nice that you can browse by person or by subject.
What image is there at the very beginning when you haven't clicked anything yet? I'm worried that it might look a little empty without any photo there.
I really like how much room there is for the content; there really is no dead space in these layouts. My only suggestion is make sure you call out that the roll-out panels can be "rolled out" - having windows come from the side would be pretty new to many users, especially the not-so-computer-literate ones. Even the concept of "minimizing" a window is still foreign to some. So, do something to those buttons - make them glow, or animate them somehow so the user's attention is drawn to them.
I really like this design. My only beef with it is that I feel like the info box is given a small amount of space, although you all have made it big enough to hold all desired information. It feels pushed to the right, even when the window is open. I think to me it's an alignment issue. I think some kind of aligment with the small profile images might be nice, or something for the info window to meet up with/relate to. I think there could be some more room for breathing with some of the type. That's really my only thing. Making the window maybe 50px wider might make it more comfortable, especially since the photo behind it is largee and you are using opacity.
i definitely enjoy these layouts, which is why my comments are only on slight tweaking.
first, good job on the small heads on the bottom in their placement. before, you had them enlarging in width and causing some awkward space, but now since they increase in height, you don't cause any placement issues. so good catch there.
i also really like the slide out bars, which is fitting since my group copied that idea in a way.
so now for the tweaks!
1. using helvetica neue ultralight is not always then best decision unless you give it a lot of space in between letters, when not in all uppercase. so either pull out the spacing, or switch to using bold and regular, and ditch the light/ultralight.
2. the bottom left bar - you want these to be seen more, probably go with regular here, too.
3. using rounded corners on the pull-out bar doesn't match the square face photo. so maybe place those in a rounded square too, so it all matches!
that's it. lookin' good.
the simplicity of this design is nice. i like that you decided to go with the spectrum at the bottom rather than a gradient of one color. the fact that you guys went with the design with the large background images separates this design from everyone else. the simplicity works well. the slide-out bars still feel a bit awkward to me but they're easy for the user to locate.
adding music is a nice touch.
Post a Comment