Category: ARTM2210 Intro to Web

As the weather gets colder, I realized I am in desperate need of new leggings. As I entered the Athleta website, my eyes went immediately to the changing picture in the middle of the screen providing me with new arrivals and different design collaborations. Directly above the moving picture screen is a list of categories. I very easily click on Bottoms which leads me to a new page of many different pant styles. On the left of the screen are specialized categories for sizes, specific styles, or more features. If I scroll down I see lots of images of different pant styles with readable labels. I then click on the tall option in the specialized categories section of the website. That click then brought me to more bottom options but specifically the tall style I was looking for. Now on the left side of the page there are size options, color options, and price range options. I scroll down the page until I find a pant style I like and click directly onto the picture. Now on the screen is a big picture of the pant I clicked on including a zoom in option, different colors of that same style, recommended options, and the rating for that pant. After choosing my size and desired color, I clicked the all caps add to bag button. A message pops up telling me I added an item in my bag. It gives me two options; keep shopping, or checkout. I choose the bright red checkout button which then takes me to my shopping bag.

I found that my overall experience with Athleta’s website was quite easy to use.  The website was also very pleasing to the eye. Don’t Make Me Think emphasizes on making a website convenient. The site was easy to look at. The designs were simple and the process of checking out was quick and painless. The layout and ability to find a product was dummy proof.

I am drawn to fashion trends and spend a fair amount of time looking at clothes, usually that I can’t afford, online. I like to buy clothes from a variety of websites because it gives me a more diverse collection, so I’ve spent a lot of time on clothing websites. I was recently introduced to the online clothing company “ASOS” through online advertisements,  and it looked like the type of brand I’d be interested in.

The website has a fairly simple layout and is easy to navigate. Upon clicking on the “Women” page of the website, the page shows current featured collections, or allow you to look at individual products towards the bottom of the page. Dragging the cursor over the “Women” tab also creates a drop list of the variety of products to look through. It is incredibly easy to directly search for what you are looking for, or to browse through collections.

Another interesting attribute of ASOS is the ASOS Marketplace, which allows you to shop from independent, vintage boutiques through the website. The Marketplace website is nearly identical to the regular website and is incredibly easy to navigate as well. I like this idea because it gives a whole new range of products that are able to be purchased through the website.

The ASOS website aesthetic is clean and minimal: a white webpage with bold Helvetica text in black. The neon color palette and vivid graphics give a pop to the webpage and alludes to the current 80’s and 90’s fashion fad. The photography used is again simple, shot in the studio with a white backdrop, bringing attention to the clothing and styling. Overall, the website is effortless but still portrays a distinct fashion statement. The website immediately suggests the type of customer who they intend to purchase their products: young, trendy individuals who want to stand out.

I’ve been looking for a fur jacket, and after a simple search I found several I was interested in. Upon clicking to put it in my cart and purchase the item, I did have to make an account in order to buy the product, but it was an otherwise streamline and direct process. The minimal format and smooth navigation of the website made it enjoyable to use and left me with a good impression of ASOS. 

us.asos.com

Today I will be reviewing the positives and negatives of a site that millions of people all over the world have used, Ebay. For my test I will be looking for an alarm clock to purchase. Upon entering the site there is a lot going on, as with many sites specifically e-commerce sites. As I read in “don’t make me think” as users our eyes are drawn about the page and scan without reading much specifically. The first thing that jumps out is a large box at the center of screen right with a title reading “hot new deals” along with photos of furniture. Because I am looking for an alarm clock I don’t click on the hot deals box and instead find the search bar, which is at the top center of the page. This may be because when the page loads it’s directly in front of you and is easy to find and use. As I begin to type in “Alarm” the search box drops down and shows the phrase “alarm clock” in an attempt to guess my full search, also giving me the option to either search for it across the entire site or just a specific category. Along with the correct search of “Alarm Clock” comes many other terms beginning with Alarm that I do not need. After typing in half of alarm clock I select the phrase with the category”home decor” next to it. The next page that appears is the results of my search, once again I scan the page and end up following the pictures of different alarm clocks down the center right of the page. On either side of the listings are advertisements, some for other products on Ebay, others of outside companies. I scroll down the page looking mostly at the photo of the item and the price. Because I have a good idea of the type of clock I want I find my way to the left most side of the page at the top. Here I find the options such as price range, color, and style. I select the check mark next to the color black and the page changes slightly in the center to only display black clocks in the photos. I then select modern under the styles option and a similar result occurs with the items listed. I continue to scroll down the page until I find a clock I like. After clicking the blue name of the product it takes me to another page with details of the clock, including price, shipping cost, delivery time, and a description of the product from the manufacturer. I see more photos of the clock and decide I want to purchase, so I tap the large blue “buy it now” button. The page I am then brought to is a conformation page outlining my total costs shipping address, which is already filled in from having used cite in the past, and my payment type. Then in blue at the bottom right hand corner is a button that asks that I confirm the purchase.

I went into the review of this site thinking that any tools that helped me to find my product should be considered positives, and those that were confusing or misleading be negatives. That being said the site is more over positive, Right away when you enter the site you can find the search bar, which is the most important tool when you already know what you want to buy. At the same time if you are simply in the mood to buy something there are plenty of windows that advertise deals and special products on the site right now. While searching the auto guess is pretty spot on if you’re looking for a fairly normal product, like I was, and the ability to choose a category is a great addition to get you to the product you want even faster. Once you have searched for your product the results are the most dominant things on the page, each clearly showing the price and photos of each product. By far the best tool on the page is the narrowing of the search through the options that I mentioned like, color, size, cost, and material. When there are millions of products for sale on the website the more detailed the search options the quicker that you can be connected to the product that you want. Finally the buying process is easy to do and works with the user step by step, stopping them any time that something is filled out incorrectly and waiting until all fields are confirmed.

The biggest problems with the site for me were based in formatting. While the search bar was easy to find it would have been more difficult and taken longer to locate the search bar, many important links to categories are in plain black text that doesn’t specifically denote a clickable link to someone that is simply scanning the web page. Along the same vain of reasoning, the search option tool on the left side of the screen are plain black. I found myself scrolling down through the page and viewing the listings for a time before going and changing the settings to get me closer to my desired look.

Overall the site performs very well and is easy to use as a means of finding and buying products from all over the world, as well as comparing the prices of items from different distributors. This seems only to make sense with a website that is so well known and used. There are specific reasons that some sites fail while others make million each year, and it has a lot to do with the interface.

One could say that I am almost addicted to audio and finding the best out there for audio. I have recently been doing research on finding a portable speaker that could meet my specific needs and wants in such a product. A commonly known store and site for all thinks electronic is Best Buy. For this reason the website that I choose to for my purchase was BestBuy.com.
Like I said before, the product I am looking for is a portable speaker. When I go to the site it is easy for me to find the bluetooth/portable speaker selection. This is in a drop down menu from the top. Once, I got to the selection I had the option to sharpen my view. I could do this through the side bar on the left of the screen. A problem I ran into with this is that every time I selected something such as price the page would refresh automatically. Now, this would not be a problem if someone did not know exactly what they wanted but I did and had many different boxes I wanted to select. Instead of selecting all the boxes I wanted then submitting it, I would select a box then the page would refresh, then select another one. This was frustrating but was the only problem I ran into. Once I decided on the product I wanted I could either add it to my cart on that page or click on the product and add it there.

Overall, I would say that there site works well with ordering products. The only issue I ran into was selecting multiple boxes to lower the search at once. This automatic reload option would work well for a person only checking one box.

I do a lot of online shopping. I have ever since I got a job and a debit card. Amazon has always been my go-to and I never would buy clothes online, in fear of them not fitting after the long wait for them to be shipped, until I saw an ad for JackThreads. There was a checkout code that gave you 30% off and free shipping, so I had to check it out.

The site is set up well. Neat, compact, and easy to navigate. This time I figured since fall is coming up, I’d search for a jacket. The home page has categories shown in large boxes. Everything is easy to read and there are a lot of categories. I clicked on “Jackets & Outerwear” and the first thing shown are the best sellers, then the rest are shown with the recommended jackets first. On the far left of the page are the filters. There are a lot of options here. Brand, size, type, color, even a filter for how warm the jacket is.

Now, this site is not for searching for a specific item. Most of the brands are not huge names, and a lot of the items are exclusive to the site. There is a search bar if the user is looking for a specific item, but I doubt someone that has never been on the site would use it effectively. I normally just browse the site with a very general idea of what I’m looking for and I almost always find something for a good price that I would deem worthy of a purchase.

Does this site “make me think?” I would have to say no. If I want to browse this site with a general idea of what I want, I will be able to find an abundance of options to choose from. If I want to narrow it down to one specific article of clothing, there are a good amount of filters to use on my search. Everything is laid out nicely and easy to navigate.

 

Our world has drastically changed in just a small amount of time. The technological age has boomed giving us access to new resources and means of making life easier. A prime example of this is the rise of large e commerce sites. For this review, I have chosen to take a closer look at Microsoft’s website and their online buying experience. The first thing I noticed when going to their homepage was the layout. The entire page reminded me of the grid system they now use in their products such as the Surface Pro tablet and the Xbox One. The layout as a whole was very symmetrical and easy to navigate, all with the use of large blocks of color. In the reading, Don’t Make Me Think, the author mentions how much design has changed in the past few years. Instead of ‘fancy’ fonts and the over-use of ‘fun’ images, minimalism is now used instead, giving it a sleek and modern look. While ordering on Microsoft’s website, the process of putting something in-cart, and beginning the billing process was somewhat grueling. Each link I clicked to move to the next step gave me a pop-up ad for either Xbox Gold Membership or asked for my e-mail in order to receive “coupons”. For me, it was too much product pushing, especially when I would have already been making a purchase. Other than that, the layout they used for giving product info and reviews was very simple and easy to understand, and I would consider purchasing from their online store in the future.

The Website i choose to review is Amazon.com, The design principles that are utilized are that i found this website to use a very colorful color palette. i found that also everything is very organized and ordered into categories and centered in the page. I found it is very easy to navigate my way through the site as all the buttons are at the top of the the page which made it very easy for me to find were i needed to go to access my account, and to find my wish list and any gift cards i would need. I found that the search bar is very easy to access to as it is at the top of the page, overall the site does make you think that much as everything is very organized and in categories to make it easier to find what you need. Access to your wish list and account are very accessible also so it does not make you think as much. overall  i really wouldn’t improve that much on the website as everything is very accessible and the color choices and overall design are very good as well, and the text is also very centered which is excellent as well.

For our fusion restaurant we do not have a lot of competition; so for this review I am going to pick another fusion restaurant that might have the same clientele. Our fusion restaurant is a soup fusion place. The name of our place is Soup of the Seven Seas. Meaning we have seven different soups from each continent. Our restaurant site will have a main page, an about page, a menu page, a soup gallery, and a contact page. With these pages we will incorporate the same color scheme throughout the layout; as well as the type. The feel we are going for is a modern, relaxed place where people can come and enjoy a bowl of soup from one of the seas. The layout we have for our main page is different from the rest because we wanted it to stand out and to be interactive for people to use it. Each graphics leads to a specific page. Once clicked on that certain graphic it leads you to the connecting page. Then that page has tabs at the top that connect back to the main page as well as connecting to the other pages of our site. The fun graphics for our site will make the costumer enjoy their experience on our website. Soup of the Seven Seas is going to be the next big journey to conquer.

I chose Central Park Fusion, as a competitor. Their website has some animation, they have their name and a tab to make a reservation appear one the site loads. When looking at this site they have a consistent layout throughout. When scrolling on their homepage they have cutouts that show some pictures of the different items on their menu and some pictures of the venue. I personally liked how they have their booths, and tables set up. It looks like a very relaxing and calm environment. Which makes it look like an expensive place. I did not like how many times they had the same thing being used. They have make a reservation on their homepage over three times. I see this as overkill; they seem desperate with this. Their tabs are to the point, they have a nice look to them. They have four different tabs, which lead to the over sites. Their pages are very organized, and they use the same color scheme throughout.

Our site will stand out because our fusion is so different that people will not be able to resist to have a good bowl of soup from the seas. Plus our food will not be as pricy as Central Park Fusion.

A site that I found to be competition to the site that my group is building for Intro to Web Design is called Parts and Labor. The site is created in Squarespace, as figured out through clicking on the Menu button and seeing the static menu content. The layout consists of horizontal sections with images and text that correspond to which page is selected. The site starts out with a navigation bar at the top and a full-page image that tells the user to swipe down. Fixed images make the page feel like it is longer and gives a parallax effect to the overall site. The layout is continuous throughout the site. On other pages, there is a horizontal section that displays text depending on what page corresponds with the navigation bar selection. The footer is a big section at the bottom that provides links to other bars and restaurants (presumably owned by the same company/owner), an Instagram feed and Twitter feed.

The colors are dark and consolidated to white, reds and black. A mood is set with the dark theme found throughout the site; the site itself feels restricted and more reserved, lending to privacy and sophistication. The non-use of extraneous frills in design also lends to a sophisticated feeling. White, and the use of white space, is important, which is why including the color white is a good break from the dark theme. It also gives a chance to redeem hierarchy that can be lost in a dark environment.

There is little use of texture throughout the site, lending better to flat design and reliance on typography to convey messages. Where images do convey the use of texture, it is grainy and grungy, also lending to a break from flat colors. These images act as anchors for the eyes.

Navigation is primarily conducted from the navigation bar at the top of the website. The footer serves for additional navigation and external social media links.

The final project is still being built out, but our site can benefit from this analysis by adding a slight texture to the background, some lighter elements and full-sized image sliders found in this site. There is also a navigation through pagination found on the right side of the homepage of Parts and Labor that serves an important role in breadcrumbing.

 

When deciding what type of fusion restaurant to create, I came across a restaurant called Anthony’s Coal Fire Pizza. I found their design style appealing and also liked the concept of the restaurant and though it was be a fun task to take on. The concept we came up with was a fusion restaurant called Za’ Fusion, a unique fusion pizza restaurant. What caught my eye with Anthony’s Coal Fire Pizza site was the simplistic design style and simple color scheme. I used their site as a reference not only because of the design style but also the layout. When designing our site there were specific design elements to consider which were also excited in Anthony’s Coal Fire Pizza site.

The basic elements that combine to create visual designs always remain the same weather it be tradition work or web design. Using these key elements of design will ensure you can create a functioning and effective design. The functioning design elements of Anthony’s Coal Fire Pizza starts with the clean and simple layout. There is balance, a constant color scheme, use of space and texture. All these elements come together to make the layout look good but what makes it function is the choice of navigation. There is repetition in navigation to ensure the viewer is able to remain sure of what page they are on. There is a hierarchical type of architecture to the sites layout and global navigation. The logo remains at the top of each page, as does the navigation bar. The footer is a reflection of the navigation bar to ensure a way of moving though out the sites pages. Though out the content of the page things are spaced appropriately. There is use of simple geometric shapes and thin lines to move the views eye around. What I found to be most effective the repetition of the same layout though out the pages. The colors used are not vibrant or distracting but subtle enough to add to the simplicity of the sites design. They add texture to the sites layout with the images that change though out the slide show that is placed at the top of each page.

It being said that the basic design elements incorporated with good navigation will make for a successful web site, I tired to incorporate as many basic design principals in our layout as possible. Like Anthony’s Coal Fire Pizza we have a simple color scheme, we used simple geometric shapes and a grid layout. The style of architecture we used is hierarchal style. We also used the global navigation and kept the same links on each page. Our navigation bar and footer reinforce the links on whatever page the viewer is on. To make the design not as heavy as Anthony’s Coal Fire Pizza, we used a white background with black text and added a few colors to as some life and emotion to the page. The logo is placed at the top of the page and remains there to reinforce the fact that the user is on the same page. We also used the same layout on each page, this works like setting a page in the book. If everything remains in the same place then there is less work for the view to figure out where to place their eye, it just automatically happens.

In order to make our site stand out we used the white background to make it much brighter and added a button that appears once you have reached the bottom of the page that takes you to the top. This is an element that Anthony’s Coal Fire Pizza site was missing. We used warmer colors to make the page have more of an excited physiological effect. We also have the selection on the navigation bar to indicate what page you are currently on but it is also reinforce in the header. With out site, the used knows where they are and can easily find where they need to go, working in a full circle. I would say our sites layout is simple but effective.

Domino’s will be the website to be compared to my group’s website which is a pizza restaurant. The layout for Domino’s is simple, and it is easy to read the navigation. However, their front page has a lot of information and text on it and looks too cluttered. When looking at their front page, my eyes don’t know where to look first and what to read first. There is also a lot of pictures on their front page which also makes the layout appear cluttered with too much activity for the eyes to try to register. Domino’s menu layout is nicely balanced with easy to understand ordering and easy to read text. Their main colors blue, red and white are incorporated throughout their entire website. Domino’s could have a ‘home’ button on each of their web pages at the top versus their Domino’s logo because some issues may arise where others may not know how to get back to Domino’s homepage.

Our pizza restaurant website, Za Fusion, has a different layout compared to Domino’s website. Our website is also simple, but it is easier to navigate. Users will not have difficulty finding information or reading text on our website because our website contains space, sections, and is not cluttered. The colors on our website are easy on user’s eyes, whereas Domino’s colors are a bit overwhelming. Domino’s colors are mostly overwhelming on their front page because of all the text that is cluttered so closely together, and the blues and reds that are so close together.

Our website will stand out for numerous reasons. Our colors are a darker version of Italy’s flag colors, whereas most pizza restaurants have lots of reds, oranges, blacks, whites and blues. Our website is simple, with the right amount of information without cluttering and overbearing the eyes with too much text. Users don’t need to think when using our website, and also has a ‘home’ button on every web page.

The websites I choose to compare to my group’s final website was Pizza Masters. I think many people will agree with me when I say that Pizza Masters is an effective and yet very simple non-appealing website. Pizza Masters layout felt empty and yet cluttered. There was a lot of negative space. Their logo was off to the left side of the page itself. They didn’t use the entire space for the layout of the menu. It kind of looks like they clumped everything together. I didn’t really like the colors used in Pizza Masters’s website. The fixed burgundy background color was somewhat appealing because it’s such an uncommon color to use as a background. However, the text being in different colors really didn’t work with grabbing the viewer’s attention. The website also used different fonts so the text was unified. The menu itself felt light and pretty normal mainly because of the white background behind the text. But it also felt clumped together because of how close the boxes of content were to each other. Navigation wise, it was pretty simple. There was nothing really special about it. There’s no way someone could get lost looking for what they needed when surfing Pizza Masters’s website. But I just wish the website would have pictures or something to give it the “umpth” so it would have some visual appeal.

My suggestion of how my group’s website will stand out will be by the simple yet elegant feeling you get when you visit the page. Our colors aren’t really uplifting but they’re not dull either. Our colors consist of black, white, green, and red. Now they don’t really grab the viewer’s attention but you also can’t get lost or feel cluttered when you’re scrolling on our website. Our text is all one font and very readable. The menu itself will have a clear section for salad, appetizers, and pizza. Another way I think our website will stand out is by our pictures. I mean, people want to see a picture of what they could potentially be eating! And we have some amazing pictures of the food, appetizers and drinks. Our use of navigation is pretty simple too. So there’s no way someone could get lost or confused while trying to find something on our page. In my opinion, I would say our website, ZA’ PIZZA, will stand out more by just being more visually appealing. And being as though this website is for a restaurant, visual appeal should have been the main focus when creating the website itself. The website for restaurants reflect how the food would look and how the place itself would look. It’s the complete opposite with Pizza Masters. Pizza Masters lacks visual appeal and harmony.