Author: ejcst762

Posted on

ecarrington Review 4

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.

 

Posted on

Snapchat Review

The usability of Snapchat stems from its systemically linear approach towards providing convenience and practicality. Snapchat is practical because it is a means of sending a message through imagery. This imagery is usually in the form of selfies; and, in a narcissistic society, this method of communication works fine. Why is Snapchat more convenient than a simple text message? The answer resides in the millennial users, who insist on conveying more information than text and emojis can satiate. They have a desire to share their faces, smiles and good times through a practical and powerful application where their friends also are.

Functionality is relative to performing functions a number of times. Snapchat’s primary function is taking and sending images and videos. Anyone can download the app, and it opens (Once you are logged in) to a distinct screen that displays the camera output. Through inference, children can figure out that swiping will bring the user to pages that display friends, snaps or Discover. When taking a picture or video, there is a big button at the bottom of the screen to show the functionality behind recording or snapshotting an image. Sending to other users is easy, as it is the next screen after taking the image and pressing continue. Adding users has become simpler due to an update that allows user to take a picture of a QR code on other Snapchat users’ devices.

Snapchat’s interface, design and aesthetic are all intertwined, as the interface delegates how the app is used and what it looks like. Design-wise, Snapchat is simple, uses emojis and icons to convey a majority of information. There is text, but it is used sparingly; namely, it is used in table view cells as naming information or time of the snapchat send. There is a conversation feature built within Snapchat, but it is primarily viable based on imagery sent between friends and acquaintances. The aesthetic is clean and simple, so as to appeal to users who do not want to deal with unnecessary or ancillary pages or objects that do not correspond with the theme of simplicity. There are only a few colors in use to designate what page the user is on, but design is seemingly becoming more scattered and less unified over time. This is because the developers are paying less attention to the overall unification and, instead, adding more features. For instance, when swiping left or right, there are different elements that distinguish each page, but they become lost in translation when viewing Snapchat from a hierarchical view.

Posted on

Review #3

No. 9 Park’s site  is relatively static and not balanced based on the amount color-choices and image at the top of the home page. While navigating through this website, the only thing that changes is the top-right div that houses an image and some text. While this makes navigation easy to examine, the sites balance remains poor. There is plenty of black in the background, and the div appears floating because it has a lighter value. This value is sitting on the right side of the page, so I do not look at the bottom-left of the site at all.

Like before, the only content that changes are text and images on different pages; the site is unified because of its static approach to displaying content. Every page has black, gray, a splash of the accent colors and similar footer and sidebar content. The emphasis is drawn on the new text on each page. Where there is a stark contrast between the background and div containing the image and text, there is an emphasis on what the audience should look at. The layout is lacking any differentiation. There are two columns, one for navigation and another for images. There is a footer at the bottom with some more information on the company, reservations, photography credit and site design.

The site is identified by the logo at the top left corner, something that is found in many sites created today. The user knows they are No. 9 Park’s site because of the logo and consistent color scheme carried throughout. This identification serves as a primary indicator of current page viewing and a home button to bring the user back from the rabbit hole of links on this site. As previously stated, the logo is a primary way to go back home. There are no breadcrumbs on this site, so an additional home button is not found. The browser’s back and forward buttons are simple ways to get back, but there is no way back home other than clicking the logo.

There is no option to search on this site. I looked for search bar and came up with nil; however, there is a small site map located in the footer and a menu of pages along the side of the page. This site has some ancillary pages to describe how-to’s and other information you may need when visiting the restaurant. Sections are divided by layout and column work delegated by the web designer.

 

Primanti’s, in relation to No. 9 Park’s website, has more balance, unity and emphasis because of the division of content, images and colors used, typography and visual interest. To start, balance is even because Primanti’s uses right and left justification/float of text to express balance. The cover image has left alignment of text, while the navigation buttons are right floated. There is balance when scrolling down the page because of the dark background, imagery that copies the style of neon signs, chunked segments in terms of divs and analogous colors. This site is unified because the navigation bar and footer match on each page, as they should. Textures are implemented across the board to give a feeling of unification, especially when used more than once. Fonts are consistent and imagery feels the same on different pages.

As previously stated, emphasis is placed on neon sign skeuomorphism found throughout the site. This draws in the eye to the food or images that are near these icons. Every page, other than the home page, follows the unification of explaining the page with one of these icons that have a great amount of emphasis due to size and color. Layout consists of horizontal divisions with differing backgrounds and emphasis on different sections of the website. It works well to show an image for each page; this image describes what is going on before the user scrolls.

Primanti’s logo is based in the top left corner and provides a way to identify what site the user is on and also a way to go back home by clicking on it. As said before, the logo is a great way to go back home. As with No. 9, the information architecture is hierarchical and does not require a breadcrumb, because most pages are only one page deep.

Like No. 9, there is no dedicated search bar, but a small site map at the bottom. These utilities are found in the footer along with the site map. There are different sections in the site that are accessed from the navigation bar.

Primanti’s’ draws my attention because it has bold, big icons, imagery, dynamism and similar typography throughout the site. The attention to detail and interactivity are more fun and make me want to use the site longer and find more information on it. Although I did not read much, the imagery gave me the idea of where I was and what I was doing.

 

No. 9 Park (http://no9park.com/)

Primanti Bros. (https://www.primantibros.com/)

Posted on

ecarrington.week6Reading.web

I am reviewing the ste http://jpg.codes. It makes use of changing the user’s appearance through selectable background colors based on hex. To access these colors, the user must select the hamburger icon in the top left corner. One can find an easier color on the eye, however, there is no texture associated with this site.

The site could operate nicely as a single page with scrolling, but chooses to provide a new page to look at work, and even redirect to pages that have been created by the author. Scrolling is the preferred navigation; the user can scroll up and down. Big buttons, icons, circular portfolio images as buttons, and humor make the site easy to use, understand and ultimately enjoy.

The site could use work because there is little content on the homepage, which could be expanded to accompany portfolio information. The button to change background colors is interesting, but ultimately unnecessary. There should be more than one way to contact the author than a button that says “Holla atcha bwoy.”

 

Posted on

ecarrington.week6.Objectified

Elijah Carrington
2/18/15
Designing for New Media

Interaction design is creating products, relative to their baseline, that solve problems. Through standardization and conceptualization, everything is designed for a reason. Whether that reason is to fulfill a promise, solve a problem, or change behavior, design is here to stay. Anything that we touch, see, use, and ultimately understand is interactive design.

I agree that there is a story for every object, especially those that have many revisions and information passed down. Find the products that no one cares about, where extremes will influence revision, and can be changed for the better. Design a better experience through iterative ergonomic processes. At Smart Design, rapid prototyping is implemented to quickly figure out ergonomics and ensure CAD aligns.

Making products usable, understandable, unobtrusive, truthful, aesthetic, is what good design is about. Design is how you look at the world, and asking why? Materials, physical-form, connection are focused on getting design out of the way. Enable the product, do not distract from it. Ensure hierarchy, and show that choices are calm and considered solutions. Form follows function as a manifestation. Designers interpret and understand what people need, better than they do. Good design distinguishes from relativistically ill-thought solutions.

The most important question regarding interaction design is: What form should this object take and why? Derived questions include: What feelings do the sensorimotor actions invoke? Will this product last and how much will it cost?

Designers will be the culture generators and translators for the rest of the world that needs to be taught what things are and how to use them. We translate using icons, colors, feelings, pictures, text, and so on, to achieve a transferable message. This message will have a lasting impact on the audience, only if it survives the true tests of design and makes its way into the consumer’s mind.

Posted on

ecarrington.week6Reading.media

Ethnographic tools such as observation, interviews and surveys can help improve interactivity of an online banking website by providing naturalistic insights into the mind of a consumer. The point of ethnography is to understand why people do things. Observation will show what pages the user wants and needs to get to, what they might struggle with, and other applicable data. An interview can probe what was found in the observation section. A survey can be sent to multiple users to see if there are any issues within the site that need fixed.

Design is finished when the dialogue is clear and concise, between art and the consumers’ ability to read the design. The artist must consider the artwork complete, but so must the user, upon their consumption of the media. The success of design stems from the rationale of design. Why should we, designers create anything in the first place? For contextual reasons and to convey meaning. If there is no context, design will not exist. If the meaning is not clear, design is not successful. Purpose stems from relativistic meaning, as declared by the artist, client or consumer.

I use Apple’s products on a daily basis, namely my iPhone, iPad and MacBook Pro. Their branding, or dissemination of business goals and values through their products, has unified my use cases. Their vision of clean and easy to use products and interfaces can be found in every use case I have come across. I am looking for products that I can use to get things done without the hassle of external customization. My experience has been great with these products so far, due to the way they brand themselves and the company.

Posted on

ecarrington_Week 5 Reading

  1. What makes up interaction design and what are some of the industry’s challenges?

Interaction Design is the process of creating and defining what the issues of design are through testing and asking users. The steps may sound formal (Define, Construct, etc.) But it comes down to who you are solving a problem for, and whether or not your solution works. Through designing interactive products, the process of interaction design makes more sense. Consumers and clients alike do not understand what interaction design is, resulting in a lack of straightforward communication and limited resources. The client cannot know what they want unless they are shown what is possible.

  1. What is interaction design, how its evolving. What fields does it draw knowledge from?

Interaction design is creating for people and understanding the process in which people interact with digital products and environments. The fact that interaction is reliant on the consumer means sociology and/or psychology are applied to this activity. By anticipating what users will do, what errors they may encounter and the paths they take will enhance their overall experience. Social engineering is factored in as we naturalistically observe their interactions and act upon them.

Posted on

1_ecarrington_Web

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.

 

Posted on

2_ecarrington_Scope

The overall strategy of FuelPass is reliant on its goals. It is, quite simply, an EZ-Pass for gas, with goals to be intuitive, simple, powerful and reliant. Intuition stems from an easy-to-use interface, simple explanations for detailed use-cases and a well-designed information architecture that shows where the user is, relative to the home page. Simplicity and powerfulness relate when an action can callback to a powerful function or method. These facets will be apparent when the user pulls up to get gas and do not have to go through the normal routine. Reliant technologies can be created as infrastructure is built up on a scalable, relational database. Once users are feeding in exponential data, and this data is crunched algorithmically, reliability will be improved. Even on a small scale, reliableness may stem from talking to users on a case-by-case basis, to ensure technology is working as it should.

The user wants to easily purchase gas, and can do so without the use of cash or a card, with FuelPass. They may not even have to leave their car, in applicable cases. They may hope to gain insight into what FuelPass is. In their case, they will need pictures of the product, explanations, a shopping cart for purchasing, a login system for saving their information, etc. As the creator of the website, I hope that all interactions leave the user with a positive feeling about the site and product, and do not automatically turn users off with gimmicks or useless pages, features, etc. The point would be to consolidate information, eliminate redundancies and elicit positive emotions.
The strategy and features of a site align themselves clearly. The creation of the mobile website or application will match the goals defined above, such as simplicity and intuitiveness. Technology will be cloud-based, to update profiles and balances on the fly. A user will see their balance, where they purchased gas from, a sheet of electronic receipts, and their rewards score. A function that sends this data will be based on pings from the chip, embedded in FuelPass. Once a secure connection is established, the user is able to get gas, to their chosen amount, and this data is fed to the cloud-connected servers, which update the user’s account.

There will be geo-relative chips embedded in the actual product that also relay information to the cloud, resulting in a heat map of your most used locations. This will be useful for showing most popular locations, giving increased rewards for return customers and showing where other users were able to use FuelPass. These chips will only transmit location data relative to gas stations, as laid out in the terms of use and privacy policies.

A rewards system, also available on the site, will be available to save money on gas automatically. This reward percentage is shown in the app, and this data is also provided by a simple calculation, server-side, based on amount of gas purchased, at what price, and from what provider.

Choosing to use a separate payment system, percentage saved based on location and relative notifications are available as additional features within the website. The creation of the site will provide useful information on the product, locations, rewards, and a consolidated login system. Users can learn more, order FuelPass and check their profile using this site.

Posted on

#1_ecarrington

Apple understands a user’s needs by segmenting them into demographic profiling, but only providing baselines for their machines. For first time MacBook buyers, they need only choose the correct MacBook section from the top bar, and further refine their choice by selecting from customizable option. Apple decided to point out the best features first, when MacBook is clicked on, in the form of a scrolling page. After purchasing a MacBook, the user can view built-in apps, performance and reason for design choices.

 

Facebook has content requirements for its wall and posts. These consist of four main content columns, the first of which is dedicated to “liked” pages, apps and groups. The wall has posts, defined by Facebook and created by users, followed by a column for trending topics. People to message are available on the right. Content is created and driven by the users. The frequency of updates are determined by users. Objectives, aligning with user wants and the company’s requirements, form a strategical content implementation.

 

An example of a hierarchical structure, found on Facebook, are posts. They have a parent-child relationship and are tied exclusively to their initializer. Every node, or object, must have a parent, but not all parent nodes have children. In a matrix structure, different filters can be applied to existing data to show corresponding data related to their query. This structure is found in the search bar of Google. Organic structures do not follow a pattern, and are therefore hard to follow. In the case of the flow of posts on Facebook, these are sorted by relevance, but are hard to relocate if the page updates. Sequential structures are often found in offline sources, such as books, articles and video. Therefore, Youtube would have a sequential structure during video viewing.

 

Huffington Post’s index page is mainly content, with some room at the header and footer for navigation through links. There is about 80–20% content to navigation spread on this site. Google is primarily for searching, and relies on user input. The links that come up are associated with metadata, created by the user. Google’s spread is 30–70% content to navigation. The front page of Wikipedia has barely any content, and relies solely on linking. Therefore its spread is 5–95%. Etsy is a more even spread, resulting in 60–40%.


Landor guides the readers’ eyes by providing bold graphics that captures attention. The grayed out images serve as a background that also shows work, and the hero image takes the main stage as the information provider for newcomers to the site. The chosen grid, typography and color palette all correspond with guiding the eye towards important information.