ARTM2210 Intro to Web Design
Just another Intro to… siteArchive for Uncategorized
One Page Review – onceaunicorn.com
There’s just no getting around the appeal of the unusual. Whether it’s a winter hat with a knitted beard attached or a video about laser cats, the internet is filled with unusual and magical things. Onceaunicorn.com is one of those places.
Though the purpose of the site is a bit of a mystery, there’s a bit of fun and whimsy in that fact. The whimsical feeling is aided by the background shifting through colors as you scroll and the forest background, creating a subtle texture to the site. The type is clear and large and helps this vertical scrolling site to create a pacing to the statements about being a former unicorn. It feels as if the page is talking to you, leading you through the thought process.
A little 2/3rds of the way down the scrolling site, however it loses it path just a bit, as the statements that fit on each page, you now need to scroll some to see the entire message. It may have been helpful to space those messages out as in the beginning part of the site, or reduce the images of the packages to allow them to fit on the screen.
The bottom of the site distinguishes the contact information very nicely as it has a white background that pops from the rest of the site, but still maintains the connection to the site with the text staying the same color as the changing background color of the site. There is also a sliver of the background below the white space to help make it feel more inclusive.
Also done well are the links to buy the packages. They have a box around them, with the background of the box being a very light white opacity. It helps to pop the links, with being so completely different that it breaks your immersion in the site.
Overall, it’s a very well done one pager that’s creative and mysterious. If I could afford it right now, I might consider buying a package. Because let’s face it, we all were once unicorns, and some of us still are.
Comments off
Monthly Review #2
The site I chose is http://www.mindworks.gr/ it’s a very beautiful site that has a lovely color scheme, which really draws anyone who see’s it. The only animation seen are the clouds that are locked in a diagonal like barrier, I think that it’s very subtle, and gives the site a nice touch against the pink, black and white colors. The colors used are as mentioned the shades of white, black, grays, and pink, a simple color scheme, which appeals to me. The pink contrasts against the white and black, and doesn’t get lost in such heavy colors. I think any hot (neon) colors would work such as blue, or green as well. The way the user scrolls through the site is by scrolling up and down, there is no other navigator. The texture, and lines, makes the site more noticeable, almost like there is a 3D dimension and you can’t really go wrong with diamonds of course. There is also interactive piece, the user can click on it will open, into the given information, which I think is pretty interesting and the way that the site seems to have two layers, I think is also pretty cool. The site sections off their information is by using the diamonds and splitting it up into different pieces all leading to different kinds of information, the user gets to click on what interest them and can exit it at will, when clicked, the triangle will animate and expand (to a rectangle) to show the user what lied underneath that tag.
Comments off
Monthly Review 2
I chose to review the Club Tropicana website. At first glance, the website has a very appeasing color and gives off the feel of a sunset beachy thingy. But in reality, its about a hockey tournament and a music festival, which took me forever to figure out.
It does have some good points though. Its one of those sites where you scroll up and down the whole time. When scrolling there is a menu bar with the different “pages” to jump between. It keeps the same background as you scroll through.
But I feel it has more cons than pros. It took me ages to figure out it dealt with a hockey tournament. The name “Club Tropicana” totally throws me off and then it talks about a music festival, which confused me even more. They really need to rethink their name and colors. Very few of the pictures on the site gave of the impression of hockey. Most just looked like a giant party. As you go through the page you com to the rules of the tournament which were pretty straight forward. Then it has a few pictures of people, which I was assuming were the captains of the teams? Then you get to the ticket buying and registration areas which were closed at the time.
I wasn’t overly impressed. I thought it was going to be interesting, but I lost interest as I went.
Comments off
Chelsey Wassel- Monthly Review 1
Chelsey Wassel
Bi-Weekly Review 1
Intro to Web Design
1/23/14
Nike
I chose Nike for my bi-weekly review. Nike is a corporation that is engaged in the design, development, manufacturing and worldwide marketing and selling of footwear, apparel, equipment, accessories and services. They sell mostly sports related items and workout attire for men, women and children.
The color scheme of white and grey with black text and search bars is pleasing. Their logo is mainly black and white so I understand why they went with that scheme. Whenever I put my curser above one of the drop down menus like “men” for example, the text turns orange. They did this to show clearly what your curser is over and what tab you are about to click on. It’s a subtle way to add color to the webpage.
Across the top is multiple drop down menus. The first one is a Nike symbol. If I want to go back to their homepage I simply click the logo. The rest of the menu bars include men, women, kids, sports, nike sportswear and Jordan. They show me all aspects of what different groups they have to offer. There is also a search bar right next to the menu bar. If I can’t what you are looking for I can search it. I don’t even need to pick which department I want to search in the drop down box if I don’t want to. When I choose a department like women, everything imaginable comes up under categories. If I am looking for sports bras in the women’s department, it is very simple to find under tops. I can click on a specific type of top or I can look at them all. I have many options for broad and specific items. It doesn’t take me very long to find what I am looking for. Everything I am looking for is in an obvious location. The departments go into categories and then specific items like pants or hoodies.
If I scroll through the homepage they have an area called “get the latest from Nike” and it has four pictures with descriptions on new offers. I can also click on those to bring me to the page about that new offer and item. Below that there is an area where I can follow or like Nike or even a specific Nike department like Nike Soccer. It brings me to the Nike Twitter or Facebook page. This is a great way to keep up with what Nike has to offer through social media. If I was to scroll down to the bottom of the the website it gives me options to get help, order or register with Nike. If I have any questions it can easily be answered there.
Overall the website is very usable to all users. There is no question on where a topic would be. The departments and categories are easily displayed and navigable. I never once thought “where is this or where can I find that.” I can navigate through the site without any confession and find projects simply.
Comments off
Monthly Review 4
When looking at websites at the beginning of our final project, there was one we all really liked and that was the fat head’s website. This restaurant website is what we basically based our layout on. We felt that the layout and color scheme worked really well for a bar and grill which is what our restaurant was. The navigation of this site was very easy to use and follow as well as clear visually which is how we wanted to work this project. From there we pretty much took off with ideas for images and navigation. When looking at this website, we all agreed that the color scheme worked really well. We liked the simplicity of the black and white layout with the colored imagery. It gave off a very simplistic appearance. A scheme that appeals to both men and women.
Now the texture used was something we weren’t sure how to approach. On fat head’s site, they made their heading image appear grainy giving it the feeling of aged signage. It feels old and comes across as a place that has been around for years. When we thought about adapting that same feeling into our web page, we didn’t really like it. We liked our take on our imagery as clear and vibrant colors.
Now deciding on the navigation of the page was the easy part as far as decisions go. Actually coding it was the harder part. But we really liked how the heading tabs were always at the top with the main logo in the center. It allowed you to easily maneuver through the site without forgetting what page you were on. However, on fat head’s site the sub heads were simply words that highlighted when you were on the page, so we decided to take it a step further. We made sub tabs that resembled the main logo and had them go from grey to color when you were on the page. That way the heading would be clearer.
Overall, our project is very similar to the fat head’s site but there were aspects where we improved upon some things. In the end, I think we executed our final project very well.
Comments off
Monthly Review number 2
For this monthly review we are reviewing the one page websites that you can scroll up to down or side to side from the index page itself. The page i am doing for this review is called Transferwindow.info . This site shows you the information on transfers made within the allotted time. The sport that they cover is football, soccer here in Northern America. The site does not allow for any scrolling but instead uses graphics as its bases for movement.
The site starts out with a line from the top to the bottom, but in then center there is 10 leagues ( a league consists of x amount of teams that play each other for a trophy) that have lines going away and coming to them. These lines represent a person/persons that are transferred. To the right is a box that has 2 numbers a red and a green number, meaning money lost(red) and money earned (green). Also, the green and red make an appearance inside the circle that covers the leagues money in and money out Then it list the top ten transfers in all the leagues. So these lines are going to the leagues that people are transferred to. Click on a league and it will highlight the lines that are going to and from the clicked league while un-highlighting the rest of the lines. Now click again and another circle will pop up with the teams inside that league. from there the box to the right does the same thing but this time i want you to click on a name, it will open a smaller box where you will see his name, how much the transfer was worth and the two teams involved in the transfer (team he played on till transfer then team after transfer). then the position, what the age was and the nationality of the player. now lets go back to the circle. its the same thing as before just with more options but this time you will see more lines leaving the teams to go to the others, as league to league trades are really not that much. but if you will see a bunch of name pop up to the right and the word free beside them, this means they are out on a loan, meaning the club gave them to a team for free for a trial period in which case the player returns to his original team and then goes from there.
Now that i have explained the basics of this site lets go into the details, I like it. it is very cool how it is spread out not to many distractions that are going on it is straight forward in what you need, and it has some pretty cool graphics, but it could have done somethings to make it more special. Instead of making a new circle appear out of nowhere follow the line down to that circle. Maybe they could have had a marquee going across streaming live events going on or transfer news so it could lead you, more interested and waste more time on there site. But all in all this site is very informative for the soccer crazed sports fanatic and it seems to kept up to date.
Comments off
Monthly Review 2
I chose a wedding page. The color scheme is a combination of gray, black and white, with a touch of gold at points. The gray color is used for the top border with tabs saying, “Our Story”, “Gallery”, “Bridal Party”, “Festivities”, “Registry”, “Travel”, “To Do/To Eat”, “Add to Our Story.” The black is used for some sections to darken the background whether it is a picture or just the plain color. When black is the background, then the text is white therefore, the text can stand out from the background. The same thing happens when white becomes the background. The page used nice simple colors and I think that it makes the page easier to look at and not have it become chaotic.
The navigation of the site is pretty interesting. Logically it moves up and down, but there’s more to it. The first thing you see from the site is a picture of the couple as the background and they have their initials and date of the wedding. Once you want to see more you can scroll down, but the next page comes from the bottom to the top. Either you can click on the tabs from the top or just scroll down and have the page sweep from the bottom and transform into the next page. Once you get to the next page you can then scroll from left to right to see what’s in that page. The page basically becomes a slideshow showing what is in that specific page.
The design element of the whole website is yet again simple. Just like with the color scheme, the design of the page concentrates on one or two text fonts, and there really isn’t much design for each page. Keeping everything simple definitely helps the reader make it easy to read and understand what each page has in it. Nothing pops out of the pages therefore the reader will not be shocked with reading anything. The page, like I said before is very simple, so the reader will not become overwhelmed with reading a wedding website. Lastly, I think the website is designed every well. It is unique with having the pages scroll from the bottom to the top. I assume that their color scheme that they use is the same colors that they incorporate in the actual wedding. The website is inviting with showing everyone their story from the every beginning to their wedding seeing their excitement for that BIG DAY.
Comments off
Hey I’m Art-Monthly Review 2
For the second monthly review, I examined Art Williams Page at http://heyimart.com. On his page, he made a simple and easy design choice for the users to move through the page. On his page, he has on image that he has created that takes over the whole webpage and the user has to just use the arrow keys to move from one image to another. There are only a few times where the user can click to see a different part of the page. For instance, he has a button that you can click to see more about him. When you click it, a page slides from the top and takes over the webpage. At the bottom left, there is another button you can click on that leads to a whole different site which is more of his work on one page websites. He does not have very much information on his site, so this makes it easy for the user to read. The artist also uses very little bright colors on his page. While it is mostly because his images are dull colors, he uses light and shadows to created depth throughout the page. Overall, his page is very user-friendly and simple to use.
Comments off
Monthly Review 4
The project that I chose to evaluate was my single page website. My site was a fable titled “The Jay and the Peacock”. To illustrate this fable I chose to use a colorful, hand done, illustrated style. My project embodied certain design principles, but there were some design facets that could be improved upon in order to best guide the user through the content.
Each specific screen on this fable site was carefully formulated to create balance. The website contained multiple elements on every individual screen. Each one was organized and placed together as not to offset the screen, thus creating a sense of balance, specifically horizontal balance. This guided the user by not allowing their eye to get stuck in one place, thus encouraging perpetual movement.
Unity in this page was a result of the color scheme, typography, and site style. The same general color scheme and typography were utilized in each screen, which helped the entire site to seem like it belonged together. The website’s style was consistent throughout all of the site’s screens. Each illustration showed the same thick black outlines and grainy, handmade fill. Therefore, due to the website’s style, a strong sense of unity was created.
Most screens throughout the website placed emphasis on each text box. The contrast of the white text boxes with black outlines on pink backgrounds draws the eye. There is also emphasis placed on the text boxes due to the sharp contrast of its geometric shape to the organic shapes surrounding it. This direction of emphasis is very effective because it will assure that the viewer reads the story.
The layout of the fable website was remotely successful. The placement of each individual screen element was extremely balanced, therefore reaching success. However, there are certain changes that could still be made. The website should be modified so that it opens to a screen that fits perfectly in the window, no matter what size that window is. Likewise, the whole screen should also get smaller or larger as the user resizes their browsing window, still continuing to fit the screen. This will help direct the user to the content, as it will eliminate empty white space that could be distracting.
The color scheme displayed in my project was vibrant but not overpowering. The pink, green, and blue give the website a fun, whimsical, childlike feel. Whereas the black outlines, white sections, and gray portion tone down these bright colors to ensure that they do not become overwhelming. Therefore this balanced color scheme achieved the goal of appealing to children without being too intense. The consistency of the color scheme also helps to direct the user because it is harmonious rather than distracting.
Texture was visible throughout each screen of this page. The text inside the box created the strongest texture on the page, starkly contrasting the bare, un-textured background. The hand done, grainy texture of the birds and feathers on each page slightly contrasted the flat color of the background. This created a hierarchy within the website first drawing the eye to the text, then to the birds and feathers, and then to the background elements.
The navigation of the site was somewhat successful, but could be improved. The navigation is currently clear and understandable on most screens. But, on the title screen, the navigation button needs to attract the user more. Since the link to begin the story is near the bottom right of the screen, it does not demand attention. It may be more convenient for the viewer if the link and the arrowhead that it rests on moved down into place from a higher point upon opening the page. This movement will draw the user’s eye and make navigation more successful.
As previously stated, the fable website embodies a number of design principles which make it successful in properly directing the user to the content. These principles include balance, unity, emphasis, color scheme, and texture. However, as mentioned above, certain principles such as layout and navigation could be improved in order to perfect proper direction. Overall, this website was successful, but could improve with a few slight changes.
From this project I learned several new coding techniques such as, how to correctly navigate a single page website. This may be useful the next time I create a website. I have also learned that hierarchy must be shown using every single design principle in order to best direct the viewer. I will remember these lessons and utilize them in future design projects.
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
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
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
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
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
Review 3
The two sites I choose to use are Zappos and The Frye Company. They both have a good use of balance. Their color themes for both site are equal throughout. Picture placement balances out as well. The Frye Company has better unity within the page than Zappos does. It may seem this way because the Frye Company surrounds its website around on them opposed to Zappos which covers a variety of products with different themes. The Frye Company emphasizes boots and the more vintage, country look. Zappos has no specify emphasis on anything. I think the layout for the Frye Company is more eye pealing. Zappos’s layout is clean though, it is just more busy. Both sides are easy to navigate and really show off what they’re offering. They both have search boxes and have all the other “things” that Krug’s says makes a good website. I personally think that the Frye Company is more effective at drawing an audience to their website because it is more eye appealing and warm.
Comments off
AIGA Workshop on web design
Web Design for Designers is a five-week workshop collaboration with Refresh Pittsburgh and AIGA Pittsburgh taught by Val Head, Josh Sager and Andrew Twigg. This course is for designers who want to learn the basics of designing for the web, even if they have no background whatsoever working with code.
Some Things We’ll Cover:
Intro to Web Design
HTML basics
CSS for visual formatting and layout
Beginning Javascript
Browsers, Devices and Basic Responsive Concepts
Who Should Attend:
Comments off
Monthly Review 2
Site: http://www.stumbleupon.com/su/809ZDk/:Vq9UNp.G:DaCTP$pW/inception-explained.com/
Monthly Review 2
For this month’s review, I found a really neat site on StumbleUpon that uses the same concept as what we were assigned for our folklore project. It is a scrolling webpage that visually explains (with light narration) the plot of the movie Inception.
It first, is a great concept because Inception could be a hard plot to follow for some people and this site explains it in a very basic way, with very basic shapes, colors, and movements. This keeps it as simple as it can be so that even the dumbest person who saw the movie could understand it after looking at this site. Or if someone did not see it, they would easily grasp the plot.
The first interesting thing is a very small constantly running clock in the upper right hand corner. Time is a very key element of the film and the further down the characters go in the dream state, the slower time passes and the clock in the corner of the web page also slows down as the plot explanation reaches further dream states. Clever.
As the page scrolls down further we are introduced to the characters represented by simple circles at the bottom of the screen, with the name of the character written inside. Each has a different hue and saturation so that no two are alike. As each character is emphasized at certain plot points of the film, as you scroll, that character’s circle raises itself slightly above the others to show the viewer who is in focus, along with saying it in the type.
As we enter various dream states, the circle of whoever’s dream it is becomes smaller and raises up to the middle of the page with lines connecting it to all the other circles to tell us which characters are together. Also the light background echoes where their dream is: street, hotel, hospital, and limbo (raw subconscious). Great composition and it’s very well organized so that everything has its own space and it isn’t hard to see any object.
The overall presentation is really solid. Objects’ sizes change and move around constantly, The colors work well together and the shapes and images are simple enough so that we still know what they are without being overly complicated. The flow is also nicely done; even though the page scrolls to reveal more of the story in that way, there is also movement by objects on the page so we don’t just scroll down static images, which would be duller. Also, the type is never in the same spot engaging the viewer’s eye. Overall there is a lot of movement between the characters, text, and scrolling making it a very fun and nicely designed web page, despite that it gives me a headache to imagine how much code went into it.
Comments off
review 2
Ideakites uses various horizontal boxes that help brake the page up. They use different shades of red, blue, gray, and white with very little texture. The use of those colors all blend together very well and make for a clean looking web page. Every box has a drop shadow on the bottom. Just by adding the shadows to boxy elements gives the page depth. The boxes also help brake up the individual steps of how they make mobile apps, as the user scrolls from top to bottom. Or if the user doesn’t want to scroll a set of icons near the top-right in a red box indicates to the viewer that they can just click and skip to a step. The click-able box in one the right scrolls down the page and stays in the same place. They gave the red box rounded corners and positioned it vertically so it stands out really good. The red box makes navigating the page even easier. I feel like if the box was any other color it really wouldn’t work because red is a color of compassion and they are showing how to do something that they seem to be passionate about. All of the text in the rectangles is easy to read. There is a big and bold title separated by a horizontal line then smaller text underneath the line explaining something. As you go from top to bottom you learn about what they do then how they do it and how to contact them. It is very simple and to the point when you read every thing. The website over all you can tell was thought out and put together very well.
Comments off
Review – Single Page Website
Katie Withrow
The website, Viagon.com, is a very simple and clear website to understand. The site successfully uses color and texture. It also, is easy to navigate through the page and has good readability.
The texture on the site is almost unnoticeable; it appears to be extremely small granite. This works for the site, because if a texture was too noticeable, it may be difficult to read what is shown. Also, the texture works well with the topic of the site, which is, a digital agency to help those in business increase their business, lower their costs, and gain new customers. The texture gives a soft feel to the site, and yet the font is crisp and everything on the site has order. There is not much color on Viagon.com, but the colors used are appropriate. Besides the images on the site, the colors used include, white, an off red, different shades of black, and a shade of blue. The off red, and shade of blue, are used in the Viagon logo, and are used to highlight important topics and words on the site. The different shades of black are used as the background. At the top of the site, the picture of the Viagon office is very bright, but when you scroll down, the background is a light black, almost gray color. As you continue to scroll down, the shades of black become darker. This, I believe is used to separate the various sections of the page. The color white is the color used on most of the words on the site. The white lettering, stands out against the black backgrounds, and catches the users eye. All the colors used, I believe compliment each other and work well to enhance the website’s design.
The Viagon website provides two extremely easy ways to navigate through the page. The first way to navigate through the page is by scrolling down to the end of the page, than scrolling up to get back to the top of the page. This particular website is not very long; therefore, scrolling on this page does not take very long. The second way to navigate through this site is by clicking the tabs in the top right corner. Each tab will take the user to the corresponding section. The block with the tabs does not disappear when scrolling or clicking the tabs to go to another section. The tabs stay with the user, which is extremely helpful to go to a new section or back to the top of the page without having to scroll up or down. The “blog” tab on this page; however, navigates you away to a page that is not available due to “renovations.” In order to get back to the home page the user must click the blue hyperlink that is in a different language. Since this part of the site was in a different language, it was difficult to understand. Otherwise, the site is a great example of successful user navigation.
Some of the design elements that make the site easy to understand include, size, contrast, and balance. The size of the font is large enough to read without having to get real close to the computer. Also, when a larger font size is used, the user knows that is the topic of what the user is about to read. The smaller font indicates the description of a particular section. The contrast between the white font and black background works well with the site. The white stands out against the black and allows the user to easily see and read what is on the site. The layout of the entire site is very balanced. The text and smaller pictures throughout the Viagon site help balance the very large picture at the top of the site. Also, the pictures and text are aligned where both they complement each other and look proportional.
The Viagon site is an excellent example of layout in web design. The site is easy to navigate and understand. Although not many colors are used, the ones that are used stand out and help the site look presentable. The words and pictures are easy to read and see, and stand out against the black background. I believe the Viagon site is very successful in all aspects of design.
Comments off
Zombie websites
The website i chose to compare to my final website was the center for diesase control’s zombie awareness page. There isn’t much to the page as it is just a simple article. It isn’t very flashy or interesting but it does get the point across. That point is of course zombie awareness. The CDC gives the reader many examples of what to do during a possible outbreak. This advice of course also transfers over to any natural disater or other kind of outbreak. Things such as keeping canned goods and keeping bottled water available. They also talk about meeting points and where to go if something happens. It also gives a brief history of zombies and possible variants of an outbreak. My site however will be more visual. It will feature more robust images and a more interactive display of the information. Instead of just being like an article my website will be more like reading a comic with cartoonish pictures. But the information will be as robust as on the CDC page.
http://blogs.cdc.gov/publichealthmatters/2011/05/preparedness-101-zombie-apocalypse/
Comments off
Restaurant/Club
The smiling moose. Their website is laid out well. It is easy to find the information you are looking for. Their navigation bar at the top states everything clearly and is easy to find. The composition is well done. They have their contact info at the top right and is easily noticed when navigating. The navigation is easy and very understandable. Since it is a restaurant and an entertainment venue it is very similar to what we want to do. I liked the cycling images and the text and graphics look great. I love the composure of the website and think it is a good website to take some tips from to improve ours. Since it is essentially the same thing we want to make with our business this website speaks the most to me.
Comments off
Final Bi Weekly
Hours Spent
Research:2 hours
Design:4 hours
Coding:30 minutes…(then gave up)
We spent about 2 hours as a group coming up with the idea of a club/restaurant. In which we decided items such as the menu, color scheme, name, and other elements of the site and establishment. I researched some different bar to get a feel for what kind of environment they had and to see how they were designed. This was beneficial when I was designing the Logo and buttons for the website going off of the color scheme we had originally chosen. With the design it featured many different elements for just the logo. Including use of the colors and the font chosen, to change it to accommodate the theme. Dreaweaver hates me except for during the finals.
Comments off
Sports site post 1
Sport site review 1 Pittsburgh Penguins
This site is well run and has a lot of feathers for the user to us such as flash video of game highlights and locker room media. One thing i do not like about the Pittsburgh Penguins site is that it seem busy and has a lot of information to go through. Also the ads are all of the place, it takes away from its potential clean look. It should be noted that all NHL sites seem to follow a set of guidelines for basic design features. Although from that the sites can be further customized.
Comments off
Bi-Weekly Review 3
Austen Czapla
Bi-Weekly Review 3
Jeremy Mansfield Site
Upon first looking at Mansfield’s one page site, I was confused to was the purpose behind it was. At first I thought it was a site to sell ammunition for guns. After reading all the information on the page, I figured out that it was a site advertising his design. The bullets at the top of the page, lead me to that first assumption, but I realized they were there because he is from the south and he is going for the southern cowboy theme. The color scheme on the site is really good though, in my opinion. It is a very bold color, but is also really easy on my eyes at the same time. I really like the texture added to the background, I think it works better than a solid background. My when all over the place when I first looked at the site, It took me awhile to get a grasp and figure out what I was looking at. The text colors compliment the background colors really well. Although his site isn’t very long, scroll wise, its very effective with all the elements it brings to the table. It is a one page site, but he has links that lead you to all of his social media sites like twitter, facebook and vimeo. Overall, I think the site is very well put together, and all the aspects compliment each other very well.
Comments off
Amazon Review
I reviewed the process on how to create an order on amazon.com. I typed an an item I was looking for and it gave me a variety to choose from. I then narrowed my search to something more specific and found what I was looking for. The overall process on the site was quick and easy. The site is really user friendly and is easy to navigate. The homepage really gives you a good look a what the site is about and how to browse to certain products. It is very easy to find what you are looking for. The site has alot going on, but once you play around with it, the site is very easy to understand. All of the information is simple and to the point. I like that once you purchase a product it gives you suggestions on what else may interest you. Most websites do not carry this feature and it just makes the site all the better. Also, before you buy a product they have reviews of the products. These reviews are completed by other people. It is not your ordinary review. These reviews are detailed and really give you great insight on the product you are about to purchase.
Amazon.com is very user friendly and its a great site to find something you are looking of you cant find it anywhere else. All the categories are listed on the left hand side and are really specific. This feature really helps people navigate the site much better. All they have to do is click what categorie they are looking for and it takes them right to that section. Overal, amazon is very simple and easy to navigate. This particular site requires little thought at all, and I would recommend it for web designers who are looking for a good layout and setup. Amazon has an easy way to navigate the information the customer needs.
Comments off