Category: ARTM2210 Intro to Web

For my two sites to compare I chose Burgatory and Smokey Bones, both of which are restaurants in the Pittsburgh area. Surprisingly enough to me, these two sites are very different from each other in the way that they are setup. Both of them have rotating images as soon as you get to the page but after that the Burgatory site is much different from Smokey Bones. Burgatory has a top, centered navigation bar at the top then as you scroll more information appears. Where as Smokey Bones site is just that initial page with rotating images and the navigation bar is on the left side going down. Both of these sites are strong in the sense of Unity in the fact that you take in the website as a whole at first then you start to take in the minor details of the website. In my opinion both of these sites also have a strong use of Emphasis. Both have a large gallery with rotating images as soon as you get to the site, this emphasizes the fact that you are on a restaurant website and what you are looking at is food. As far as Balance goes I think Burgatory’s site is done a little bit better just because of the fact that there is more information after the images at the top, the website is not just taken over with images like the Smokey Bones website is. Then looking at Layout, I also feel like Burgatory does a better job of executing its website. Everything just seems to flow a little bit better and the site just feels like it does when you are in the restaurant itself which is an interesting thing. The overall setup with the gallery at the top and the rest of the information once you scroll makes it not so overwhelming when you are trying to navigate the site. All in all; looking at both sites; I would give the win to Burgatory for a better overall site.

Websites:

http://www.burgatorybar.com/     http://smokeybones.com/

I focused on two local restaurants, Six Penn Kitchen and BJ’s Restaurant and Brewhouse. At first glance, both websites seem fairly similar in terms of the type of content that they provide: menus, location, about page, and some links unique to their establishment. In regards to balance, Six Penn Kitchen seems to appear more balanced in terms of layout on the homepage. The logo is in the middle with three links on either side. On BJ’s website, it isn’t as aesthetically pleasing because of the imbalance on the navigation bar. There is a location/shopping cart in red at the top right corner that throws off the look, at least for me. Looking at the unifying qualities of both websites is interesting, because of the overall quality it speaks to the user. Six Penn Kitchen does a much better job keeping in theme on every single page of their website. The color scheme is consistent throughout with the black, grey, white, and green. BJ’s is consistent for a few pages by keeping the same background and basic layout, however, when you move to the “Our Craft”, “Our Beers”, and “My Rewards” sections, they change theme and it kind of throws everything off as a user. A far as emphasis is concerned, the sites are very similar. Both sites put the most emphasis/attention on their logos by making them the largest thing with the most color at the tops of their pages. For layout, Six Penn Kitchen’s menu reads like a typical menu you would see in a restaurant. BJ’s is more of a boxy/square layout that shows the categories of food that they offer that you have to click on to see the dishes. Six Penn has a more straightforward layout that is much easier to find exactly what you’re looking for with the least amount of clicks; BJ’s is the exact opposite.

Let’s look, now, at both sites in regards to Krug’s 5 “things”:

1. Both sites create a clear visual hierarchy in the way that it is clear that all tabs are at the very top of every page in the navigation bar. Each section from the navigation bar then has a certain amount of pages under that category.
2. BJ’s uses more photos on their menus-almost only pictures, which is overwhelming. Six Penn Kitchen has some pictures on their homepage but there aren’t any pictures on their menus, which makes it more clear but a little boring.
3. Both sites do a great job at breaking pages into clearly defined areas that makes it easy for the user to find what they are looking for. However, I think that Six Penn Kitchen does a slightly better job than this, because BJ’s has too many things that need to be clicked to get your wanted end result.
4. Both sites make it very obvious what constitutes a clickable link by either highlighting specific links or making it known that its clickable when you move your mouse over the graphic (like their logos to go back to the home page).
5. Six Penn Kitchen does a better job at minimizing noise by having a small amount of clicks to get to the wanted end result (typically the menu). As stated before, BJ’s has a lot of unwanted noise by creating so many subcategories within their menus.

All in all, Six Penn Kitchen did a better job than BJ’s Restaurant and Brewhouse at drawing in my attention. This is because of their sleek layout, minimal noise, and clear and consistent layout.

For this assignment, I looked at the websites for Il Pizzaiolo (http://pizzaioloprimo.com/) and Six Penn Kitchen (http://sixpennkitchen.com/news-from-the-corner.aspx). Both restaurants that were chosen are found in the city of Pittsburgh.

Six Penn Kitchen, at the time of this review, had some photos on their homepage that were aligned to the left side of the page with huge amounts of blank space to the right. The balance of the website is odd on other pages just by them all be center-aligned or left-aligned with way too much blank space. Il Pizzaiolo, however, had photos accompanying their text on almost every page.

 

As far as unity was concerned, everything seemed to belong on the website for Il Pizzaiolo. The text of the headers accompanied the paragraph text, the photos fit and weren’t awkward at all, and the color scheme just worked. The website for Six Penn Kitchen really dropped the ball on this one. The simple coding and the lack of effort left a lot to be desired when it came to unity in their department. The photos are awkwardly placed, the text is hard to read, and when the website is in its smallest/simplest form, it just doesn’t work.

 

The emphasis on most pages for Six Penn Kitchen are often lost with the giant logo in the middle of the screen. The colors of the text draw your eye, but make it hard to stay anywhere. As you navigate and scroll through the Il Pizzaiolo website, things subtly shift and change. These changes make the emphasis adapt to where you are on each page and where you should look.

 

The layout of these websites are quite similar, however, there is one major difference. Both of these websites use a top bar and use it to navigate throughout the websites. Il Pizzaiolo makes the bar scroll with you and has an additional side-scrolling bar for each element on each page. Six Penn kitchen highlights the page you are on and leaves you there, if you scroll down you have to go back to the top to use the bar again.

 

The main principles of Steve Krug’s book seem to be relevant in both, but dominant in Il Pizzaiolo.  The websites rarely make me think, but I am less satisfied with Six Penn Kitchen’s design and layout. The wording is a lot more condensed and easy to scan on Il Pizzaiolo’s website, and no matter where I go I can get back or go forward with ease. Six Penn Kitchen loses in all aspects in this fight and should consider renovation.

I chose to review the websites for MadMex and Six Penn Kitchen. When first reviewing the sites I analyzed and compared the aesthetics of the sites. In my opinion, I favor the overall look of Six Penn’s website. In terms of balance and unity the site does a great job, for instance you can view all of the important information without even scrolling. MadMex’s website lacks unity and balance because of the negative space in its homepage. The introduction on the first page exceeds in length the size of the image to to the right, and throws of the unity and balance of the page. Six Penn’s website has a much more balanced and cleaner layout than MadMex. The images on Six Penn’s site stand out more because of the simplicity of their layout and the background color choice. MadMex uses a multiple earth toned colors that make the site more chaotic. Six Penn’s color choices most definitely help to emphasize the images and information on their site.

Krug has five important “things” to make users see and understand a website. The first thing is to create a clear and visual hierarchy on each page. Without a doubt, Six Penn Kitchen does a phenomenal job at creating a simple layout that highlights the important information while making it obvious what is clickable. Six Penn Kitchen’s website is made very easy to navigate for users. MadMex is fairly easy to navigate, but in comparison to Six Penn’s site there is definitely room for immprovement. MadMex could benefit from emphasizing key information with a more simplistic layout. The next thing Krug lists is to take advantage of conventions when creating a website. MadMex does not take advantage of conventions; I feel that they could have used better styling to make links and things that are clickable stand out more. Six Penn does a great job with the convetnions of their website. The colors and styles used, especially the navigation bar at the top are the first thing the eye is drawn to. The next important thing is that pages are broken up into clearly defined areas. Six Penn does an excellent job at this because each page is clearly defined. Not only is the site well organized to begin with, but it also uses stylistic techniques to section of information, like dotted and solid lines. This consistently keeps the whole site well organized and clean. MadMex on the other hand could do better with its organization, and needs help in styling to keep the sight organized. Important information does not fit all on one page, and the site has a lot of pop ups which adds to the chaos. The fourth thing that is important is to make it obvious what is clickable. I think that both sites do a good job at this. However, Six Penn takes the lead once again just because the stylistic quality is better. One thing I do not like about MadMex is that the text in the navigation bar is the same color as the site’s background making this information fade into the background. Lastly, the fifth important thing is to minimize noise. My feelings on which site did this better should be clear at this point. However, just to clarify Six Penn did a much better job at minimizing noise by keeping a well organized, consistent style pattern, and well sectioned site. MadMex uses too many colors and the content does not fit the page well.

I find that Six Penn Kitchen catches my attention more than MadMex. To summarize, the main reasons is that Six Penn uses a more appealing color scheme and styling, is more organized, and did a much better job making the site simple to navigate. Also, I personally feel that Six Penn Kitchen’s website has a much more professional look. I think MadMex should consider improving the style and organization of their site in order to more effectively draw customers’ attention.

For my second review, I chose NeoBred, a single page website. The site’s use of color is really good. It uses the black as the background color and white as the text color. The color of text on black background reflects the text really good. Black and white is a great combination to be used together. Use of black text on white background is very normal but using background as black and text as white is not seen everywhere and it feels different from usual and reflects the tone of the both colors. Other colors used in the website are yellow, pink, cyan and soft pink. The shades chose of these color are light and works really good with the black background. Soft pink color is used for BRED in the logo of the website, some text in section 1, and also for a small circle in sections 1, 2, 3, and 5. Yellow color is used in section 2 for heading ABOUT, a couple text lines and periods. Pink color is used in section 3 for a word of the heading, a line on the page and some periods. Cyan color is used in section 5 for one word of the heading again and just a couple words in the text. Cyan color also pops up in section 5 when you try to fill up your information in the space provided. All the colors used on the black background pop really well that gives the builder to achieve emphasis in his website. The text used is very neat and explicit font which gives a really good texture feeling.

In this single page website, user has to scroll up and down to explore the content of the website. There are five sections in the website, assigned accordingly to a specific section. A user can click on the section number linked on the bottom left corner of the webpage, and it will take the user on that section. Also you can scroll it up or down with your mouse to switch the section and there is a small mouse icon on the bottom right corner of the website that takes the user to the next section when he clicks on it. I really liked this mouse icon as it keeps bouncing and it is something new and unique that I found on this website. In the middle right of the webpage there is a menu section which is another option to navigate to all the sections except the home page. On the bottom left of the webpage there is a count that tells you which section you are on.

I think the colors used in the website make it easy to scan and read. Colors like white, yellow, pink, cyan, and soft pink works and reflects the text really good, and make the text easy to understand. Repetition also comes into the play since white text has been used on every page of the website to make the text easy to scan when it pops up on the black background.

I believe that the site is designed well. While I was looking over onepagelove.com to pick a website, this was the first website I found that is designed well out of first 20 I saw. NeoBred uses really good color combination which pops up the text and make the website easy to scan and read as well. It also has different ways to navigate the website and the user can pick whichever he likes the best. The best navigation way/controller I like in this website is the little mouse navigator on the bottom right of the website. Other thing I liked in the website is that the user has to scroll up and down rather than left to right. I personally prefer to have up and down scrolling since it can be down by using the scroll button on the mouse which is quite easier and quick rather than clicking on the left/right side of the webpage again and again. Overall, this single page is designed pretty good.

Upon scrolling through OnePageLove.com, I was fascinated by the site resn.co.uk because of its design and concept. This site has a very sleek concept combining 2-D and 3-D elements and using two different color schemes. The main thing that I like from this site is that it does not require any scrolling. Everything that you need to see is right before your eyes.

The design concept itself it quite interesting. You mainly navigate the site through clicking and holding onto this 3-D drop that moves like it is looking at your cursor. Each time you hold onto the drop it displays one of six different designs to play around with. Each of these designs bring forth something different. The first one is in full black and white and is of apples and moons floating around in circles and they get bigger and smaller as you move the cursor. The second one is of a vibrantly colored 3-D cylinder and ball. The ball is controlled by your cursor and when you hit the cylinder with the ball it swings around in place, making different sounds depending on where it is hit. The third is of a bat that shoots out lasers from an ouija board that reveals a few different photos. The fourth one is a tunnel that switches from a black and white tone and a colored tone while also changing shapes between a circle, square, and heart. The fifth is a neon blinking bottle controlled by the cursor and when it is moved it releases various blinking, neon pictures. The sixth and final design is of shapes flying in a black background and bounce out of the way when impacting into the cursor. After a certain amount of shapes are hit it will switch to a white background with black shapes.

On the main page in each corner, there is a specific button. The drop-shaped button in the top left corner works the drop is you don’t want to click on it. In the bottom left corner, is a play button to reveal their showreel to watch. In the top right corner, there is a circle button to reveal what they do, some of their work, and their contact information. Lastly, since everything on the site has sound, on the bottom right corner, there is a bottom to turn the audio on and off.

I really love the design and layout of this site. The color scheme is a bit confusing to me, but I think it works very well together with the mix of black and white and neon, vibrant colors. Navigation on this site is also very easy for the simple user because everything is already there in front of you without have to do any scrolling. Another thing to make it easy to navigate is that everything is explained on what each button does. Overall it is a great site to have some fun on.

 

Browsing through these single page websites Denis Smirnov’s was the one that caught my eye. The geometric design of simple architecture that gave the page depth drew me in. Then once I got to the actual website I realized that the architecture built itself as the page scrolled with it which has kept me interested for countless loops.
The page itself gives off an inside a computer vibe. It does this because it uses four basic colors red, blue, black and white. The black give a background that allows the red and blue building of architecture pop and give depth. There are also times when the color gets filled in and there are sheets of pure blue or red which catches the eye. The white is then used for the information he provided.
The information is all presented in the middle of the page left aligned and we aren’t able to scroll. The background does that for us or at least gives that illusion. The text itself is simple his name is the largest and then it gives three professional credentials in an ordered list. Below that he has icons that lead to his other pages such as Facebook, Twitter, Email and bittalk forum. When these icons are hovered over they light up as well.
In my opinion this site is well constructed because of the simplicity of use. The user does not have to do anything but read what is presented, which is enough to judge if one is interested or not, and follow the links which open in new tabs. The background is also simple but intriguing to watch as it grows and takes one on a short journey.

Charles Stockhausen

For the one page website review I chose www.jordancole.com which was on www.onepagelove.com.  This was a portfolio created by freelance artist Jordan Cole.  Upon entering the site, you simply see an image of a magazine page flipping.  It is assumed that this is some of his work.  Right at the first page there is the main image, a drop down menu on the side, arrows pointing in all four directions of the screen, and Jordan Cole’s name on the top and bottom of the screen.  You can only physically scroll up and down even though there are arrows pointing in all four directions.  You can’t scroll right to left.  You must click on the arrows with your mouse to move the screen horizontally.  By moving the screen, it moves to more of his work that has been shown in magazines.  As you move down the website it breaks into a different color with a different main image.  I am assuming that it is organized by each different project he created.  So when you scroll to a new ‘page’ it is a different project that he created.  If there are arrows pointing to the left and right, then there are more images of the project either on a different media device or different point of view.  Throughout the website his name is placed at the top and bottom of each page continuously reminding you who created the work while being a page break as the colors change between pages.

Overall the design of the website is minimal.  There is simply a colored background with the image of the project in front of it.  Everything has a clean and simple look because his designs themselves often have the texture in them.  Most of his designs tie in nature in some manner giving them texture.  This texture contrasts with the clean technology and colored backgrounds.  The only details other than the images themselves are the occasional use of shadows with the images.  As explained in The Principles of Beautiful Web Design, “Light and shadow establish visual contrast, and help to create the illusion of three-dimensional depth with two-dimensional media, such as pencil on paper or pixels on your computer screen.”  For example, he uses shadows to create the idea that these mediums in which his projects are on are sitting on a table or are located in front of a background.  Allowing these subtle shadows into his images makes them more realistic to the viewer.  He’s used it to show the width of magazine as well as the size of a computer against a table.  Using these shadows also helps show the different sizes he designs for specifically in media.  Showing the different forms of technology that art can be displayed on (phones, laptops, tablets, desktops) the shadows help create a more realistic and visual size difference.

The colors that Jordan Cole used within his website were a mix of warm and cool colors.  He used colors to spark creativity and action which follow with his constant outdoors theme.  He took into account the colors within his designs and the color he chose for the background.  For example, If the image of his work had primarily cool colors within it, he would use a warm colored background to create contrast.  The different colors helped to break up the webpage into smaller pages to represent the idea of looking at a new project.  Also, the colors had a very similar tone allowing the transition between them easy for the eye.

Overall the site is well made.  The navigation might take a second to think about it but after the user realizes they have to click on the arrows to move screens it is extremely easy to use.  The different forms of navigation located on the webpage are very large making them easy to find.  The organization can be a little confusing because I feel the user would someone question why Jordan Cole laid out the webpage the way he did.  I still am not entirely sure if each individual panel is a new project or if they connect in some manner.  So that could be more clear so the user understands what was a complete project.  I believe that using his name as a page break was very smart as it continues to remind the user of the artist while easily covering the transition from one block color to another.  He uses contrast intelligently throughout the webpage, especially on the about me and contact pages because he loses all color except his personal photo and everything is black and white.  Contrast is definitely the element he relied on heavily for his entire webpage and I think it was used well.  Overall the website is eye-catching and easy to follow along.

 

For my second website review we had to chose a one page site so I chose the portfolio website of Visual and Web Designer; Federico Guzzardi (http://www.federicoguzzardi.com/). I am a very big fan of the way that this site looks especially because of how minimalistic yet modern the site is. The main colors that he uses for his website are white and a darker greenish/blue for the color correction that he has applied to the images on his site. I am a fan of this because it keeps it simple and clean and doesn’t cause your eyes to go absolutely crazy when you are looking at this website. The navigation for this site is just a simple parallax scrolling site but the transition from one section to the other is very clean and nice looking in my opinion. Each header for each section sort of appears with an animation as you scroll which makes the experience a lot more interesting and entertaining rather than all of the information just being there.

Another thing that I really like about the site is the fact that once you get to his work it is all very clean and organized. Everything is spaced nicely and if you hover over the project you get a title and description of the type of project which I think is nice. It allows you to get an idea of what the project is but if you want to see more you have to click on the project to see the full thing. Overall I think the design of Federico’s site is done very well and is presented in a way that is minimalistic and organized and is very easy on the eye and allows you to really enjoy not only his work but also the site itself which is really nice.

Review 2

Morgan Torchia

The website I chose to review was “The Wedding of Ashley and Jeff.” The overall design of the website really accentuates the theme of love and marriage throughout the entire single page site. The layout consists of of two short bios about each person, and as you scroll down you gather all the wedding details.

I enjoyed the use of color in this website. It was very light and clean with nothing standing out too much, taking away from the content. I would’ve liked to see a few more pops of color, just for some added flare, but overall it worked well. The layout and overall organization worked well. The pictures served as a nice break between content, and all of it was organized thoroughly.

The website starts off with a nice big picture of the couple and the wedding date, immediately establishing who the website is about. Next you scroll down and learn a little about each one of them. To break up the content, there’s a quote off to the side and a few pictures as you continue down. It ends with wedding details, the schedule, and the couple’s registry. It is organized very well so nobody can get confused about the information.

Overall the website is very nice. The layout works for the content in it and the it is very easy to navigate through. There is nothing overly flashy, but for a wedding website it is very clean and too the point.

For the second review I chose the website Keep Portland Weird: Earthquake Preparedness. When you first open the website you are greeted with a loading diamond shape and then the page automatically scrolls down to a enter button. There you can click which enters you into the site and then you get lowered into another page that has the alphabet. When you click on one of the individual letters it drops you to a different page that lists that activity that is coordinated with that letter. This website is very colorful and has very nice artwork. The colors all work together and are all pastel like, the colors change as you scroll through different pages. When you are navigating through you also see the different graphics change when you select a letter, the graphics range from different bars of colors that start at the bottom and it takes you to that page. Each of the different letters have their own color scheme. This website isn’t scrollable able, it is only accessible through clicking the different boxes.  When looking through the different subjects you are able to share them through social media. The textures thought the whole piece were  very attractive and they are the pictures from the interactive pages. The background images throughout the whole website are very cool, they are all the art work made up for the select pages or the devastation from the earthquakes. The content through the piece is every read because you have a picture of the item and the text matches the color scheme of that letter.

Overall I would say that this website is very well done. They did a very good job with the overall design of the whole page. Being able to interact throughout the whole website through clicking while also getting the effect of movement through the whole piece. It was very nice to be able to navigate and read each part easily.

 

 

The single-page website I chose to describe and analyze was http://www.ashleyandjeffwedding.com, a website highlighting a couple that is planning to get married this upcoming year. The website seems to be acting as an invitation/information page both about the couple and the day of the wedding itself. The website scrolls from top to bottom is separated into five sections: the home page, info. about the couple, their engagement photos, details about the wedding with a schedule, and link to their registry. The website as a whole is very simple.

As described in Chapter 2 of The Principles of Beautiful Web Design, it is important to create a color palette when creating a website because it gives you more options to work with than a color scheme would. The website, though simple, is not very visually pleasing. I believe the theme they were going for was rather calm, simple and rustic/outdoorsy. They chose shades of tan and creme to match their engagement photos, all of which were taken outside in the woods. Green somewhat acts as an accent color because our only see it in the picture on the home page and in their engagement pictures. The text is very light in some sections and could be hard to read on certain low-resolution screens. I think the palette works cohesively and visually goes together, but it is very bland and could use some warmer colors to make it a little more exciting. Not that I would know what the color scheme of their wedding is, but I would make the website match those colors (I highly doubt the wedding colors are tan, green and more tan).

The Principles of Beautiful Web Design defines texture as “anything that gives appearance or feel to the surface of a design or object.” The first thing you see when you open the web page is a picture of the couple in front of a beautiful rock waterfall. The picture gives the home page texture through the texture of the rocks, the wood, and the water. When continuing to scroll through the remainder or the website though, there is absolutely no texture. I don’t necessarily think the website needed a lot of texture for its purpose, but this continues to make the page very bland and boring.

The website as a whole is easy to navigate and flows in a very natural pattern. The text, though light in color, is easy to read through and tells a story. I do think the website’s design works well, but I think it could have been more creative and more visually pleasing. I do think, though, that a website is a cool way to get information out about a wedding.

When I opened up One Page Love the first website that caught my eye was one named Meet The Greek. I had no clue what the website was about or why a man was just sitting on a couch in an otherwise empty room. After exploring the website for a few seconds I noticed the website was for a restaurant that could be found in Australia. My initial thought was how amazingly smooth the transition from one tab of information to the next was. Navigation was easy and the video of which showed the sitting man changed depending on what tab you were on.

 

As for color and texture, most of that was found in the video itself. The floor and the walls along with the close-ups of the man himself all brought depth to the website alongside the white panels with text. The panels come out when you navigate throughout the website and the panels are white with what seems to be an off black/brown text. All outside text is black or white and the logo is black unless there is a transition video going on, then it turns white.

 

Navigation is easy on this website. You click a tab and you are there. The only thing that I wished that they would improve upon is the menu. The menu for the website is way too long to be set up the way it is. Continuously scrolling down a menu of which doesn’t even have a scroll bar is obnoxious.
I already praised the navigation for being easy, the design for being beautiful, and the videos for being unique and easily relatable to the tab of which you are exploring. It’s easy for me to say that this website is well done and I am even envious of Australia for being able to eat there.