Posts

Posted on

Review 1

New Egg

Lately I’ve been looking to buy a second 23inch Asus monitor for my laptop so I decided to review newegg.com. Although I was able to find the exact monitor I was looking for, I think the website could be more visually appealing. While first arriving on newegg I noticed the calm color scheme and easy to navigate search options. However when I scrolled down the interesting color scheme completely vanished and I was left looking at the best selling items surrounded by a clutter of ads. Although the blandness of the web page and the ads littered throughout don’t make newegg that visually appealing it more than makes up for it with its indepth search options. First I started my search by using the navigation bar conveniently placed at the top of the webpage. While I knew exactly the requirements I wanted, I started by searching 23inch monitors. This brought me to a page filled with various 23inch monitors, but what was impressive was the amount of specifying search options the left side of the page had to offer. Some of the helpful search options were the manufacturer, condition, price, seller, customer rating and many more. Overall I was able to find exactly what I was looking for due to newegg’s advanced and various search options. However, because of the mass amounts of ads and interactive items on newegg, the webpage could use improvements directing the users focus on where it needs to be.

Posted on

Review 1 MusiciansFriend.com

Jordan Thompson

Review 1

 

The site that I will be reviewing is Musiciansfriend.com. Musicians friend is a website for online shopping for musical instruments such as guitars, drums, keyboards, amps and many more versatile musical instruments and accessories. When I initially went on to this site, I found that it seemed very clustered to me. It was a lot to take in and try to skim through, but there was a “shop by category” in the top left side that caught my eye. When I came to navigating my way through the site, it became very easy for me. I play guitar, and have done so for the past five years, so I figured I would pretend to buy a new guitar. Navigating my way, and searching and finding the guitar of my choosing was something that I found to be fairly easy. This site is actually a very easy one to navigate around in, and I would definitely recommend it to a friend. My only fault that I see is that when I first went on to the site, it was a lot for me to take in. I don’t know if it was because of the font style, the amount that was on the front page, or even the color scheme, but my only wish is that the home page was more inviting and easy to look at. Overall, I found this to be a great website, and I would definitely use it again and recommend it to friends and family.

 

www.musiciansfriend.com

Posted on

1st questions HTML

The w3c standards help designers and developers make there sites as viewed and functional as possible. They provide knowledge for web design, web devices, architecture, tools and much more.

Markup is how the content of the page is described. They can be standard generalized markup language, SGML or extensible markup language, XML. These are how the document is marked up. They are both very similar, however XML is slightly more precise than the other.

Using the standards will make smaller file sizes, increase portability, better accessibility and precise control. having smaller file sizes will increase download time and you can reach people quicker. With an increased portability one can easily scale from a large monitor to a small phone screen. giving you more control allows for you to change things such as line-height or padding properties that can be very helpful.

Posted on

Week 1 Reading Questions

The standards of the W3C are not really standards, but merely recommendations that have become widely accepted as standards. It brings standards with it that will allow your website to be structured and read on most any browser safely and give you some direction for design.

Guidelines for a great markup include DOCTYPE, headers, titles, specifying the language that you will use to run your website, as well as some other features of the webpage. Generally, it is good to have less in your markups and keep it simple.

The benefits of standards are that as a designer we have something to go off of. We aren’t just fed a project and then let out in the wild to fend for ourselves. It gives us a starting point that we can grasp onto for the beginning of our work and then it allows us to mold the standards to our liking as we see fit. W3C’s standards are just good guidelines so we have some direction of how to begin at the start of our work.

Posted on

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.
Posted on

Chapter 1 Questions

The standards of the W3C provided clear guidelines for designers and coders to follow to make sure their sites are widely viewed and assessable from many platforms and also allowing precise visual control.

General Guidelines for great markup include using a DOCTYPE, specifying a language/character set, titling it, using proper elements, avoiding div-itis, minimizing markup, and using class and id appropriately. Using a DOCTYPE helps browsers identify the markup language used for the site. Specifying a language /character set tags your document with a human language which browsers will use to filter through results based on the language used. Titling the document is saved as the link description and is showed in the users browser window and bookmarks. Search engines also use titles as main keywords when generating site traffic. Using proper elements means to markup the document using HTML elements according to the structure of the page content. Avoiding the overuse and misuse of div tags is to not replace more appropriate HTML tags. If a heading tag fits best and describes the content then one should use that instead of a div tag. A div tag should be used more as a reusable, styled container in order to separate sections in a page. Minimizing markup means to only have the necessary tags and elements that make up your page and to trim unneeded markup. This will create a smaller file size and allow it to get onscreen faster. Using class and id properly helps CSS and JavaScript attach correctly to HTML elements. An id can only be used once per page as apposed to a class, which can be reused.

Some benefits of web standards include smaller file sizes and quicker downloads, increased portability, better page accessibility, and having precise control. Having smaller file sizes can happen when you move your markup into CSS. This enables browsers to cache the CSS styles so the page loads quicker. Increased portability happens in the way you format your CSS styles. Without CSS, the basic elements are properly formatted for a mobile version of your site. With CSS, you can format it for many different screen sizes and present it differently according to the sizes. This gives you a bigger window of opportunity to design it according to your target audience. When proper HTML elements are used, the markup is accessible and it will follow 90% of the World Wide Web Consortium content guidelines and be available to a wide audience. CSS allows designers to have precise control on the look and movement of the site.

Posted on

HTML Reading Response

What did the standards of the w3c provide?

The standards of the World Wide Web Consortium provided a sense of consistency in the process of designing websites.  This made it easier for web designers to make a complex page and feel reassured that it would work properly on different browsers and operating systems.

What are some general guidelines for great markup?

There are seven main guidelines for a great markup.  The first is to use a DOCTYPE.  This identifies what markup language you are using to your browsers and the users.  The second is to specify a language/character set.  This marks your page with a particular language so that it doesn’t get translated a bunch of nonsense.  The third is to title your page.  This makes sure that your page will be titled in a browser or in a bookmark so that it isn’t just another generic page.  Fourth, users must use the proper elements.  This means that you use the right HTML for the right part of your page.  For example, you do not want your header to actually have your footer in it because it can easily cause confusion when trying to fix or change something in the long run.  The fifth thing is to avoid div-itis.  This means do not overuse the div or span tags when there is something more proper to use in its place.  This jumps back to using the proper elements as well.  The sixth thing is to minimize markups.  This relates to the last two guidelines in saying use only what you need and minimize the extra fluff that could cause slow downloads and huge files.  The last guideline is  to use class and id appropriately.  If you use an id on something that will be used over and over again, you are going to have to make more and more ids and adding unnecessary fluff to your page.  Instead you use a class and you only need one to do the exact same thing.

What are the benefits of standards?

Standards have many benefits.  One benefit is that standards help to make smaller files and therefore quicker downloads.  Another benefit of standards is that it increases portability. Css standards have specifications for different media types such as phones or computers.  This changes the look of the page based on the media type and makes it work more efficiently for that specific media.  A third benefit to standards is better accessibility.  With so many new browsers popping up its difficult to stay current, but with standards its like a “one-size-fits-all” kinda thing where your page will work on almost any of the new browsers available just because of the standards.  Lastly, standards lead to precise control.   With the Css standards, you can position things anywhere you want and make them look just the way you want with precise control over your page.

Posted on

Review #3

The two sites I chose to explore and compare were peterallens.com and burgatorybar.com. Both sites have very different layouts that pertain to their target audiences’, and create the atmosphere of their restaurants. Peter Allen’s is a high-class authentic Italian restaurant, while Burgatory  is a sleek and comfortable gourmet burger joint. The layout of their websites express the feeling each is trying convey.

Both sites open up to a homepage with a slideshow in the center, and a navigation bar either across the top or along the right side. The nav bars allow the user to hover over different tabs that open up to lists of available pages in order to access more information. They both possess balance throughout the site, functioning with ease. Each has a number of pictures followed by descriptions and information. Unity is found in Peter Allen’s by using an italian inspired color scheme of reds whites and greens. Burgatory uses a color scheme of browns and reds that pair extremely nicely. The use of a distressed background gives the site a rustic feel that matches their restaurant very well. Together these two sites have very different layouts, but each works in its own way. Peter Allen’s has an extended drop down menu that requires you to scroll the full length of the page.  Burgatory has a very condensed site that requires minimal scrolling. Everything there is at your fingertips, making it simple to maneuver.  Following Krug’s 5 important things Burgatory thrives by making everything visually clear, organzing the main areas and tabs, and making the clickable areas very obvious. Peter Allen’s on the other hand is a job to navigate, scrolling to the bottom of the page and back up over and over again, and not knowing what to click and what not to click.

In my personal opinion Burgatory is a more effective website. The format of the site is so simplified that anyone can use it, it instructs you were you can find everything without confusion, and it holds your attention with witty remarks and punny jokes which I thoroughly enjoy. Its decompressed nav bar makes navigating the site very easy. The way the site is set up shows the actual vibe of the restaurant itself and gives you a taste of what you can expect your experience there to be like.

 

 

Posted on

Review #3

The two restaurant sites I selected to review are Six Penn Kitchen and Burgatory. My first impression overall is that both offer useful links to navigate and find the information a visitor would be looking for but neither have a search bar for quick navigation. Though this could be a problem, I was able to easily find important information like menu, location, and hours. Six Penn’s layout is clean and very easily read, also it provides links on the homepage that one would need to find all information about the restaurant. Throughout the Six Penn website, there is a cohesive design and color scheme, with emphasis on the navigation bar that is located on the top of every page. Burgatory’s site also has a lot of the same good qualities as Six Penn. The two restaurants have different atmospheres, Burgatory is more laid back and so is their website. It feels a little more inviting but still offers all the necessary information needed. Burgatory’s site has all of their locations at the bottom of every page as well as hours, but the hours could be more prominently displayed. Overall, both website are easily navigated and have an appealing layout and design. The Six Penn website is simple and easy on the eyes while Burgatory’s site has a little more flair. I do not think one is better than the other, but Burgatory’s site draws my attention more because they have a gigantic milkshake or burger in the center of their site.

Posted on

Review #4

Danielle Bobish

Web Design

Prof. Ames

Review#4

 

The competition of our restaurant in terms of content and menu is Ihop. Ihop is known for selling a variety of breakfast delights that caters to all hours of the night and day. The layout of Ihop separated into 9 horizontal rows, 7 if you don’t include the navigation bar/header and media bar/footer. Each row is categorized by a topic that is mostly illustrated by pictures. The main source of unity is color from the pineapples, lemon and tea drink in the top photo, to the sunshine gradient in the next row, then to the slight differentiation of the cheese and fries, to the lights in the restaurant, and then to the eggs and snap chat symbol. The color yellow is said to be a happy color and bring joy to people, but it is also eye catching and allows people to navigate from one section to the next. Blue is also used in a creative way, in the background up top, to the buttons and then to the countdown symbol. Even though there are a variety of textures in this web page, it is unified by color and it works. The texture is not always something to be identified by an object though, the text gives off a fun character that helps with the texture. Paradise is spectacled, but it doesn’t detract the user from navigating the page. Besides the navigation bar at the very top, the page is a single scroll downward. Your eyes are drawn to the center of the page and from there you are met with a variety of advertisements and clickable options.

In conclusion to Ihop as a working website, I believe it is successful at guiding the user through the web pages and giving the user just enough control to feel in control. Colors are used to help give our eyes relief and trail to follow as we scroll. This site is very fun and definitely reflects the character of the actual atmosphere of the location (robsinson). My website caters to the same crowd of late night bites but adds a twist to the idea. Our company is called Whiskey Waffles. We are a late night crowd appealing food craze that caters to the 21& up crowd. Because we are located on the south side and have a lot of night life traffic, our website is to reflect the atmosphere of our joint. We used dark colors to give the effect of little lighting and grey wood is to implement a rustic feel. Our color palate is very neutral containing a lot of greys, blacks and whites. We want minimal lighting in the restaurant and to overall be a fun time and place to be to get your munchies on. My website will also stand out with a creative layout that is more modern. Like most websites, images are a main feature that helps cater the user through our site. Images help create satisfaction and weather or not a user decides to visit us in person is how they determine this.

 

http://www.ihop.com/

Posted on

Review #3

Danielle Bobish
Web Design
Prof. Ames

Review #3

The 2 websites I chose to review are Applebee’s and Texas Roadhouse. I chose these 2 because I don’t necessarily live in Pittsburgh, so I am familiar with these local restaurants through the means of their services and brand personality.
I find that both of their sites look balanced, even though they are focused on the middle of the page. The aspects that make these pages unified are their use of color, and layout. In the Applebee’s layout, they are very structured and require minimal clicking to navigate the page. Their use of color also helps create a more distinguished and unified look. The Texas roadhouse layout is similar to Applebee’s, however they have a zoom effect on images that help identify clickable links on their page. Emphasis is put on images primarily based on a scrolling gallery to give you an idea of the menu, as well as the hierarchical navigation. The layout in general of Applebee’s consists of a lot of square and rectangular shapes in nature and consists of a neutral color palette. The layout of Texas roadhouse uses an out of focus background image and then uses a lot of images as links to navigate through their page. The five important things Krug states in his chapter are clear visual hierarchy on every page, naming and graphic conventions, breaking pages into clearly defined areas, obvious clickable links and minimal noise. In these terms, I believe that Applebee’s was more successful in following a correct guideline. Applebee’s uses hierarchy navigation through its tabbed and rollover scrolls. Everything is named accordingly and has a place that fits. Unlike Texas roadhouse however, where rollover clickable images are more emphasized, Applebee’s lacks noticeable click action. Also in terms of noise, Applebee’s is more calm in a sense that it isn’t busy. Your eyes can flow across the page at a good pace without getting distracted.
In conclusion, Applebee’s is a more effective website. Good color palette, strong sense of unity, little noise, all links lead to a reasonable page. There are also a lot of extra features that help the user navigate better like a search bar, an order now roll over tab, and prices on the main page. Overall it is very inviting and fun which helps promote the atmosphere of the actual restaurant.

https://www.texasroadhouse.com/

http://www.applebees.com/?

Posted on

Review #2

The single page website that I choose  from http://onepagelove.com/ to explore was “The Secrets of Magic: Revealed.” This site focuses on several very popular illusions throughout the history of magic and exposes exactly how the performers deceive our eyes. I actually found the topic very interesting, the website hooked me and I learned all the magic secrets they had to offer.

The site has a great color scheme that encompasses the theme of the site well. Its use of dark backgrounds and bright titles gives an almost mysterious vibe. The use of a purple grid over top of short magician clips gives the site its texture and depth. As you scroll between the 6 Magician secret options the clip in the background changes to give a preview of the selected act. When one of the 6 options is selected the user is instructed to reveal the magic, opening up to a full video clip of the specific Magicians act and a synopsis of how the illusion is accomplished. The site also provides a brief biography of the Magicians that perform each act. There is not very much interaction necessary other then a few clicks between illusions and top to bottom scrolling, so the site is very easy to navigate.

The sites large fonts and easy to follow navigational instructions make for a very user friendly experience. Further, its use of video clips to show the trick to the viewer make the experience enjoyable as you are able to watch the clip then read how they accomplished it. The user is then tempted to rewatch the clip and try to catch where the magician creates the illusion. This site is very well designed in my opinion, because it grasps the user’s attention with its intriguing layout and then holds the user’s interest with  interesting subject matter.

https://www.foxycasino.com/featured/the-secrets-of-magic.html