Week 2 Questions

  • What did the standards of the w3c provide?
    • The W3C developed standards for code that were intended not to function as laws but to establish rules and guideline to provide consistency in code. Web developers who use the standards first hand created the w3c standards. Their main goal was to ensure long-term growth for the web.

 

  • What are some general guidelines for great markup?
    • Hyper Text Markup Language (HTML) is used to create structure to text documents and then CSS is applied to add design elements. Browsers interpret these documents is specific ways using the guidelines created by w3c. In order for the code to function properly all elements and attribute names are written in lower case. It is also required that all attribute values are quoted in order to be read by the browser. Another common standard is that all elements are ended with a slash.

 

  • What are the benefits of standards?
    • The obvious benefit of the w3c stands is the ability for web developers to have a standardize language that allows for consistency when coding. Applying web standards to your code allows for greater visibility in web searches. The set structure of HTML elements makes it easier for search engines to access and evaluate the information. Another benefit that is more audience related is the importance of accessibility. The web is used by many people with disabilities, by using the provided standards also allows web pages to be understood and accessed by people using browsers other then the usual ones such as voice browsers that read web pages aloud to people with sight impairments.

Review #4

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.

Review #3

When designing a website is it key to have clear, simple, and consistent navigation. The user looks for tabs and navigation the way one uses the hanging signs in a grocery or hardware store to find their way to what they are searching for. The more obvious the signs are the better. The ability to easily navigate ones way through a website will hold regard to how successful it is. From a designers point of view you want to avoid frustrating the user, once frustrated you have lost them and there for your site serves them no purpose. The use of balance, unity, emphasis and a good layout are key elements to create a successful website. Two sites I examined for use of these elements were Burgatoybar.com and Frantoary.com. Both sites exemplified use of these elements however I found Burgatory’s site to be more functional then Franktuary’s site.

Burgatory’s site being the more successful of the two is where we will start. The site its self is very interactive and has a lot of information displayed in a very organized and easy to navigate arrangement. The fundamental rule to follow is to have repetition with the site ID on every page the site may take you. This should remain consistent with the navigation. Both the Burgatory logo and site ID within the navigation function as home buttons and also remain stationary through out the sites navigation. The logo is set in the upper left hand corner and the navigation opposite of that. There is the use of balance and unity. They also both act as a means to get back to the home page, which is very critical if the user begins to feel lost. When exploring the navigation bar, first you have five initial tabs, taking you to their menu, products and other obvious reason you might by at the site. The most complicated the site navigation bar gets is the ten secondary links under the “hungry” tab, which take you to each section of their menu. The user may get stuck inside the menus tabs but not lost, never once will they think they are at a new page or not know how to move forward on the site. All elements mentioned are utilized in this site, balance, unity, emphases and a good layout. Which awards it the more successful. Now lets look at why Franktuary’s website and why it was not as successful in it execution of design.

Frantuary’s site is quite simple at first glance, I would argue that Burgatoy’s site is a bit more to take in but it is still much easier to navigate. At first glance, you notice the navigation bar that is placed obviously at the top of the page with the Frantuary logo right bellow. Both are thoughtfully placed and also functional. There is a sense of balance since both are conveniently placed at the top of the page where the eye tends to lazily rest itself. However once a location is chosen a second navigation bar is displayed in the body of the content. Which can cause confusion with the user. I feel it offers more distracting purpose then functional, something I would personally leave out. The second aspect I found to be misleading and confusing was the photo page. Once the viewer had checked out all previous tabs they are now at the photo tab. Once this tab is selected they are presented thumbnail pictures of dishes Frantuary offers. On one occasion of one of these thumbnail images being selected, it takes the user to their instagram page. This is where the user can get lost and move on. So much for the prospective diner booking a reservation they are now at Burgatory’s site buying a gift card. The only redeeming quality of this site to over come this is that fact that has a search bar. The “all mighty” search bar is a key element which allows the user the power to take the site where they want to go with out any noise.

After reading the assigned section, I can see how both sites unitize the fundamentals of successful navigation. I personally feel that Burgatory executed their layout in a much more efficient manor with a lot more information.

Review #2

The single page website I chose to do a review for is the Look Book, for Melinda F. This web site utilizes design elements such a color and geometric shapes to create and identify multiply pages on a single page site. Although most design elements on this page work a few were a bit distracting, over all I found this web site to be very functional and easy to navigate.

As you enter the site, you are welcomed with a large header that is emphasized with a large rectangular, cool blue/aqua gradient with large crisp black font to display the title. The viewer instantly knows where they are; this is a “Look Book” and the month and year so you know it is current. Located underneath what the page is you are now informed for who is page is made. As your eyes fall under the title you see the logo and then the company name. This site can be easily recognized what it is and who is for. The cool colors used in the gradient are set on top of a white background with small thin geometric shape out lines. These shapes are colored with the same saturation as the gradient, the use of the same saturation helps unify the patterned background with the large solid geometric shapes on top. The shapes in the background pattern are small enough is size as to not battle with the fore ground allowing this combination to function together.

After taking in where you are and who the company is, you have now checked out the clean layout and want to continue on. With out a thought you know to scroll. Right under the company logo and name in small italic text, are the words scroll with a thin horizontal line leading you down the page. The combination of the text and the horizontal line effortlessly help you navigate through the page. You are directed to the next section of the layout with out any noise in between.

As you scroll, the company name disappears but to logo remains; this helps work as an identifier to let you know you are on the same page. The patterned background, color scheme and font hierarchy also remain the same to help add to the unity of the page. You are now looking at the products featured in this months look book. The title of the item is in large colorful text and then small sans serif font, in an unsaturated grey color for the description. This combination of a warm and cool color helps the eye to differentiate between the two elements, where as two warm colors may cause the eye to struggle to figure out what to look at first. After the gray text for the description there is navigation button that is out line in another geometric shape to distinguish the link from the other text that will take you to the full site in order to purchase this item, you know this because it is label “shop”. The use of repetition of the same layout makes this page easy to read. As you scroll down the page the placement of the text and images remain consistent allowing the eye to do less work.

After viewing all the products there is now a new section on the layout, this si labeled Deign, using the same font color and font family as the header. The design section future descripts the products as a whole; the main elements are in a large front size and also displayed in color. Even if the viewer is scrolling quickly down the page they still will catch the main words of description and will perhaps stop to read more. If not, the main descriptive words are large enough that it takes a second to read and you scroll through.

Now the viewer has reached the footer of the page, we know this because it is a flipped design of the top header. Same cool blue/aqua gradient and same crisp black text, only now the text reads, Shop. Incase you missed the smaller link button to take you to the full site after each product description; here is the viewers second chance to be navigated to the full site. The use of repetition ensures easy navigation to the full site, and hopefully entices the consumer to shop there.

Lauren Byrnes: Review #1

As one use to frequent the salon or local drugstore once a month I frequently shop for make up conveniently online, well to be completely honest if you can buy it online I am most likely shopping online for it. Consistently each month I order the same beauty products as they run out, through my preferred choice cosmetic supplier, Ulta Beauty. With five easy steps I have what I need in my cart. Upon check out, after I log in and confirm my saved shipping address and select my saved method of payment, weather it be my credit card or my debt card that month, both are there at my convince. Just a few more clicks and I have my items on their way to my front door.

For someone who is not as familiar with the web site, or with beauty products in general, the website follows all the rules in order to prevent the user from exhausting any unnecessary brain function. The website starts to guide the user with first glance, you see a navigation menu on the left side of the homepage and to the upper right there is a search bar. If using the search bar, the site will compose a list possible search options in order to help guide you faster. Like many search sites this is not an unfamiliar feature but nonetheless it makes the site think for us, providing the guidance and convinced we are looking for. If one not sure of the exact product, the menu has categories that begin rather vague but become more specific as they lead you to the item you may be looking for. After choosing “make up”, then “foundation”, you may already have found the products you are looking for if not, there are more filtering options to narrow down the product search. This offers such categories as type of foundation, price range, brand, or even as specific as the amount of coverage you would like. The user doesn’t even have to know what exact product you are looking for but he web site will provide the user with enough direction to send them right to where they need to be. And just a few more steps and they are set up for a first time user check our or able to login and have the web site enter the requited stored information for them.

Either a website works or it doesn’t, there is no in-between. In order for a site to function the information the site provides needs to be clearly displayed, and even more importantly, clearly labeled. Categories and sub categories are what provide the user with direction, with miss leading titles one can get lost and then choose a different site to search. In order to keep the users attention you want to fundamentally make the choices for them. Put the answer right in their face. We as humans want everything as convenient as it can be, tell me what I’m looking for and show me where it is. We expect this not only from customer service at a department store with human interaction with one of their employees, now we expect the same if not more convenience and direction from the websites for those same services, minus the tedious trip to the store.

Ultas’ web site uses a gird base layout and minimal use of color. It’s very easy on the eye and neatly done as far as an aesthetic point of view. The website provides organization of categories and subcategories as well as clear labeling. Someone who knows nothing about makeup or beauty products can find something as simple as what shampoo they want or even make an appointment for the salon with no disruption, the site illustrations what rout that you need to take to get you to the service or produce you need with no noise in-between.