Challenge Tutorial (HTML Toolbox)

Hi all! I put together a video tutorial for completing the challenge I made and other static (not moving) challenges. It’s roughly 45 minutes long, and talks about a technique for rapid development.

The core principle is to Approximate in your editor, Refine in Chrome (or Firefox), and Copy back to your editor. As you practice iterating (building versions), you’ll get much faster at designing these.

You can find this video and more on my page. If you have any questions, comments, or things you want me to cover in the future, just email me.

https://www.youtube.com/watch?v=e9uzIaCSZWU

Review 1

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.

Taylor Gearhart – Review 1

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

Review 1

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.

Web Review

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.

Review 1

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.

Review 1- Stacey Capp

Recently, my personal printer decided that its printing days were over; yes, right in time for classes. Now I find myself looking for a new printer. My previous printer was a Hewlett-Packard, so that is where my research began.

When I was welcomed by Hewlett-Packard’s homepage, I was immediately able to find a link that would lead me to the “printers” section. Therefore, I did not have to do very much thinking to enter the section I was intending; the reading Don’t Make Me Think would be proud. Once I clicked on the “printers” link, I was directed to a page with a plethora of different types of printers. At first I was overwhelmed, after all, I’m not a printer connoisseur so I’m not that familiar with the different capabilities of each. I then realized that each category of printers had a picture of what they would look like and a small description of their capabilities. These features made it very easy for me to make my next click. Once I did that, I was now on the HP DeskJet Printers page. The first thing I see are special features that their newest DeskJets offer. I continued scrolling down the page, scanning quickly, like the reading pointed out, and was confused to find that only two printers were being advertised. I quickly, scrolled back to the top and found another tab, in small print, which said “View All Products.” When I clicked the link, I found myself exactly where I wanted to be to being my printer buying exploration.

I found that my overall experience with HP’s website was very easy and convenient, which are two major things that web designers shoot for according to the readings we’ve done so far for the class. Don’t Make Me Think emphasized numerous times how important it is to make your site foolproof and I feel that HP did just that. Everything that was a link to be clicked on had a different color, which let me know that they were different, thus probably able to be clicked on. My only complaint would be that the “Features” and “View All Products” tabs in the DeskJet section were a little bit small. In the reading Principles of Beautiful Design, the importance of site flow was pointed out. The author emphasized how important it is make each page of your site look like it belongs to the site. HP handled the design very professionally; creating a clean layout on each page and making it obvious that each page was part of one website. Well done Hewlett-Packard.

Review 1 – Miranda Kerin

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.

Review 1

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.

 

Website Review

Amazon is a website that many are familiar with. It is a website that not only looks good visually, but is also extremely functional and easy to use. When on Amazon I searched for new wheels for my car (I am in need of summer wheels so I no longer have to pay the fee to have my tires switched twice a year). The search bar was simple to find. At the top of the page there is an add for Amazon itself and underneath is a blue section with deals and the option to set up an account. In the upper left hand side of the bar there is a white search bar with different category options. The way the webpage is set up your eye is instantly drawn to the search bar. This is helpful for those who are in a hurry and want to find what they are looking for quickly.

Whenever I searched for my wheels at first I did not chose a department in which to search, and obviously I did not find what I was looking for. On the left hand side I was given the option to narrow down my search. Using this function I was able to narrow down the search field. In the automotive section I was able to put in which car I have and narrow it down to what would fit. This whole process took less than 10 minutes and I was able to find the wheels that I wanted.

Not once during this experience did I feel confused or frustrated. I did an experiment in which I had my five year old cousin search for a tablet and he was able to find what I told him to with little to no guidance. All in all Amazon is a very viewer friendly website that is simple to use and very well made.

Tyler Matteo – Review of Overcast

About the App

Overcast is a relatively new app in the crowded arena of podcast apps that includes established front runners such as Castro, Pocketcast, and even Apple’s own Podcasts.app. However, it has a good shot considered it was developed by the independent app developer Marcot Arment, known for popular apps such as Instapaper and The Magazine. Just from using the app, it is clear that it was built with the intention of being an aesthetically pleasing app that serves a purpose for the basic user while containing many robust features that don’t get in the way if you choose not to take advantage of them.

Functionality

Overcast, at it’s core, has a simple task to complete: manage and play podcasts. However, it successfully takes this seemingly simple premise and bakes in many layers of functionality that the user wouldn’t even know they wanted until they see it. After launching the app, the user is brought to their list of subscribed podcasts. This choice is in opposition to the alternative of showing a list of recently downloaded individual episodes and give the user a high level view with which to get to the show they want. Playlists are also shown on this primary list-view. The top and bottom margins are also packed with functionality. The button nav shows a simple play and pause button along with info on the currently playing show as well as buttons to pan 30 seconds forward or backwards. The top nav bar has four simple buttons: a settings button made obvious by being represented by the app’s logo, a downloads button that shows episodes being downloaded as well as their progress, a button to quickly create a new playlist, and an add button for adding a new podcast subscription. The screen for adding a new show is a great example of sneaking in features the user wouldn’t have thought they wanted but love once they see them. Users can, of course, search the entire directory for a show’s name or add it using its RSS URL but they can also browse new shows using recommendations from imported twitter followers or by browsers groups of pre-made “starter kits” based on categories such as “Comedy” or “Tech” or made up of networks such as “Relay.fm” or “5by5”.

Another thing worth considering is how this app handled monetization. The app, and all of the functionality you need to use it for you podcasting needs is totally free. The paid features are accessed via a simple, one time charge of $4.99 and include several power-use features. These include the ability to download new shows over cellular data, a feature that many casual users wouldn’t want anyway due to draining their data, as well as a unique audio accelerator that passively speeds up the audio in a way that is hard to notice to the human ear but can allow the user to cover many more shows over a large span of time.

Interface and Design

Overcast includes a lot of nice little design touches. The app is filled with a beautiful custom font and custom designed icons, as well a minimal interface that allows the shows’ artwork to show off across the entire app.The screen that shows when a show is playing is filled with this artwork except for the unobtrusive buttons that leave all the necessary functionality at your finger tips. The user can play, pause, and seek while still seeing the progress bar of the show. One touch I really like is showing the waveforms of the audio subtly over top of the artwork.

User Profiles

Users of this app will generally boil down into one of two categories: the casual listener and the power user. What’s great about this app is that the casual user can see all of their shows when it first boots up and add new ones with one click. Moreover, the audio controls once one is playing mirror that of familiar apps much as itunes. As their list of shows grows, they may choose to take advantage of playlists but their needs will generally be met by the free version. The power user, on the other hand, can organize their library into playlists and search for new shows based on the podcasters they know and love using the “kits” in the new show screen. Also the audio acceleration feature will allow them to chew up as many shows as possible in the limited amount of time they have available to listen.

objectified

Everything has a design, and each thing designed serves some sort of purpose. Things are designed to serve a purpose. The purpose given to something is not only a role for the designer, but also the consumer who finds personal value and purpose to fulfil their intentions. A well designed product is one that fulfils its purpose automatically. There should be no question what it is the user wants to accomplish, so there should be nothing hindering them. The design of something should be in harmony with the natural flow of one’s behavior. A well designed thing has the ability to be an extension of the user. Things like a pocket knife, a laptop, an instrument, or a vehicle can have character added to them based on how people use them. A skateboard, for example, is reflective of how the skater uses it, and the same goes with other well-designed things. Some things in life are so well designed that people dedicate their entire life into using that tool to carry out their will because it work so effectively. If it shapes to the user, works effectively, and is reliable, the designed tool can give newfound meaning to lives and shape implementation of willpower. They say a Samurai’s soul is one with his katana. A well designed thing will surpass the test of time, and can be trusted on, and can be your own.
Things are designed so that we can go about our lives fulfilling the tasks we are approached with on the regular. If there can be an easier way to do something, why not something to allow all to do said thing with ease? If anyone can do it, it can begin to be devalued. The value of the action is then associated with the item used to make it easier. The price of tools influence the price of services. Design gives forms to new ideas and a well-designed item is an attempt for users to come to terms with a new idea. It seems odd that we have many designers and people hired to make minuscule tasks easier but we still need workers to do mundane tasks. A well designed world would have automatic fast-food restaurants since everything in every restaurant only needs maybe 2 supervisors to maintain the machines. Roads should fix themselves, and cars should not need fuel, but rather just to be recharged. We have the ability to make a world full of efficacy and bounty, but our society seems to rather profit than collectively flourish. The highest paid designers design ascetically pleasing accessories. Design can help the world advance beyond imagine, but no one has seemed to design a better system for humanity to flourish together.

Augmented Reality

DreamCraft requires a pair of goggles and headphones. The headphones will deliver a sequence of binaural beats to put your self into a relaxed, meditative state. The goggles will then project a virtual sandbox where you can create 3-D structures, write notes anywhere, and create a visual representation of your mind. Dream Crafters will enter a lucid dream state where they can use tools provided. You may re-enter your world at any time and infinitely expand upon it. As a Dream Crafter explores their creativity, they will delve deeper and deeper into their minds as they tackle any situation they can conceive, and create circumstances that the Dream Crafter can live through as they figure out what all their deepest desires are. The primary purpose of dream craft is to increase the users ability to meditate, lucid dream, and self-actualize. With the opportunity to spend days in a lucid dream world where you are free to manifest nearly anything you could imagine, Dream Crafters could spend days in their mind while few real-time hours pass. DreamCraft is the key to unlocking the barriers between reality and perception. We all have this gift to create any original thought, so with DreamCraft, you are opening doors to an opportunity to explore all your thoughts, hopes, and dreams with vividity.