ARTM2210 Intro to Web Design
Just another Intro to… siteArchive for Student Work
Final Review – Single Page Site
For my last review I chose to reflect on my Briar Rose single page site.
I think I did a decent job at balancing out the most important elements of the page as far as size goes. The header is large, but not too large that it drowns out the image slider; the navigation, while at the bottom as the page, is still visible and clearly navigation. If I were going to do the project again I would take out the roses on the top header, they look awkward and I do believe they throw the balance of the page off slightly; the eye gets stuck on them. I believe the whole page is very unified; everything looks as if it belongs together. All of the content is in the same graphics style and made from the same color palette, which helps a lot. I really liked the layout of my page from the image slider down to the navigation. I liked the idea of the user scrolling through the graphics as if reading a storybook. If I were to do this project again I would make the storybook aspect more prominent, possibly by finding a more engaging JQuery plug-in that actually looked as if the user was flipping pages. As I mentioned before, the color palette I used really unifies my page; all the content is made from neon and pastel colors. I think that my color choice really adds to the story line and over-all feel of the page, it gives it a child-like feel. My page hardly virtually no texture to it whatsoever, all of the content is very smooth and cartoon looking, which is exactly how I wanted it to be. I think the navigation of the page is very effective. The user has two options for viewing the storyline: the buttons at the bottom of the page and the arrows on either side of the image slider. One big improvement that I would make to the page is making sure that users knew to hover over each image to get the words to appear.
My biggest lesson learned during this project is how to apply and manipulate JQuery to my advantage.
Comments off
Final Monthly Review
For this Final Review I chose our group project site, deja-shoe, that I was very please with how clean, functional and open that the site got much of a positive feel from the class.
Balance, Unity, Emphasis, and Layout, Color, Texture and Navigation:
The balance was centered and even across the page. With the logo in the center giving the actual page an anchor that the sides of the page feel symmetrical and even. That does enhance the emphasis of sleek, simple and professional which was key to the unity of the site’s identity. Layout was based much on other shopping sites and giving us a good direction for design since you don’t have to reinvent the wheel but just adapt it to your ideas and style. Color seemed to be the biggest gripe from most and we at first had a hard time agreeing on a color that appealed to everyone but the Blue that was chosen wasn’t vintage and very facebook in shade. Our site looks very smooth and the color does pop because it is more vibrant than the other colors associated with ‘vintage’ (browns, oranges, rustic accents, pastels,…etc) and we could alter that to give the site a better sense of style. The Navigation was something that I really liked because everything was click and go, while not having to hunt for links or button to find to get what you want.
Improvements would be expanding the content, upgrading content, changing the colors to give it a more ‘Vintage’ feeling while keeping the positives of the navigation and maybe give some texture in places will give the site a more aged look. It come to my mind the look of a 1970’s VW Van, faded orange paint with rust accumulations along the body of the frame of the vehicle, a very dingy sun beaten off white for the roof, and dirt/dust on the tires as so you have a brownish/black. These colors could be incorporated along with a pastel blue as that they would contrast and be more appealing while giving the site it’s own personality and identity away from Facebook.
Comments off
Final Review
For my final review, i chose my single page site based off of Jack and the Beanstalk. This site uses balance and unity to its advantage in the way that it keeps texture, navigation and graphics the same throughout the whole experience. All of the images have the same feel to them, and once a user navigates for the first time, it will never change. The navigation is displayed in a creative manner, and is still easy to understand. To begin the story, an apropos button is displayed for the user to do so. In order to climb the beanstalk, the user needs only to click the buttons that say climb. No area of the page is too cluttered, while no area is too empty either. The color of the site has an inviting, fairy tale feel to it, which emphasizes the story and gets the user more involved and intrigued. The colors that stand out the most are within the parts of the images/story that mean the most, and no colors are distracting and hard to look at. The layout of the page is different and unique, as it starts the user at the top, then immediately to the bottom, in which they work their way back to the top to start the story all over again.
To improve this site, I could implement animations to enhance the user’s experience. Since Jack brings items down the beanstalk in the story, they could equally be shown falling the beanstalk through animation. A character could be placed at the bottom of the beanstalk, and whenever “climb” is pressed, the character could dynamically rise and look as if it’s actually climbing the stalk. Sound effects could also be added to enhance the experience of the story.
Comments off
Monthly Review 4: Kiviung
For the final monthly review, I will be reviewing my single-page site, Kiviung. I designed the site to function like a virtual storybook, and I feel that it meets that goal very well. Each of the panels is framed to create a visually interesting image. These images are balanced because they make full use of the entire frame. The storm scene is a good example of this, as is sandwiches Kiviung between the clouds and the sea, showing that he is in danger. The framing also establishes a concept that while the frame is a united piece unto itself, it is also the sum of its parts. Kiviung frequently appears in the foreground, an effect which creates depth of field and also indicates Kiviung’s sight line as the action in the background. It also puts emphasis on what Kiviung is looking at, thereby aiding in telling the story. The color palette is primarily made of of blues, as this suggests the cold weather of the Sub-Arctic region in which the story is set. I used vector rather than texture because the plain art style prevented the viewer from geting distracted. Texture was implied on the log to make sure it was seen as a log, but texture use was minimal otherwise. The navigation consists of big arrows, which go back and forth like pages in a story book. It is very intuitive.
The one thing I think I would change most is consistency in navigation. The arrows are not always in the same place, and this set some people off. Sometimes the arrows were only off by a handful of pixels, which could be especially annoying. I would also make sure that the text was consistently in the same place, and also that it would always appear, something that on some browsers it didn’t do. I would probably use external style sheets for each frame if I did this project again, because much time was spent sifting through CSS trying to find what I was looking for.
Comments off
Final Review – Single-page site critique
I chose to critique my single-page site, illustrating the folklore “Old Sultan.” The layout of my site is very simple. I illustrated each scene within a picture frame, so the user feels as though a story is being told. In terms of design, I believe it was very successful. I kept the style of illustration the same throughout each scene to create unity from one frame to the next. Texture, however, is not something I incorporated as well. Most of my illustrations were flat in color and lines were used to create as much texture as possible. Although this is the case, I find the contrast between the illustrations and the texture of the frame to work well overall. As per the actual story text, I wanted this part to be emphasized the most. Since most of my images were flat, adding a simple drop shadow element to the text box made it pop off the webpage.
As far as navigation, I placed arrows within the text box so the user can read each section of the story. Each frame had multiple “slides” of text; to illustrate this I animated some of the elements. This way multiple scenes could be incorporated and easily understood within each frame. However, a bit more work and thought could have been put into it. I was so caught up with getting the jQuery to function correctly, that I overlooked important aspects that the user may want to take advantage of. I did not include an option for the user to go back to the previous part of the text. If they wanted to go back and reread a certain section, they were unable to. Instead, the user has to refresh the page and start from the beginning. I didn’t think about how the user is not going to be as well informed about the page as I am; this large mistake will most likely confuse the user, or cause them to get lost.
For future projects, I need to decide on the navigation I will be using and how I want to the user to move through the site before I begin designing anything. I got half way through and realized that there were problems, but it was too late to fix them. Overall, I am very happy with the way the site turned out visually. The aspect I would love to redo is the navigation technique that I used.
Comments off
Final Review
For my final review I decided to review my single page website, King Thrusbeard.
The balance of my page I would say is okay. I designed it in a way so that everything on the page that you were looking at was balanced and that it would draw your eye across the screen. By placing the scrolls at the top and the bottom of the pages, alternating them, is one way I made my page balanced. Another way I think I made my webpage balanced was by making the corresponding graphics about the same size as the scrolls, unless they were the background of the scene.
The overall unity of my page can be seen in the style of the graphics being used. They are all vector art and are all very simple. The colors are similar to tie everything together even more. To not clash with the unity of the page, the only emphasis is seen in the arrow users are supposed to click to navigate through the story. The arrows are a black color and stand out from the pastel and dull colors used in the graphics and the light tan used as the scroll color.
As mentioned before the colors are all similar to tie the page together and are dull or pastel colors so it is more appealing to look at. The layout of the page is simple and easy to follow and so is the navigation. I used arrows to show the users were to click to continue through the story. On the first slide I even stated, “Click to read story” so readers would know what to do from there on
Overall I liked my page but there is a lot that I would change. I would have used a different font and made the scrolls a lot smaller so people would be inclined to read them. I would have made the scenes in a frame instead of a continuous line where you could see the next scene and sometimes avoid using the navigation. I would have added more CSS so the arrows would have changed colors so readers would want to click on them and continue reading. Overall I think my page was successful, but knowing what I know now I would make the changes I pointed out so readers would actually want to read the story.
Comments off
4th Monthly Review: Déjà Shoe
Upon reentering my group’s website for Déjà Shoe, I found that I am still proud of what we had accomplished. The amount of time and effort put into the project shows greatly in each page. Though there is always room for improvement, we were able to meet the main requirements for a successful website. To prove this statement, I will compare it with the information I read in the book called “The Principles of Beautiful Web Design.” These chapters put great empathizes in the importance of navigation, hierarchy, and unity.
Navigating through our website is fairly easy for viewers to achieve. We stuck to the traditional layout, with the use of a header, footer and side navigation bar, so that new users will still be familiar with our site. In addition, we added breadcrumbs on several of the more in-depth pages to prevent them from getting lost. I also feel that the majority of our buttons are obvious that they are clickable because I used a hover tag for them. Besides the easy navigation, the use of hierarchy improves our site as well.
In the first chapter of the book mentioned above, it discussed the importance of the use of emphasis. It suggested that one should create a focal point for the items they want to stand out. To accomplish this, we stressed the importance of our headings and logo by placing them in the top center of our page. We figured that area was the best place to grab the viewers’ attention. Other methods we used to create hierarchy were color contrast and isolation of elements. We were able to incorporate these techniques in every page, which helped with unifying our site together.
When clicking through the Déjà Shoe website, all of our pages have a clean, professional look, without many distractions. The elements on our site are arranged well so there is an asymmetrical balance. The book recognizes the need for viewers to recognize that each page belongs to the website. I feel we have succeeded in doing so because we kept the same look throughout our site. The layout, navigation, hierarchy, and balance all flow well together. The main issue our group realized was that we made a poor decision in our use of color and lack of texture.
We discovered during critique that the blue we chose to use is very similar to the one used for Facebook. Many of our classmates expressed that this issue was distracting and caused them to think of Facebook rather than Déjà Shoe. For future projects, I will make sure I do not repeat this mistake. In addition, we did not really use texture in our website. If we incorporated this approach, our site could be more interesting. However, we would need to find the right balance, as to not take away from the sight as a whole. Overall, I feel our site was creative and nicely organized.
Comments off
Final Review
For our final review, I have chosen to critique my one-page site. This was my most successful project, and the project I learned the most from.
The balance of my one page site I believe was very successful. Each page or section of the story was a box that was centered in the middle of the page. This made it a focal point, and the user can easily figure out what is going on. Each page was designed to have balance and unity. I tried to have the story come across without any confusion. However, I don’t know if the story was completely understandable. The website itself works, but I could have improved each page. I tried to make to take a some what complicated story and dumb it down, but I probably should have gone even farther with that.
I emphasized Aristaeus, who was the main character in the story. I had him on almost every page, and emphasized what he was doing, and the emotions he felt through the story. Having on each page also unified the site, and kept the story flowing.
The layout of the page is balanced and centered. Each page is basically the same, and when navigating everything works out. The color of the page is a yellow/gold/brown scheme, to emphasis that Aristaeus is a bee keeper. I made the background a bee hive wall as well. Some people said it looked more like a giraffe than a bee hive. To remedy that I’d have to change the color, and add more texture to it. I think the texture and color of the page matches the story pretty well. The texture works throughout the website. It is simple and doesn’t overwhelm. I tried to keep everything simple.
The main improvements I would make on this project are: getting the story to come across easier, and the background being less of a giraffe. To make the story come across easier, I suppose I could add more text. I tried to avoid using text because the story is greek mythology, and children don’t understand that language. I could probably paraphrase it. Adding text, and fixing some of the pages would help the story come across. As far as the giraffe background: just changing the color a bit, and adding texture would probably do it.
Lessons learned: Keep everything organized, and make sure you know what code is. I learned a lot about coding in this project, and I ran into a lot of problems because I wasn’t completely organized.
Comments off
Blog Post #4: Personal Site Review
Because it is freshest in my mind, I will review my group’s shoe website – Simplicity shoes.
I feel that Simplicity Shoes was successful in many areas. The site contains a good amount of balance. Colors balance out the page, for example. The homepage seems to be aesthetically pleasing to the eye. Almost everything is lined up to avoid distracting gaps or hanging corners. Of course, there is always room for improvement. I wish the navigation lined up with the end of our header image, and I wish the Facebook and Twitter icons lined up with the right side of the page. Going back to the navigation, I wish the buttons were smaller to match the bottom navigation.
In terms of unity, I think our site is fairly successful. Our colors are uniform, our type is mostly uniform (except for the head title and price of the women’s and men’s pages), and our photography is both uniform and cohesive. The photography also matches the feel of the site we were going for – simple, and clean. An off white background keeps it simple, but not too “classy” looking.
I also think our group did a good job of using emphasis within our site. However, the top navigation bar could have probably used a bit more emphasis (but then again, maybe it works because it is so big). But we did put the biggest emphasis on what was most important – our product. With the site’s colors and theme being a bit more subdued, the photos pop off the page in terms of color and simplicity.
The layout plays a HUGE part in how the site is perceived by onlookers. Our homepage, to me, feels modern, yet simple (which is what we were going for). The lookbook and about us pages also feel fairly modern, as do the women’s and men’s pages. I do think they could be a little bit more consistent in terms of spacing, font, and color usage, but overall (for a beginner class) I like the overall finished product. I do wish we would have pushed it a little farther, though.
I have touched on color in the pervious few paragraphs, but I want to emphasize again my love for the color palette we chose – mostly grays, blacks, and whites with pops of color in the pictures of the shoes (and Facebook and Twitter icons). I feel as though the color scheme was one of the most successful portions of our website.
In terms of texture – we did not have too much texture throughout our site, except for our background – which definitely helped. Originally we were going to go with a simple gray or black background, but I am happy that we chose to go with a subtle, dark background. It makes the page pop a little bit more. Though a plain color may have been technically more “simple,” the textured background’s subtleness adds to the overall theme in a very different way than I thought it would.
Navigation. Kelly and Brady absolutely killed the navigation (in the most awesome sense of the word) ! Again, going into this site not knowing much about navigation, I think they did superb. Especially for the women’s, men’s, and lookbook pages. Everything seems so intricately linked together, and I think it turned out great. However, I wish we had some sort of breadcrumbing to help designate exactly where a person is on the site. Right now, if you are on a particular page, it’s hard to tell exactly where you are on the site. However, the top navigation definitely helps a user find his or her way back to where he or she wants to be.
Overall, I think our site is very effective. The use of colors, unity, balance, emphasis, layout, and navigation all form together to create a site that is cohesive and interesting to look at. However, there are many improvements that could be made. There are many things that I wanted to do that I couldn’t figure out. But all in all, I know that we all worked extremely hard on the site – and for an intro class, I would say it is pretty sweet.
As a side note, I feel as though this project taught me a lot. Doing a multipage site has given me much more insight into how much work goes into sites that I visit everyday. I cannot imagine how many hours have been put into sites like Facebook, Gmail, and Google. Though it was so incredibly frustrating at times, I have found that facing a problem and pushing through it instead of moving past it without trying has been the best way to learn in this class. Looking back, I wish I would have pushed myself a bit more to do things that I was uncomfortable with. But I have many more web classes left, and I am sure I will have MANY more opportunities to learn even more in the near future.
Comments off
Monthly Review : Final Project
For the last monthly review, I am discussing the final group project “Kicks on Campus”. I feel that for this project our group worked well together and tried to use all of the design rules to make it better. The use of balance is probably the most obvious. Our logo and nav bar are both set to be at the center of the page when it is opened. So with everything in one giant div nothing will go beyond the boundaries. We also emphasized what was important really well. For example, if you don’t know what kicks are, just looking at the page it is very clear. On the homepage we have fairly large pictures of shoes and to any other page you go to it has pictures of shoes as the main focal point. Using the visuals as a focal point we were able to provide written content as well next to the pictures to make a more unified page. Overall I would say that the layout of our page is very basic and simple enough for anyone to use. If you need to navigate to anywhere on the page you would simply use the navigation bar provided at the top of the page. Once you get there you look at the bottom half of the page to further your search. However, there is on thing that I think our group really needed to do to make the site complete, and that is give it a little more texture. With the colors we used it gave the site a very flat look to it, which I think took away from it, especially with the white background.
In conclusion, I would say that our group ended up with a pretty good looking website. I think the only thing that we really struggled with was getting all of our files together to make the completed site. I also learned that communication is key in these kind of group projects so that everyone is on the same page and knows what they are supposed to be doing.
Comments off
Blog Post #4: Personal Site Review
Because it is freshest in my mind, I will review my group’s shoe website – Simplicity shoes.
I feel that Simplicity Shoes was successful in many areas. The site contains a good amount of balance. Colors balance out the page, for example. The homepage seems to be aesthetically pleasing to the eye. Almost everything is lined up to avoid distracting gaps or hanging corners. Of course, there is always room for improvement. I wish the navigation lined up with the end of our header image, and I wish the Facebook and Twitter icons lined up with the right side of the page. Going back to the navigation, I wish the buttons were smaller to match the bottom navigation.
In terms of unity, I think our site is fairly successful. Our colors are uniform, our type is mostly uniform (except for the head title and price of the women’s and men’s pages), and our photography is both uniform and cohesive. The photography also matches the feel of the site we were going for – simple, and clean. An off white background keeps it simple, but not too “classy” looking.
I also think our group did a good job of using emphasis within our site. However, the top navigation bar could have probably used a bit more emphasis (but then again, maybe it works because it is so big). But we did put the biggest emphasis on what was most important – our product. With the site’s colors and theme being a bit more subdued, the photos pop off the page in terms of color and simplicity.
The layout plays a HUGE part in how the site is perceived by onlookers. Our homepage, to me, feels modern, yet simple (which is what we were going for). The lookbook and about us pages also feel fairly modern, as do the women’s and men’s pages. I do think they could be a little bit more consistent in terms of spacing, font, and color usage, but overall (for a beginner class) I like the overall finished product. I do wish we would have pushed it a little farther, though.
I have touched on color in the pervious few paragraphs, but I want to emphasize again my love for the color palette we chose – mostly grays, blacks, and whites with pops of color in the pictures of the shoes (and Facebook and Twitter icons). I feel as though the color scheme was one of the most successful portions of our website.
In terms of texture – we did not have too much texture throughout our site, except for our background – which definitely helped. Originally we were going to go with a simple gray or black background, but I am happy that we chose to go with a subtle, dark background. It makes the page pop a little bit more. Though a plain color may have been technically more “simple,” the textured background’s subtleness adds to the overall theme in a very different way than I thought it would.
Navigation. Kelly and Brady absolutely killed the navigation (in the most awesome sense of the word) ! Again, going into this site not knowing much about navigation, I think they did superb. Especially for the women’s, men’s, and lookbook pages. Everything seems so intricately linked together, and I think it turned out great. However, I wish we had some sort of breadcrumbing to help designate exactly where a person is on the site. Right now, if you are on a particular page, it’s hard to tell exactly where you are on the site. However, the top navigation definitely helps a user find his or her way back to where he or she wants to be.
Overall, I think our site is very effective. The use of colors, unity, balance, emphasis, layout, and navigation all form together to create a site that is cohesive and interesting to look at. However, there are many improvements that could be made. There are many things that I wanted to do that I couldn’t figure out. But all in all, I know that we all worked extremely hard on the site – and for an intro class, I would say it is pretty sweet.
As a side note, I feel as though this project taught me a lot. Doing a multipage site has given me much more insight into how much work goes into sites that I visit everyday. I cannot imagine how many hours have been put into sites like Facebook, Gmail, and Google. Though it was so incredibly frustrating at times, I have found that facing a problem and pushing through it instead of moving past it without trying has been the best way to learn in this class. Looking back, I wish I would have pushed myself a bit more to do things that I was uncomfortable with. But I have many more web classes left, and I am sure I will have MANY more opportunities to learn even more in the near future.
Comments off
Final Review
For my final review I chose to critique my one-page site, which was about the story of The Ugly Duckling. This project was the one that I was most happy with throughout the semester. I think I used the element of design in it well, with improvements in a few areas.
For Balance I think I accomplished this well throughout my site. For the title page of my folklore, I have three ducks, grass reeds on each side and title in text above it and felt that it balanced out well together. For the other pages I think the background with a some being a barn with hills, and a sun, or a river balanced out well with what was going on in the foreground in each page for instance in some I had a nest with hatching ducklings, the ugly duck running away, swans swimming in the water with the ugly duckling looking on. I also think the placement of my text boxes works well in balancing each page.
For unity I also think I showed this well in my site. I the elements of each part of the story were balanced and went well together in the colors, graphics, backgrounds and text I used. I feel that each page goes together well but the site as a whole goes well together and gets the story of the ugly duckling across well especially to children. For Emphasis I also think this was accomplished well. I tried to put more emphasis on certain graphics on each page that were the important part of the story for instance on my second page I have a gray speckled egg that is bigger and is not hatching like all the other eggs and in the story that is a big thing because the momma duck doesn’t remember laying that egg and it is different from all the others.
For layout I think I did well with this aspect of the site but there are always room for improvements. I wanted my layout to scroll horizontally rather than vertically because I wanted it to feel like a storybook. I also divided my “scenes” of the story into different pages next to each other so again it would feel like a book and you would just scroll through them. I also laid out some of the pages so they had the same hills,farm and sun while the foregrounds changed.
For color I think what I had worked well, I used mostly simple bright colors to make it kid friendly the only thing I used a gradient on was the sky and the hills. I wanted to keep thing simple so things wouldn’t be distracting and take away from the story. For texture as with color I wanted to keep it simple so for some things it is just plain shapes for instance the river and the ground in front of it is just rectangles with color. While behind the river I used a gradient to try and give the sky and hills texture. The barn has texture in it with all the lines and graphics that help to make it look like a barn. My ducks have a little bit of texture to it with the shape making it look like wings, the feet, eyes and beak. On the title page the grass reeds have some texture with the watercolor stroke I used and the water marks help to give it the feel of a river. Lastly for Navigation this is the one thing I would change about my page and wish I had done better. I wish I had put in navigation buttons to help move from page to page instead of having to keep scrolling left to right to get to the end.
Improvements I would want to make on this site would be to add navigation buttons for one thing. I feel that navigation buttons would really help especially if little kids were on this site. I also would like to add maybe a little bit on animation to some of elements like the ducklings, the ugly duck, swans and mama duck. I also would change the the size of the text in some of the text boxes and make those look better. Lessons learned from this project that I can apply to others is navigation and scrolling, using fireworks for photos and how that can help bring things together. I also will use divs in my future projects to help make things easier to find and organize.
Comments off
Monthly Review 1
For this review I choose to use Amazon.com. Amazon, out of all the websites similar to it, (like eBay, or crags list), is the easiest I think to use. You have good sized photos of what you’re searching for, along with other options as well. I choose to look up a Micro Lens for my canon camera. In the search bar at the top, I typed in Micro lens canon. It immediately starts to find similar wording, or products that match my search and gives me the option to choose one of their phrases. Amazons page layout for search’s makes it so easy to understand where to look. The other nice thing about Amazon, is that when you make a search, other similar options appear with it in a separate section. It also shows you what other products people have bought to go with your product, or similar items as well. You can choose between buying new or used and checking out is really simple. Once you choose your product, in my case the Canon EF 50mm f/2.5 compact macro lens, it lets me know if they have it in stock. I can chose new or used, so I chose new. It comes with Saver shipping options below the product, and I just stuck with Amazon. After all of that, it lets me know I have 1 item in my Shopping Cart. I can proceed to check out, or keep shopping. I proceed to checkout.
Amazon is so easy an simple to use. People who don’t use the internet often, or just don’t understand how it all works, can easily follow Amazon. Its not hard to figure out what steps you need to take to accomplish a task. The layout draws your attention, and all the vital information you require is right there in front of you. All other information, or less important information, is found elsewhere but well organized. I find Amazon to be the simplest website to use. I never get confused or lost while using this site.
Comments off
Final Review
I’m going to use our final project for this review, our group company is named Simplicity.
Our website was very well designed. The whole site was balanced, everything meshed very well alongside each other. We really emphasized shoes and how simple our site is. From the look of the name, everything was neat and simple. The layout was proportional and classy looking, not busy. The color scheme was exactly what we wanted and gave off a simple classy vibe which was what we were going for. The color and the layout helped emphasize our products. The navigation is what made the sire seem very professional. Just about everything you clicked on had a connecting link. You could enlarge pictures of the shoes and work your way around the website very easily. There were also nice effects used for when your cursor crossed over pictures that the class seemed to enjoy. Improvement that would be made I think would be to our look-book. We really wanted to go downtown and get some nice pictures. With more time for this project, our website would have come a very long way but the end result was nice regardless.
Comments off
Final Review
For the final review I choose to write about my final project, Anytime Vintage.
My groups Anytime Vintage website has all the elements such as, balance, unity, emphasis, layout, color, texture and Navigation. I believe that our website was well balanced because we had the side bar and listed what we had on our side bar and then we always had images of our shoes in the middle of the page. For unity my group made sure that everything was very evened like having the pages look the same for when you clicked for a new category. For emphasis we had a CSS effect that when you hovered around an image of a shoe one would show up the colors its suppose to be and the others would turn black and white so that, that one shoe would stand out to you and you could learn more about it. For our layout, I believe that our layout was very simple and is easy to follow but at the same time is was suppose to keep your attention. For our color we chose to do different colored browns, and like tan/coral colors, we chose those colors because we wanted to make it have a vintage look to it and I feel like we did a good job at doing so. For the texture part of our website we had a brown leather background because it ties in with the whole shoe website and also when people see leather they think of old..such as how leather has to be aged and back in the days most things were made out of the leather so that is why we chose that texture. Finally for our navigation we chose to do a simple navigation website so it is easy to get too and so you know where to click. Our’s is very basic i feel like because when you go to our homepage you have a choice to either click the side bar and go from there or click on the images of the didn’t shoes that are centered on our homepage and that will navigate you to that category as well. To critique the effectiveness of our websites at guiding the user through the content was pretty self-explainatory.. when you go to the home page we have a short description of what our website is and how to use it and it goes from there. You could click the different types of shoes and we put descriptions of the shoes and how they were vintage and what was more modern about them today and then we provided a website for where you could get the pair of shoes. The improvements we could make for this website is put more information about it and tell people how we started our anytime vintage website.
I believe that our text for our description for the homepage could be a tad bit bigger than what it is now. Lessons i’ve learned while doing this project that it takes a lot of effort and everyone needs to be willing to help out. Overall, I think that our group did a great job at designing anytime vintage and we made it easy to get our point across. We all worked very well together.
Comments off
Final Monthly Review
For this I chose to do my final project, on the shoes website me and my group did.
For starters i think the balance was very well done. There wasn’t to much calamity on the page, and everything was nicely placed on each page. Our balance i think was a little asymmetrical but i liked that for a fact because it made the page more interesting. The balance of the colors we used were well done, i don’t think any color overpowered any of our pictures or logos.
Now the unity of each page was nicely done. Each page connected to each perfectly. AS a whole each page had the same kind of wire frame making each page seem similar but also a little different. I know the men and women page were in the same unity except for one box because men didn’t have as many shoes as women, but there layouts seemed very similar. I believe that the colors have a good sense on unity, because we only used black,gray, and white as our colors so none would every take more emphasis then the rest. The emphasis in our page was i think the home page which was done well with having a picture of our shoes and being able to click next to see the other kinds. Also our look book had a lot of emphasis because of how the picture would go up when you went over it. Though i feel our logo showed a little emphasis on telling you it was a shoe company when you see our logo. Its Simplicity but the y wind down to make a shoelace which was clever to emphasizes that were a shoe company.
The layout and color scheme i think were nicely done by everyone cooperation on what our colors were going to be. The layout was very simple i feel. It was easy to go from point A to point B. I had not a lot of trouble with the site when i navigated it. Each photo or word usually took us to a link. The color was well fitted for this page. It made it seem a little sophisticated with the colors we chose. The background’s texture was very nice and I’m glad we used it because it fitted the whole composition.
Overall i really like this project and it was fun to do. I also know that we have a bit of improvement to add on to that page. One is to have made a checkout page where you can cash out on the shoes. Also with the kick-on campus the way the had so you could pick your size was pretty nifty. I would have liked to have a few more people to have followed us on the Twitter and Facebook page to make it more realistic. I also think if we had some pictures of people walking in our shoes that would have made it ten times better, or a video of our company would have been cool to add. In the end i was satisfied with wht we had accomplished but still wush there was a few things more to add to it as well.
Comments off
Deja Shoe
Group Members:
M Harris
Josef Landon
Matt Martin
Kelsey Pledger
Site Info
URL: dejashoestore.com
Cost: $9.99
Host: GoDaddy
Host Cost: Deluxe ($4.49/month)
Comments off
Final Review
For my final review, I have decided to critique my single page site, Rapunzel.
When it comes to balance, I believe my single page has accomplished that. The way the castle is in relativity to the window panes works very well and is balanced. The braid coming down from Rapunzel’s hair gives the whole page a more balanced feel. If it would not have been there, it would have been more on the unbalanced side because of the grey brick castle in contrast with the colored window pane scenes. There would have been too much open space. Overall, I think the site is balanced both when it comes down to lines and how the colors are. They go together quite well.
As for unity and emphasis, I think my Rapunzel single page has accomplished both. The site has a lot of unity. Everything goes well together and gives a harmonious, balanced, and complete whole.The window panes are meant to stand out, adding emphasis to the story to go along with the text. They match nicely with the rest of the site, but emphasize different parts of the story appropriately.
The layout itself is very simple and not real complex. It is simple, but modern and very sophisticated in its own way. Very kid friendly looking and plays around with silhouettes and text. Color throughout the single page is very clean, but colorful and gentle to the eyes. No neon colors or very pale colors. My only issue is the way the gradient acted when I split the one big image up into three parts. The gradient did not stay the way it had been, and I am not quite sure how to fix that. Overall, the colors go quite well together and give the site some eye candy when it comes to its appearance with the colors and graphics.
In my single page site I had no navigation. I could have added navigation, but chose not to due to time constraints and the fact that I did not think I needed to. The story is very straightforward and not extremely long, so just scrolling works just fine.
An improvement that could be made is fixing that gradient for one. I am still not sure why it did that the way it did. Another improvement would be to split the images up even more to make loading somewhat faster.
One lesson that I learned with doing this single page site is that I need to split images up more and utilize the slice tool. It would have helped me much more from the start. Another lesson I learned is that not everything can be transferred between Photoshop, Illustrator, and Fireworks. Some things I wanted in one program would not transfer very well or at all to another. I wish they worked together more.
Comments off
Final Review
I have chosen to evaluate my single-page fable website, The Nightingale. I will review what works very well for it and where it could use improvement in the following areas:
Balance
Unity
Emphasis
Layout
Color
Texture
Navigation
I chose this page rather than my group’s shoe page because I feel it better represents each of those elements, yet at the same time also would benefit from improvement in each area more than the shoe page.
On the topic of balance, the primary elements to examine are the header/navigation bar content and the main page content. In both, I have very similar positive and negative comments. Without consideration for window size changes, simply looking at the content within the bounds of where the content appears, both exhibit good visual balance. The way that I have the images branching off from the tree on alternating sides and then the final image centered on the base of the tree gives the overall image of the tree and the page a quite equally weighted balance. Similarly, the content of the header/navigation bar is balanced well, with the story name and the nightingale images and navigation link larger and more prominent to either side of the smaller, duller author/source credit, “Stories from Hans Christian Andersen,” which is approximately at the center, right above the tree’s center. But, issues begin to arise when the window width is changed. Both the header/navigation bar content and the main page content (tree, images, clouds) stay exactly where they are when the window is made thinner or wider. I am fine with that when it comes to thinning the window – I would rather have the content stay where it is and be cut off by a thinning window than to warp the scale to fit all the content, in smaller form, into the thinner window. But, I would like the content to maintain a general centered orientation when the window is widened, rather than staying off to the one side. I now know better how to achieve that, as we applied that technique to our shoe page and it worked very well.
On the topics of unity and emphasis, I am overall very pleased with the page. In exploring those, I will also make notes on color and layout. The overall color scheme of the page is unifying – in both the header/navigation bar and the main page area, blues, greys, black, white, and to a lesser degree yellows and greens compose the whole color scheme. I am very happy with my decision to make blue the royal color of the emperor’s domain, because it unifies the images with the sky background of the page and also is very well complimented by the browns, greys, and white that I chose for much of the rest of the color scheme, as well as the less common yellows, greens, and reds. The choices of colors also helped to establish an emphasis system within the images to simplify the scenes and make roles very understandable – blues for people associated with the royals (with a shade system, actually – darker for higher rank, lighter for lower), greys for the working men of the kingdom, yellow emphasizing power/acclaim (crown, the perch from which the nightingales sing), red for the fake nightingale (the only bright red thing in the whole page, pointing out its unnaturalness) and the strong contrast between the very green and blue and lively outside world where the nightingale is free and happy and the very grey palace interior and grey bars of the birdcage, both places where the nightingale feels trapped and unhappy. Going back to the layout of the images, branching off of the central tree, alternating sides with each paragraph of text, I feel it lends a lot to the unified feeling of the page. It sets a pattern which helps the eye navigate the page, and the placement I chose for each originating branch was carefully calculated – just slightly below the end of its corresponding block of text, so upon finishing reading the text, their eye will be led right to the proper image. I did have some issues with drawing the emperor so many times, so many of the images of him don’t look as much like others as I would like, so, for me, that shakes the unity of the images a little.
On the topic of texture, I made a few good uses of it, but there is more I would like to do. I like the way the clouds look, though I had originally designed some more attractive and realistic ones, with some very attractive shade variation (kind of swirls of darker and lighter colors, that gave them more of a puffy depth) and I wish I had used those instead. Within the images, I mostly used solid colors, but I like the texture where I incorporated it – in the nightingale’s feathers, emperor’s hair, the fake nightingale’s jeweled body details, and the bushes in the second image. It would have helped to texture the tree, but I fear it would make the text difficult to read, so it is something I would probably toy with to try to find a subtle texture for. Texture in the sky and in the header/navigation bar would also make the page look better overall, but the current appearance works well, too. My use of mostly solid colors in the images somewhat allowed me to use mostly solid colors for the other page elements, so that it is all in a similar style. I am also very happy with my text choice, especially in the title, where it is large enough that the chalk-y texture begins to show more. In this situation, it has a kind of scratchy look, which works with the nature-based themes of the story and page design.
Finally, I would like to note that I am very happy with my navigation. As I said before, the layout of the text and images guides the eye in a very smooth, natural way as the viewer scrolls down the page. The only click-based navigation I have is the gradual scroll to top and scroll to bottom buttons. The gradual animation is more aesthetically pleasing than a jarring instant jump and I feel that the length of the page demanded I provide a button to scroll to the top. The scroll to bottom button is more to provide a quick overview of the page, so if someone just wants to check it out before reading through the whole story, they can watch the images go by and get a sense for page in a few seconds.
There are tweaks I would like to make and things I would like to add, but I am overall thrilled with the appearance and functionality of this page.
Comments off
Final Monthly Review
For my final monthly review, I chose to critique my single-page folklore site (The Hare and the Tortoise). This is the project I am most proud of and think I used all of the elements of design well. I balanced each image of the story/page with its background. The characters continue to walk down the center of the page to show time elapsing as the sky changes colors. Unity was an important part of this project because the characters had to work with each other to tell the story of the race. The colors had to work well together when the characters were moving, they also had to work together. One of the most challenging things about the illustration of the story was the color of the tortoise not running into the color of the grass. All aspects of the site worked well together to create unity throughout the navigation, the individual pages, the fonts chosen, and the illustration.
The main focus of the site was the Hare and the Tortoise. Therefore, the emphasis was focused towards the two characters and their movements. The animation of the tortoise was most important, because he was the main character I was focusing on. The animation with him was a little tricky because I had a little bit of a problem slowing him down, but overall I think that the emphasis on him turned out good. I also used a black slate in the back of the title screen with both characters moving so immediately the user would know which aspects of the site to focus on, which also helped to show emphasis.
The layout of my site was focused on individual pages or sections so that it would read like a book as you scroll. The layout of the center square is in line with the center of the screen and is fixed so that when you change your window, the image does not scale or move. Directly to the left of the image is the navigation bar. The color of the navigation bar ties into the color of the Title text. I have the page set up so that you know what to focus on and the nav bar is there to help direct you to the next page.
The color of my site is very bright. The targeted audience for this project was little kids and what better way to grab the attention of a kid than bright colors with simple graphics and animation. The colors reflect the “kid” style and also grabs the attention of any user that stumbles upon the page. I also added shading into the characters to show some depth so it wouldn’t appear to be so flat. The shadows were also added to show distance. I kept the shadows very general so as to keep up with the simplicity of the site. The texture of the site also works into color because the main texture is within the characters. The hare has some added “scruff” and the tortoise has some added darker green colors. The grass also has texture in it to give it more of an outdoorsy, racing kind of feel. I did not add texture to the ground, other than adding some rocks, because I did not want the ground to take away from the characters, because they were the focus of my site.
In terms of navigation, I thought that the navigation bar, taking you to different sections of the page worked best for this assignment. It is bold, bright and draws just enough attention that a child would know to click on it. Also, at the bottom of the page I added a link that would take you to the actual full story of The Hare and the Tortoise, because again, I kept the text simple.
As a whole, I am proud of how this website turned out. Some of the critique I got from classmates suggested that instead of the navigation bar being a block color in the back, it should be an image, ie a carrot. One thing I thought that was really helpful was the use of my navigation and I applied it to other aspects of my work, such as my homepage.
http://mediaweb.rmu.edu/~sasst44/Hare%20and%20Tortoise/
Comments off
Final Review
For this review I’m going to use my final project. My groups website was very well balanced. We made sure that if one section had a box somewhere, like the look-book link, we added another one on the other side that would link to somewhere else. Unity wise we made sure that every layout that was going to be similar was done with the same coding. The pages were basically in the center, the navigation bars (top and bottom) never moved. The only main difference was what is shown in the body of the work. Our layouts we tried to keep simple and easy to follow, yet kept it interesting. Our background (minus the shoe pictures themselves) was the only real textured used. Combined with the layouts and texture of the background, I think our site was very professional to look at. The colors really came through with the shoes. We wanted to keep the color scheme of the layouts itself simple, not over bearing to out do the photos. We stuck with more neutral tones, and that helped make the shoes look better/more professional. And the text/navigation easier to follow. Our navigation bar at the top was easy. You hovered over it and the text like Home would change so it was obvious that it was link and you could click there. The shoe pages themselves you could click on the smaller photos and it would take you to a new page that held that smaller photo in the bigger box. We could have maybe made that more obvious, but I think it worked well. Also each shoe page had a break down of other shoes offered and the names. You could click that text and it would take you to that page. Also the shoe pages had boxes along the bottom, one linking to the look-book and another to the about us page. Easy to understand. The look-book when you hovered over an image, it would move up and reveal text. You could click that text and it would take you to that page. I could have made it easier to understand by making that photo stay up longer or even disappear altogether. The home page had similar links like the other pages, but at the bottom you could click two icons, Facebook or twitter. Both of those would take you to the Facebook or twitter page depending on which one you clicked. Over all I think we did a good job with our navigation. A few glitches, but pretty good. As for emphasis, our logo was on every page. It was clear what website you were on and using. Also the picture we wanted to have you focused on the most was larger and more centered the others smaller. Our entire website flowed well, was easy to understand, easy to navigate, and over all professional in style. I’m extremely proud of what my group did together. We created an awesome site, one that looks cool, clean, neat, organized, simple, and interesting all at once.
Lesson wise I learned that it was easier to work off the shells of layouts we created. I didn’t think it would make that much of a difference but in the end it was the most helpful. It made it simple to look at a layout and create the pages from them. It also helped that each member took a page or design element and focused on that. We then complied it all together and were able to, more easily than if we had not done this, put the site together. I learned that by having the pages be copied once they were complete in style, (like the shoe pages are the same minus text and photos), it made it so much easier to tweak, fix, and rearrange any glitches. I also learned how to animate a photo, link text, and link photos. I also discovered that this whole project required a lot more time than I had anticipated.
Comments off
final reveiw -solemates inc.
final review-solemates incorporated
after seeing the other sites and hear what other people think about our site I believe it needs redesign. I believe that most of the need at least to have the same font as the one that is in our header. Also I believe I need to focus the graphics a bit better by matching the color of the well favored blues adds. I think that we could possible add links to the images either taking the audience to the product page or another page that fit the ad better. The layout of the other pages is perfectly fine I think the home need spaced out more indefinitely. I believe this would provide a better emphasis on each individual image after they are edited to better match the color scheme. I believe we do have balance but it is c=very minimal I kind like the minimal feel but I think this will be mostly solved if the layout of home age is fixed. Unity I believe we could have done bit better on unity by making shoes point a certain way or something similar the home page definitely need more unity for it to work. Most of colors work other than those of those graphic which once again can be easily fixed through changing the colors. Texture and navigation work quite well however. It is very easy to get to here you want to go and back again. The content of most of the pages also woks really well. It think after these improvements are made than the site will look a lot better,
Comments off
Monthly Review #3
For the third monthly review, I chose to compare the two sites Jimmy Choo and The Frye Company.
These two sites are similar yet very different. First I noticed about the two sites is that both are pretty simple and do not have a lot of noise going on in the pages. Both pages have each sections of their pages layed out and defined well to show certain sections of the page and what is defined within those regions. Everything that is clickable on both pages are also very obvious. Jimmy Choo uses the dividing of sections to show what is clickable and spacing of the text. The Frye Company uses boldness and different varieties of text to make the links easily clickable. The most visually appealing images which would be the hierarchy of each page is right in the middle of the home page and they are very large which works well because the images show what the whole site is about and that is what people should be seeing in the first place.
Jimmy Choo is different from The Frye Company though in a sense their site is a little more condensed than The Frye Company. I think that is a minus in a way because if it was a little less condensed although it is simple, it could maybe enhance it because the type is a little small. The Frye Company uses its use of the whole page well expanding everything across the screen which is awesome and looks very well. They both balance out well but I believe Jimmy Choo uses it better although both work well just because everything seems justified and the page seems to be balance oriented.
Comments off
Monthly Review 3 – Zappos vs Manolo Blahnik
For my third Monthly Review, I chose to compare http://www.manoloblahnik.com/ and http://www.zappos.com
The most prominent difference between the two is that Zappos is an actual shopping site, whereas Manolo is more of a showcase site for a designer – there is not a single actual photograph of a commercially available shoe on the latter. I took the following notes as I went through each site:
Manolo Blahnik
The site is overall more subdued – very minimal noise, very straightforward, no unnecessary content. The home page is very well-balanced between the large image on one side and the text on the other side. The color scheme holds the page together very well. Clickable links are not immediately obvious, but the section links change color from white to black when hovered over. The title is indicated as clickable only by the cursor change. Unconventional as far as visual design – very vintage, simple, artsy. It is very clear from first impression that the site is about the designer and his work more than it is about products or commerce. When going into subsections, the visual hierarchy develops well, as does the overall appearance. The navigation area stays constant – just the area where the image originally was changes when going into subsections. For example, upon clicking Collection and then This Season, the page becomes separated into the navigation area, an area of text, and an area which holds an image slideshow, all roughly equal.
Zappos
There is a bit too much happening on the home page – the customer reviews are unnecessary and could be in a smaller scrollable box to the side, and the bottom navigation is much too large and complex. The additional zappos.com sites list, the product showdown, the blogs logo, the “how do you like our website?” feedback request, and the subscription registration take up space in that lower bar unnecessarily, where most other sites with such a bar would only have contact info and some pretty basic text-based links to pages. Home page has a general 4-column or horizontal 4-section layout separated by thin horizontal line of content and is well-balanced, with the exception of the review section, which is uncomfortably left-heavy. I really believe there’s too much content on the home page, but the most important content (the content which the average visitor would be looking for) is in immediate view, and most of the extraneous content is farther down the page, where most visitors wouldn’t bother going once they’ve found what they are looking for.
I feel the same about the first subpage I clicked on, Women’s Shoes. The content in the main area seems mostly extraneous to me, but the recommendations section and ads for sales or specialized sections may serve others well. I chose to continue with the text-based navigation on the left side.
So, I clicked on Flats. At this level, I really like the way the page is laid out and the options presented for narrowing and sorting the content. You can narrow by size, width (important to me, because I wear Wides and it’s a paint to find any of them in physical stores, let alone online), styles, occasions, brands, colors, price ranges, materials, themes, patterns, and accents, then sort by new to old, popularity, name, low to high or high to low prices, and customer rating. I enjoy the breadcrumbing system, also, except for one thing. The breadcrumbing is in the form of the “your selections” section, and when you click on term, it removes it – you have to click on the next term over to go back to that page. For example, you have shoes, flats, ballerina, and pink chosen, in that order. To go back to just flats, you would click on ballerina, or to go back to all shoes, click on flats. I didn’t really see any other form of breadcrumbing, and that system doesn’t include a home or all link – to go back to browsing all items, you just remove the first selection (in our example, shoes).
Zappos was aesthetically pleasing and overall fairly easy to navigate, and it offered many ways to narrow and sort results – if anything, too many. The narrowing categories are minimizable, but default to all being expanded when you first come to the page – it would be simpler to navigate if you could see all the general categories (size, width, styles, occasions, brands, colors, price range, materials, themes, patterns, and accents) at first glance and then expand the ones you are interested in to see the options.
Comments off
Monthly Review 3 – Shoe Site
The two sites I chose were www.manoloblahnik.com and us.jimmychoo.com. Manolo Blahnik has a simple layout and no clutter. The text/navigation clearly stands out because there’s is nothing around it, so it’s highly emphasized. The color scheme and layout help to bring a sense of unity to the page; everything feels like it belongs. With Jimmy Choo’s website, balance is well-exploited by having three small thumbnails offsetting a larger one, and text is evenly distributed and there’s no clutter. The layout is easy to understand and looks professional. The colors, font families, and images bring the site together and makes it feel complete. All their main selling points and sales are emphasized by a scrolling marquee of images which draw the user in. In Krug’s book, he talks about a site correctly utilizing a site ID, search options, sections, page name and local navigation. The site ID’s are clearly displayed on both sites. Searching is easy to start on Jimmy Choo’s site, but not on Manolo Blahnik’s, possibly because the user can’t directly purchase from the site. The major sections and divisions of each site are clearly stated and displayed in the local navigations, and it is simple to find out what page is currently being viewed. Although Manolo Blahnik’s site is simpler, I feel Jimmy Choo’s site better utilizes the principles Krug talks about in “Don’t Make Me Think”. I’ve used many sites similar to it, so everything makes more sense to me and I feel like I know the website.
Comments off
Jake Niehl and the Dealthy shoe sites
For this weeks’ monthly review, I’ve decided on Zappos.com and allenedmonds.com. Both are clothing and apparel sites which draw attention to their respective products. That being said, there are some key differences in each site. So how do they compare? To the next paragraph, boy (or girl) wonder!
Zappos is much more of a traditional layout with an emphasis on text based shopping. Images accompany certain tags, but the main focus is readability and clarity for the user. It’s only once you have gotten into the meat of the site that you start to see more images along with a slight variation on the actual layout of the page. Considering the central balance of the site along with a general color and style scheme that is consistent throughout the entirety of the site, it is apparent that Zappos is looking for more function than style, which is not necessarily a bad thing.
AllenEdmonds on the contrary is very much an image based site. By utilizing scroll-over text-to-images along with a consistent and interesting scheme, AllenEdmonds manages to change general layout without destroying the balance of the site. That being said, the balance of the site is somewhat off-kilter. Any time a scroll text-to-image is used, said image can become overpowering and tends to throw off the entire balance of the page. Also the emphasis seems to be more placed on images rather than functionality, as it can become overbearing to see so many varying images, especially when you are attempting to search throughout the site.
Overall I think both sites have a strong presence of unifying aspects (stylistically and functionally) but at their core they are two very different sites. Zappos is content with placing emphasis on the text and format of the page while AllenEdmonds is much more concerned with the stylistic and visual based approach to their site. Again, both are very strong in their design, but ultimately I believe that Zappos, while somewhat under-stylized, is the better site. Aesthetic means nothing without functionality.
Comments off
Monthly Review 3
For my third monthly review, I chose to describe and compare two websites on their usability and layout. For reference, I used Steve Krug’s book on website usability called “Don’t Make Me Think.” Krug recommends trying the trunk test to see if a website has good navigation. The site will pass if the viewer can easily find the site ID, search button, sections, page name, and the local navigation. The websites I chose to analyze were www.thefryecompany.com and www.allenedmonds.com.
I examined The Frye Company’s website first. When opening the site, I found myself automatically attracted to the aesthetic quality. The simple color palette of earthy browns and greens matched the overall feel for their vintage shoes. I especially liked the large image carousal that took most of the main page because it added emphasis to the products themselves. For the majority of the pages, the designer used a well-balanced, symmetrical layout. There is little clutter and the simplicity makes it easier for the viewers to find what they need. Their choice of colors, type, imagery and overall layout unifies very well together and gets the theme across to the consumers. As for Krug’s trunk test, the site did not completely pass. I easily found the site ID, search button, and sections. However, when it came to the page titles and local navigation, I feel they could have done better. The page titles were hard to find, but I did eventually noticed that the designer slightly bolded the section title. The local navigation is under a dropdown menu. It works, but I prefer to have a column navigation option for when I am scrolling through the gallery products. In addition, there is no usage of breadcrumbs. Overall, this site has a pleasing design, but needs a little work on the usability.
My first impression of Allen Edmonds’ website is that there is too much going on. I am a huge fan of simplicity, especially in color choice and layout. I feel they could narrow down their usage of neutral tones, and work on emphasizing what is most important on their site. There use of asymmetrical balance works, but if they kept a similar layout throughout all the pages it would unify them better. When it comes to Krug’s trunk test, this site passed easily. I was able to find everything right where they should be. The designer even used breadcrumbs as a back up in case the viewer got confused. This site’s usability was great; now all they need to do is make it more pleasing to the viewer’s eye.
After analyzing both websites, I found that each one was lacking in what the other site had. The Frye Company’s site had the pleasing look, but poor navigation. The Allen Edmonds’ site was the opposite. I found myself still more attracted to the look of the first site, and probably more willing as a customer to muddle through the navigation.
Comments off
Monthly Review #3
Monthly Review #3: Don’t Make Me Think: Pages 50-93,choose two of the following:
zappos.com- thefryecompany.com
colehaan.commanoloblahnik.comjimmychoo.com- allenedmonds.com
Explore each of your choices, then describe and compare the two sites use of Balance, Unity, Emphasis, and Layout. How do they use these principles and implement Krug’s five important “things” to make sure users see and understand the site? Is one site more effective than the other at drawing your attention, and why?
So I choose The Frye Company and Allen Edmonds, each site looks and feels smooth and styled. The Frye Company really fills the browser’s page and somehow makes you feel there despite the fact that it is no real place(the site). They have the page filled with leather-y tones and no real white space which I liked since sometimes website’s use of White distracts, bores, or makes you feel constrained within the site’s navigation. Allen Edmonds does use white-space as it’s backdrop and uses colorful divs/ads to make you want to click and browse for merchandise.
Emphasis in the navigation are a huge part of the site’s feeling. Frye Comp has large and bold text in the navigation bar while Allen Edmonds navigation is small, tighter and kind of dull.
Each Layout is common among shopping websites, each presents a rollover that pops up over certain categories. Then presents searchable items for sale. Once you choose a item and click, Frye displays huge high quality photos of the product while Allen Edmonds site does have a large photo of the product but also has a lot of descriptive text for the product which Frye does not.
Comments off
Monthly Review 3
For my third monthly review I chose to compare jimmychoo.com to thefryecompany.com.
The first thing I noticed about the Jimmy Choo website is the search bar in the top left-hand corner of the page. Although I like the fact that the search bar is easy to find, I’m not sure that it should be the most attention-grabbing item on the page. The layout of the items and sections on this website is really great, in my opinion. The text is small and subtle, but still readable, leaving the attention on the products. The color palette is composed of soft, light colors that also help keep the focus strictly on the products. In what I am assuming was an attempt to avoid the navigation from becoming too text-heavy, the designer of jimmychoo.com decided to add pictures as a part of some of the contextual navigation. For example, when a user clicks on the “Accessories” link, rather than a pop-up or menu appearing, three pictures do; wallets, sunglasses, and all accessories. This really helps balance the flow of the site and keeps it from becoming boring and repetitive. The Jimmy Choo site does make use of breadcrumbs, however, I think that it is somewhat poorly executed. According to Krug, emphasis should be drawn to the last item to ensure that the user knows exactly where he or she is; the last breadcrumb on the Jimmy Choo site barely changes and should be slightly more attention grabbing to become more effective. One thing that I really like about the Jimmy Choo website is the fact that when you switch over to the men’s apparel the site color changes from feminine pink tones to much darker greys. Although the colors change, the site layout stays the same and the site ID is clearly visible which lets the user know that although they are on the same website, they have ventured into a different section.
The Frye Company website really gives a warm welcome to the user with an earthy color palette. I can easily spot the search bar, as well as the shopping cart and checkout, without feeling like the feature is overpowering. At first glance I really thought I was going to like this navigation much better than Jimmy Choo’s, however, upon further searching I found The Frye Company navigation to be choppy and hard to follow. There is very little local navigation and an overpowering amount of global nav. I was expecting a site with such a vast global navigation to be huge with a ton of local options to narrow down my searching. No breadcrumbs are used anywhere on the site, which is annoying. Mix that with the fact the there is no local navigation and you have a recipe for making the user frustrated and lost.
I think that The Frye Company website certainly beats the Jimmy Choo website in terms of a visually pleasing background and layout, however, I feel that overall the Jimmy Choo website makes for a better user experience. Not only was the color palette optimized to keep attention focused on the products, but the navigation flows wonderfully and helps the user stay on track and find what they need. It is super easy to get a visual mind-map of the Jimmy Choo website thanks to the effective use of breadcrumbing; plenty of “you are here” indicators. The site ID is clearly visable, and even when switching from women’s to men’s apparel it is clear that the user is still on a branch of the same site. The local navigation is very thorough and gives the user multiple options at every level, as well as the ability to combine and subtract local navigation links to optimize product searching.
Comments off
Monthly Review 3
For my third monthly review I decided to analyze and compare the websites of Manolo Blahnik and Jimmy Choo.
The Manolo Blahnik website is a clean crisp website, with a nice subtle nude background. When you first go to the site all you see are the categories you can choose from, which include: Biography, Collection, News, Where to Buy, and Contact. Clicking on the Biography link, replacing the picture on the home page the options “The Man” and “The Shoes” appears with the context continuing to the right of it and another picture further to the right. As you move down the through the categories the same channel occurs, with the exception that there are more option of shoes to look at when you get into the Collection category. Manolo Blahnik’s website shows the viewer the hierarchy of the website and is easy to navigate through both forwards and backwards, the only thing it is lacking in Steve Krug’s trunk test is there is no search bar that is seen throughout the entire website.
The other website I decided to look at was the Jimmy Choo website which is more extensive than Manolo Blahnik. It has a search bar in the upper left hand corner and the name “Jimmy Choo,” the site id is always centered at the top. There are different categories to shop under, each having their own drop down bar to choose even more specifically what is being looked for. Once you start to go further into the site, a “You are here” bar appears to show where you are, but it doesn’t match up with the path you took to get there. For instance I just chose shoes and chose boots and clicked on a boot, and the path back towards home does not take me back the way I came and was a little confusing because going back one step took me somewhere completely else. Other than the “you are here” not following the same way back as it did forward, Jimmy Choo’s website is fairly easy to use, has nice aesthetics, and a nice display of navigation for how “big” the website is.
When comparing both of the sites, the best shopping site is the Jimmy Choo site. They have a way for you to purchase the shoes right on the website without taking you to another site to order the shoes like the Manolo Blahnik website does. When it comes to navigation and how to go through the different levels of the site I like how the Manolo Blahnik website works; it’s an easy forward and backward chain that you can’t get lost in. The Jimmy Choo site confuses me with the way they have the site history set up and how you cant go back the same way you came. Overall my I think the Manolo Blahnik website worked better in navigation and the Jimmy Choo did better on a way to purchase the products on the website.
Comments off