Category: Site Review

For my review two of a one page website I chose the site Alyoop of the week “http://alyoopoftheweek.com”. This website caught my eye with its simplicity and kept me interest by its ease of use. It is a scroll up and down website with a page wide illustration of their choice for the best NBA alyoop of the week. As I commented earlier this is a very simple but eye pleasing site.

First aspect I noticed is the colors, none of the colors they use are very dual colors. Even the blacks and the browns they use have a sense of glow to them. They also use a lot of warm captivating colors such as red, orange, and yellows. The last thing I noticed about the colors are they are integrated into each illustration carefully and represent each teams main colors. Using small accent colors help to bring out the players and relevant designs on the page.

Another aberrance that I noticed on this site is how the content is set up. There is a very apparent vertical grid system that seems to be used with most of the content being center justified. Each illustrations text is looks to be some kind of slab serif font that guides you eye down to the players cartoon like illustration. The cartoon like illustration is very simplistic but each player is still very recognizable.

Lastly aspect I noticed was the navigation. While there is not much to say about it other than it is very easy to use. This is so because there are very few choices you have to make. You look at the player and ask do I want to see is alyoop and if so there is a distinct watch button under the player. If press watch it brings up a video screen and plays the video. With an “X” so you can exit the playing video when your done or keep it up and school to other players.

Over all I think this is a very successful site due to its ease of use and the visually pleasing content. At no point was I board or put off by any of the navigations. Lastly it left me with the feeling that I wouldn’t mind coming back to the site to see future content. Which in my opinion is what making a good site is all about.

 

In this one page site there have the ability to scroll vertically. While scrolling the side picture changes into the different subject that is being talked about on the left. In a one page site there should be some sort of grid system. This one page site is talking about the big cartel of 2014. This site is a great one page site it has information and also has the pictures. The color scheme is used throughout and it also adds to the site. It tells you how to scroll so people who just think there is only that one view make them wrong. In the book they talk about the layout of a site and the components in one. I believe this site shows that and makes a great point while doing it. Some of the design elements are being used like a grid. They have half of the screen being one color while the other side is a different one. They also have some of the text the color of the background of the one side. Which ties it together. The use of color in this one page site helps it seem more uplifting. I believe the site is designed well; the only changes I would make to this site would be changing the typeface. This site does show a controversy and I believe they made it a bit more eye-catching so people actually scroll through the entire site.

The site chosen is Jlenia Dog Sitter Rome, a site containing different kind of services for your dog. When I first visited the page the aspect that caught my eye the most and immediately were the colors used throughout the site. It is mainly consisting of warm colors but in lighter values that make them pastels, and these are used for the background, which in this case is portrayed as the sky. However, a cool color that pops up repeatedly as you scroll down is green for grass and frees, and it is very dominant and vibrant, which then contrasts with the background sunset-like sky. The texture throughout the one page site deals a lot with the imagery used which is a mixture of both cartoon objects, such as the hot air balloons, balloons, birds, and insects; and life-like imagery, such as the dogs, trees, wood, houses, and the grass. I recognized the texture at its strongest within the grass due to how it is highlighted and shadowed perfectly to make you want to feel it. For navigating purposes, it is simply done by going straight down the page, and for content not to be all mushed together, each section has a different scene that the level of grass distinctively divides, while the top of the scene is bright for the sky, contrasting the previous grass above it. This set up is rather cliché but it works very well with this particular set up and the graphics used. As you navigate downward, certain graphics and imagery move upward, like the clouds or balloons, or move across the screen, like the flying birds. Also, when approaching the next section, you will see where exactly you stand on the page by colored dots that fall vertical, since you are incapable of seeing it as a whole. Along with moving to each section, the title, followed sequentially with the text for that section fades in as the objects are moving around it, which I thought gave it entertainment, rather than a still page. Another means of the navigation is at the very top left corner where there are four ribbons that contain links to the awards won for the page as well as a voting link, which I see as a good idea for listing the accomplishments, making new users want to feel good about the site. I feel that texture, emphasis, movement, and color really make this one page site successful. The colors give it a very fantasy kind of mood to it, and the colors allow for all of the text to be very legible, and none of the colors clash together. Emphasis has a tie with color in that the images really pop out against the pale sky background and it brings attention to the graphics that help illustrate each section. Movement keeps the page from being to generic when scrolling down and the fade in and fade out makes the text more wanting to read rather than if it was just permanent. In addition the movement of the objects make the page come to life. The text is not only good color choices, but good font styles too. I believe that the design of this particular website is very artsy and playful which relates to whom the site is about; dogs, or “four-legged friends.” There is not a boring part about it, it’s no wonder why its been named the “most loved” site. Everything a website needs (about info, contact, descriptions, etc.) is all provided which makes it no doubt easy and understanding.

Winnersplaylist.com/grammys is a magazine styled site listing the winners of the2015 awards show. The design is very simple, but in it’s minimalistic approach holds a touch of elegance and class. The top of the page holds the logo for the site, which holds the boldest color for the site, along with the winner for the “#RecordOfTheYear”. From there it splits into 3 columns which continue down until all of the awards have been filled; it seems that with each row the awards progress from the most notable (or the ones people would care the most about) to the ones that were more than likely not aired during the ceremony. As there’s no real functionality to the site other than the option to play an audio link to the winner of each listed category it’s easy to use, but the seemingly unorganized positioning of the listings makes it a bit annoying to search through. The images are dull, and tend to blend into the pure black background, which adds to the sort of mystery to them before their reveal, but when scrolled over only the text beneath them brightens to the same gold as the header to give evidence to the fact it’s a playable link. The objects are fluid with the dimensions of the page, and as you expand it they get wider, distorting the images within them, and contorting them to nearly unrecognizable shapes if gone too far. In terms of simplicity and purpose the site is well put together and accomplishes it’s purpose, but in terms of handling and navigation is a hassle and annoyance, as it remains flat and not dynamic throughout the time on it. If it wasn’t for the fact that part of it was somewhat interactive it’d be the more interesting just to Google who won what.

Creating a “new” design is a challenge today since technology is a dominating factor. The easy way to start something today is to use a template and to make that version unique. What captured my attention with Studio Kwik’s design was it’s unique,, and original style that was clean, clear, and concise. The page was created for people to have insight in  their fixed charged for water and energy. It provides information in a fun way that is visually appropriate for friends and family. It is built for the future and easy to use.

The website I chose from http://onepagelove.com/ was Studio Kwik’s unique design called Knock Knock. From the start, the site was well organized. The color scheme used was a dull navy blue and a dusty orange where important information was kept. The shadow used for the background was a light grey and white, like how this blog was designed.

The user is able to navigate intuitively by scrolling down the page and also by following the guide, which is a constant line. With the flowing line, the site is easy to scan due to the numbers provided that act as milestones throughout the page. It is clean and simple which pleases the users and draws them to the content.

I believe the site’s design is well designed because of the color scheme, navigation, organization and originality of the page. Overall, the single page is pleasing to the user and stress-free, which makes the site a more enjoyable experience for all users.

The single page website I choose to critique is called Echo. According to onepagelove.com, Echo is a public relations agency that tries to connect their clients with the people they want to reach. “Echo amplifies brands and businesses”. I chose to critique this single page website because it’s opening image which was somewhat like an illusion, was pretty cool. The use of colors and illusions stuck out to me the most.

The navigation for the page was easy. It scrolls down to about three different “sections”. So the website is pretty short and stops abruptly. The layout and composition was simply plain. But it was too plain! At first glance, I thought the simplicity made it elegant but when I started to scroll down, I just realized it had more of an incomplete look. There was way too much negative and free space. I think this issue could have been fixed if there were some columns added here or there. There’s a “knob” on the upper right side of the opening page. The knob makes you want to click on it and drag it right, thinking you’ll unlock something but it actually doesn’t work. The fact that it doesn’t work makes me question if it even is a knob. The links on the website do not work as well.

The use of color was black, white and an off white almost gray. My opinion of the creator picking these colors was that they just tried to play it safe. If Echo is meant to “amplify brands and businesses” then why doesn’t their website portray that same excitement? I think one way of fixing this would be to add a pop of color here or there. I would suggest red because it’s an exciting color and it will combine nicely with the black and white colors previously used. According to The principles of Beautiful Web Design: Chapter 2: Color, the color red can be perceived as the color of passion and excitement. So I think having a pop of it in the original design would be good.

The chapter also states that the color white can be perceived among viewers as perfection, light and purity. However when I visited the page, I didn’t receive any of those thoughts from the web creator’s use of white. I just got a feeling of empty space. And the black text up against the white background didn’t bring anything special either. Now the color black can be perceived as power, elegance, and strength. I did get a hint of this feeling when the white text was up against the black background. In my opinion, it gave that section of context a bold statement. The font wasn’t special or fancy. However, it was used in two different colors (black and off white). The font isn’t really pleasing and the size is too big.

The chapter about texture doesn’t really apply to this website. There was no repeated pattern. The viewer cant feel roughness or smoothness. There wasn’t really any proportions because the website didn’t have much of a layout. The only thing that I would say had emphasis was the picture, I assume, of the creator. But even then it was pretty simple because it had a thin black border around the circle that held the image.

The only thing that I found interesting about this website was the opening page where it had an illusion where the text would slowly disappear and then reappear as you scrolled down. The text, ECHO, was put behind a black and white stripped layout so it looked like it was moving. It’s one of those illusions where if you look at it too long it will start to hurt your eyes. Most viewers would find this a bad element to have on a website but I found it quite exciting considering everything was pretty bland.

Kat Chemsak

ARTM2210

Feb. 25, 2015

For Better Coffee

            Looking through the different one page websites, there was only one that really stood out visually and interested me its amazing design. The reason why I picked this page is because its use of design elements and the way they creatively interpreted their content. When you first open the page, there is a beautiful background of leafs. The leaves in the background are green and show contrast in the different shade and tint of green. The shapes of the leaves visually point to the main object that will follow through the top to the bottom of the page. The coffee bean in the middle is brown and contrast well from the leaves in color since it is brown but is similar in shape. Also to coordinate with the shapes of the leaves and coffee bean, there are circles in the background.To use the space well and create a pattern without over doing the content of the background there circles are visually accepted with a round shape and contrast the green with red and tone down the contrast with white. The font chose is a sans serif that has a good use of kerning. The spaces between each letter and words help create a separation from the background, including the padding from the background. As the coffee bean continues to transfer down the page you can see how it changes and transforms. In a creative and organized way it turns the bean into grounded coffee beans, to in a filter, and than becomes coffee. While this is visually represented with graphics and animations, there is also font to make sure the viewer can read what is going on, and explains their concept further. This page is not cluttered and is very well conducted in a whole.

Tiptonic’s colors are white, black, grey and orange. These colors give a sense of sophistication and professionalism, and also make it very easy to read the text on their single page. Scrolling further down the page, there is a dark grey grid with a texture on it, with orange and white text on top of it. This textured background makes the text and image easier to read, and makes the orange color pop a lot more. The bright text colors on top of the dark grey background is very easy on the eyes and looks professional.

The background changes from textured to a solid color of dark grey, orange, or white. The change in background is successful, professional, and easy on the eyes. If the user were to stare at a textured background for a period of time, the background will start to bother and hurt the eyes. It is a nice change to not stare at one color background for an entire page and instead have alternating colors and textured backgrounds.

Tiptonic’s single page navigates by scrolling from top to bottom. The single page also has clickable links to other webpages for the user. Color is one element that makes the website easy to read and scan over. The single webpage is unified, with the theme of the colors being white, black, grey and orange, and everything appears to work together and belong together, versus things randomly being placed on a webpage. The page is balanced in terms of how everything is placed into squares of information, and the colors are also balanced.

This webpage’s design is well done. The colors match and complement one another. For example, the grey complements the orange and makes it pop more and stand out to be easy seen and read. Nothing on the page blends in or gets lost, and everything pops out and is read easily. The design’s layout is successful, because it is all broken up into different squares to show a grid system, and makes the webpage appear more interesting instead of a webpage scrolling straight down in a single box of text and information.

While I was navigating my way through onepagelove.com I came across a fun and visually stunning site, easyrocketstudio.com. When I landed on the page I was immediately impressed by the animation and design  of the page. I was able to quickly pick up the information that was being presented, and within a matter of about three seconds I knew exactly what easyrocketstudio.com was all about. The main reason I did not return to onepagelove.com was because this information I was getting from easyrocketstudio.com was easy. I was able to gently scroll down the page and read the information while appreciating the art that accompanied it.

Easyrocketstutio.com is a site that sells e-sport services to any online sports, gaming, or betting companies, which means that the site is meant to target a specific niche. While the site is visually stunning, it is far from perfect. The site has quite a few grammatical errors. It has two language options, English and Russian, and the primary language is Russian. It’s most likely that these grammatical errors are translation errors. The only major coding issue can be found at the bottom of the page where some text is lost behind an image, an easy fix once the problem is identified.

One of the strongest elements of this web page is its use of artwork and visually interesting elements to guide the eye to different information.  “Don’t Make Me Think” by Steve Krug states that websites need to have elements of visual hierarchy in order to organize information for the viewer (2014). The use of the graphic elements in easyrocketstutio.com help to establish a strong pattern of hierarchy that separates the general information from the details.

The separation of detailed information is another strong point of this web page. Krug mentioned that it is key for sites to refine information and make things as minimal as possible. The goal is for the user to get as much information as possible with little to no effort. This is accomplished by keeping information clear and concise, something easyrocketstutio.com executed very well.

One element that many one page sites fail to include is a navigation section that allows the user to travel to different areas of the page without endless scrolling. The sites that do have navigation tend to be less graphical and artistic and more structured. I thought that easyrocketstutio.com did a great job at keeping the navigation bar easy to find and simple to use without taking away from the stunning artwork of the page.

 

Easyrocketstutio.com is an engaging single page web site that utilizes many of the important elements of effective website construction. The most important areas it capitalizes on would be its effective use of graphic elements combined with concise information that is easy for the viewer to read. The web developers of easyrocketstutio.com did a good job at building a site that people won’t want to click away from, which after all, is the ultimate goal of commercial websites.

 

On the site called Echo at echo-pr.co.uk, the concept that they pushed out to the general audience is very intriguing at first, but it can be very hard on the eyes for some or almost all viewers. First things first, the site starts off with the word ECHO in bold lettering but the texture is thin stripes running down from left to right through the text. The text itself is a light grey color that is put in that color only to showcase its idea behind the website which I will explain later on. It throws me off a bit not only with the stripes, but it is very hard on me to read such a contrasting color with a bunch of stripes running through the page. I get their idea behind it, but it creates such a distraction to the site that could potentially turn away clients/consumers.

Their website has a “switch” widget on the upper left hand side that turns the texture from black stripes with a white background, into white stripes with a black background. This idea is what they called their “switch-on” implementation of making an impact on the layout. The next page while scrolling down switches the text ECHO into diagonal type, which is very interesting in my opinion, then later on breaks off the lettering each time you scroll down.

Now the site’s design is very simple and basically bold with black and white textures and formed layout, but overall it connects in such a way that it flows directly from top to bottom without any contortion through navigation, layout, or scrolling sequences.It’s grid, although some images and text overflows through one another at times, is in a proper format and doesn’t throw off the set details behind the sites idea and design.

Overall, the grid used in the website’s design may be simplistic to a degree, but it controls it’s own layout and the colors and textures are primarily created through implementation of black and white. Although the colors may be simple, it all comes down to how the website portrays it’s usage to the colors.

I chose Puma.com for my review. Puma is a clothing site that sells sporting equipment and sport-related active-wear, including shoes, clothing and accessories for men, women and kids. The main navigation shows an image slider that presents the viewer with ways to use their products, and inspires a purchase. These images have buttons that are linked to relevant pages, making them effective for the main spot of the site (What is called a hero image). There is a navigation bar with their logo as an identifier, dropdowns for genders and age, sales, categories and a search bar.

Scrolling down, there are big image views that link to shopping for different categories, such as ACTV, men’s and women’s. Near the footer, there is a social section, which shows items that are trending and social media links to follow Puma. At the bottom is a site map, email sign up and find a store search bar.

Following through with finding an item, I clicked on the semi-annual 50% off sale because it caught my eye and offered a discount on items that I know will be somewhat expensive. I know of the quality of Puma, even without owning a lot of this brand, by taking into account their web presence and images I have seen so far. On the sale page, the first thing I see are shoes and a bright red bar that says “Free shipping on orders over $75.” I clicked the Price[Low] button to sort the sale items. After scrolling for a bit, I found a hat that I liked and clicked on it.

When on that page, there were no reviews, which immediately caught my eye. Being someone who depends on quality of products, I like looking to reviews for reinforcement or more information. I added the item to cart and a dropdown showed me a button that said checkout, which condensed. I clicked the checkout button on the shopping cart page and was told to enter information, if I had a Puma account or guest checkout.

On the next page, as a guest, I auto-filled my information and tried to go to the Payment page. This did NOT work. I rechecked my information and required fields, and did not find anything missing, and nothing on the site said I was doing anything incorrectly. After trying 5 times, I gave up on the purchase. This has never happened before, but I will not be shopping on the Puma site again. Upon inspection, an optional button that says “My shipping address is different than my payment address“ was unchecked, but contained many errors when checked. They should require this button, instead of marking optional.

 

For my website to review, I chose Sony. Sony’s website and company altogether deals with technology, such as T.V.’s, video equipment, phone accessories, computer software, etc.. The layout is a bit simplistic as it deals with the interface. The top layout is very simple and easy to navigate through for what I was trying to search through.  For most websites the search bar is located at the top right hand side of the interface.  Now with this search bar comes the great addition of adding in a query and locating terms that many other consumers have come across. This helps with a quick and responsive user interface experience. Not only was the search for the item easy and obtainable in a matter of seconds, but based on the tabs that contained the different categories, it was easy to maneuver around for what I was trying to look for. If I needed to go back a step with a category tab, I could easily look to my top left corner and click on the link stating, the previous page and the homepage.

When I need to search for something dealing with a certain category, I found a bunch of bundle deals that were put on display for consumers looking for a particular type of item. For example, in the book called “Don’t Make Me Think” it describes the normal consumer trying to process their thinking by quickly finding and containing the click- able tabs that don’t puzzle or creates a long thinking process of “is this___? or is that a way to get to this?”. This website greatly uses the images to work well within the background and it uses the rule of thirds decently. I say decently due to the fact that the tabs on the top of the page are a bit meshed together. The first row of tabs deals with relatively first look items that consumers look for, plus deals within the company for that week or month. The second row is the different categorical items that you can choose from and uses the images to provide a definitive look at what each software, equipment, accessory can look visually.

If I could choose a couple of things I could improve on with this website, it would be the text color on the small text which is a little harder to read if you have somewhat bad eye site. If anything, I would just make it a bit more darker hue. Furthermore, the first row tabs could be moved towards the left side of the page to grasp at the readers attention and since it is native for most people to read left to right. Other than the small little tweaks that can be made, the overall site design, user-interface, and tab location is very well done and user friendly. Controlling what you want to click on and being able to not think about what a certain search bar or click function will do is very important for customers, because it makes for a better experience and creates a better understanding to the site for others out there.

Much like Etsy, but for musicians, Reverb.com is an online marketplace that allows individuals to buy and sell new, used, and even homemade musical instruments and accessories for just about anything one might want to (or can) play.

From the start, the webpage is well organized and easy to navigate: In the header of the page next to their logo is the search bar and links for their blog, login, and if I’d like to sell something; the header stays at the top of the page as you scroll, making it easy to search for something if you remember what you want at a time when it’s not convenient to click on another link. The top of the home page is dusted with a few ads for different parts of the site such as deals, sales, and interesting products they have to offer. Scrolling down a bit, one finds a grid of various products that they have to offer, lined to the side with a category box narrowing down the types of items they carry (guitars, amps, drums, folk instruments, etc…); followed by a list of brands throughout the site for those looking for something more specific, and another which filters the year the product(s) were made, for the more enthusiast types.

I’m in the market for a delay pedal, but aren’t too sure of any brand or type, so I scroll down to the categories box and select “Effects & Pedals” knowing that’s where I want to start looking. I’m then redirected to page similar to that of the home page, but with the grid to the side focusing solely on pedals, and the different kinds listed beneath my initial selection in the categories panel. I click on “Delay” and am taken to another gridded page showing the different delay pedals they offer; I click on a Boss DD-7 as it’s one of the first on the page (and one I’ve been looking into), and am taken to a page that shows me pictures of the product the seller has posted, details about it that I might be interested in knowing, and options to buy, make an offer, contact seller, and so on. I click “Add to Cart” and am redirected to a page that gives me the option to either finalize my purchase, or continue on shopping; I click on the logo in the header and return to the home screen.

As described in the reading for a functional and well-designed site, navigating Reverb.com was effortless and near thoughtless. Everything was organized in such a way that getting to where I wanted to go was literally just a few clicks away. There weren’t any confusing hard to understand headings, series of listings that had nothing to do with what I wanted, just straightforward and to the point navigation.

Amazon has always been very good to me when I search for something.  I was looking for guitars because I am always looking into guitars but because its such a broad spectrum and I wanted to see how Amazon would help me find what I’m looking for.

First thing that was really nice was when I typed in “guitars” in the search bar it automatically showed different types of guitars I could also search for or begin to narrow down my search.  It gives me different departments I could look in first like “Instruments” or “Toys”.  Then Amazon gave me different ways to finish my search like “guitars for kids” or “guitars for sale”, again giving me the option to narrow my search fast so that I could find what I’m looking for and get on with my day.

So once I searched “guitars” I noticed immediately that Amazon was built to be scanned. Everything important stands out from the other text due to size and color. To me having price in red is the biggest thing because it catches the eye and when people know what they are looking for the next thing is comparing prices.  Amazon also offers more refined searches on the left side bar.  For me when I was looking to see how Amazon would help me find a guitar this is exactly what I wanted. The side bar starts by giving you more specific categories under your search, so I had different options like “acoustic guitars”, “electric guitars”, “kits” etc. I decided to refine my search and click on “electric guitars” and It brought me to exactly what I wanted.  Amazon still stayed very skim-able and yet again giving me even more ways to refine my search so that it was easier for me to find what I am looking for.  Categorizes like brands and price ranges allowed me to really narrow down what I am trying to find and also giving me a lot of different options.  The best part was the fact that It was easy to find different subcategories, I wasn’t hunting around the website trying to find where I can refine my search.  It was right there and easy to look through and find another category.  Along with the subcategories, Amazon is great with leaving bread crumbs. Say I keep digging and digging for something but I then decide to hop back to a category I was in 3 pages ago then I just have to look up and click back to that category instead of using the back button like everyone else.

The ordering process my have been the easiest part of the whole experience.  There is nothing tricky about it. Everything that you need to click to proceed with your order is very visible and is obviously a button to press. I would say the page after page is a little much but you know what you have to do on each page, there is nothing to try to trick you.

I would say Amazon has everything down to a science when someone comes to their website to buy something. It is simply, user-friendly, not cluttered, and you can get in and get done very quickly. My shopping experience with Amazon is what every site’s should be, quick and painless.