Category: ARTM2210 Intro to Web

Due to their contrasting styles I chose to write my review 3 on Burgatory and Bravo Franco’s.

The first site I looked at was Buratory’s site. When I first saw it my reaction was that of a very playful less serious company. I get this impression because of the layout of the page and playful working. While it is very balanced using what looks to be a three- four column system. The content is not symmetrically balanced, as I would see in Franco’s (a more up scale restaurant). But it uses this to its advantage drawing some attention away from the over whelming content rich left side to the more minimalistic right side. This right side contains information such as milk shake menu, Helluva burger, and the log which is a portal to the home page. The unity of the page is mostly in the colors and textures used on the page. The perfect accents of red mixed with earth tones are used perfectly to make some parts stand out while letting others slip into the background. As stated in the “Don’t make me think book” they use different size fonts to form a hierarchy of information. More important information is larger while less important information is generally towards the bottom and smaller.

The second site I looked at was Bravo Franco’s which looked to be a very clean site with everything lining up in it three column block style site. Side from the pictures the site only uses about 3 colors, which I think, add to the unity of the site. It is a very symmetrically balanced site with nothing that might draw your eye away from the important information. Similar to the Burgatory site it also has a hierarchy of text sized with their company name front and center and in large font, which stands out clearly. The site also has a lot of containers; at no point other than the phone number and the address at the top leave the confinements of the box which most of the information lives.

Both of these sites have very good navigation system. Everything is laid out for easy of use and maximum utility. Each has a well thought out nav bar at the top or on the side of the content. Though I think the Bravo Franco’s nav system is less convoluted and to the point( partly because of the wording). Each also has clear indicators on what can be or cant be selected for more information. Lastly each has a home button that make navigating the site a pleasurable experience. At no time was I frustrated or confused where to go. Each site has its pros and cons but over all I think both site are well designed in their respective styles.

Six Penn:

From the homepage the website features a single columned, multiple row layout centered beneath a directory banner which holds links to the key pages of the site, along with the name of the restaurant in the center, and their logo on the far left side, both of which function as links back to the homepage. The first link is for their “Menus”, which like all the links when clicked turns green in order to let the user know where they’re at on the site; beneath the banner is a list of their different menus (starting off on their more sought after, dinner) which like the banner above is centered on the page and remains highlighted to let one know what they’re looking at. Beneath the subdirectory are the hours that each menu is served, so there’s no confusion as to when the restaurant switches over to the next meal, and a stacked list of all the available options, organized by each course. The site continues to keep the same clean format of keeping each section neatly organized and centered beneath the top banner, subtlety keeping track of the location by highlighting the section, without any confusion of what each link will bring. It’s very straightforward, and easy to navigate, making it easy to find all the information you could want to know about the establishment in just a few clicks.

 

Butcher and the Rye:

The website for the Butcher And The Rye restaurant is a single paged site stylized in a very contemporary and rustic single column fashion. The top of the page reads as a billboard for the site, listing the different sections that the page will cover; however, when you scroll over the different listings they turn red, signaling a link which takes you down to that section to avoid the massive amount of scrolling it would take to reach the bottom, and engaging an overhead directory which will take the user to each section to continue to make the page faster and easier to navigate. Though if one did choose to scroll down the whole page they’d be treated to a variety of bold type treatments telling what the restaurant has to offer, such as the enormous variety of bourbon they have stocked, and an illustrated chart of all the different beefs one could have, all which act as a header for the section right below it. The site is simple and transitions well from one part to another, keeping itself contained amongst each frame. Though there isn’t any color indicator in the header to keep one sure of where they’re at, each section is boldly labeled and accompanied by a complimenting image which easily tells where one’s at, unless they’re completely ignorant to the design.

 

Most Effective:

While each site is simple and straightforward to use, it’s felt that the website for Six Penn Kitchen is more effective. Though it features more pages, and less graphic elements which embellish the atmosphere of the restaurant it has a better sense of contrast and placement that keeps the user sure of where they’re at and where they’re going. The color scheme for the Butcher And The Rye is consisted of a nearly black background with gray type over, which though sets a mood, is also difficult to read in some places. Though it’s easy to discover, it’s not obvious that the listings in the top header are actually links to the different sections, and they aren’t organized in the same way that they are on the rest of the page, or the header that appears after it’s out of sight. Even though it’s a simple graphic organizer meant for quick navigation for the site, it’s a tad peeving that things aren’t listed in the right order. The site for Six Penn is right to the point, what you click is what you get without the feeling that you’re skipping over something that you might have wanted to see first. All of the headings and important information are highlighted in green and bolded if not bigger than the accompanying text, which helps pops out for the dark gray background for quick and painless navigation through each page.

The two sites I choose to compare were Bravo Franco and Six Penn Kitchen. I think many people will agree with me when I say that Six Penn Kitchen was a really bad website example. Their use of layout felt empty and yet cluttered. The didn’t use the entire space for the layout of the menu. It kind of looks like they clumped everything together. Bravo Franco’s layout was well designed due to their usage of space and how content was set up compared to where on the menu, the pictures were placed. I didn’t really like the colors used in Six Penn Kitchen. The black, gray, and lime green really didn’t work with grabbing the viewer’s attention. The menu itself felt dark and the text was hard to read because it was small and some of the text was lime green placed on a black background. Those two colors do not mesh well together and I would highly recommend choosing different colors. Bravo Franco colors felt really uplifting. They were of lighter colors and the text was a readable size. The menu itself has a sense of harmony to it and you can feel that everything is unified because the entire menu has a sense of elegance to it. The colors mesh well together. The pictures are appealing. In my opinion, I would say, Bravo Franco’s website was just more visual appealing. And being as though this website is for a restaurant, visual appeal should have been the main focus when creating the website itself. The website for restaurants reflect how the food would look and how the place itself would look. It’s the complete opposite with Six Penn Kitchen. Six Penn Kitchen itself feels unbalanced because it’s completely clumped together and then it just has negative space out on the sides. Six Penn Kitchen lacked visual appeal and harmony.

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.

My review of a one page Parabellum Studio http://www.inparabellum.com/ . It is a website for a fashion company that uses multimedia to show there work. The site starts off really crisp and clean and the black text on a white background makes it really easy for me to see what I need to see. The hierarchy of text makes everything very easy to understand and that continues throughout the page. What I thought was really cool when I first opened up the page was that there are randomized lines that go everywhere your mouse goes.  I thought it was a really neat idea and different.  The lines did not distract or take away from the text but I did wish it continued in the white parts of the rest of the site.

As I continues to scroll down on the page I notice that the site begins to bring red and grey into the color scheme. The red and grey bring great contrast to the site and continues the crisp look. I don’t really understand the crumpled paper but the image looks well made and brings my attention to the two pictures off to the side. The text takes a back seat due to the red image standing out but is still not hard to find or read. Three more lines show up that spread apart as you continue to scroll down the page. It is not really the random patterns I still want but they add a nice look to a simplistic page.

Scrolling down more I notice the site will be alternating between image on the left, text on the right and image on the right and text on the left. This makes the site a little less repetitive. Along with switching the side of the text and image, it also rotates the red and grey between the image and background. The site continues the idea of the lines that spread when you scroll down more.

After scrolling two more images and getting a quick summery off all the aspects of Parabellum Studios, I come across text on the right that says people. On the left next to the text is nine pictures of people in an angled style. When you put your mouse over a picture it tells you who they are and what they do but it doesn’t tell you anything else about the people that work for Parabellum Studios. You can click the two arrows below the text to navigate through the 20 employees they have listed.

As you scroll down further you have your good old contact us then on the very last part on the bottom left they have their location on a google maps. My only problem with the map is that it will not take me to the google maps of there business.  It has the little red dropper like google maps but it takes you nowhere which was disappointing.

As a whole the site is really crisp and clean with color contrast. It is very easy to read and understand what the Studio does because it does not clutter the page at all, everything is very simple and your eyes just flow down the page as you scroll. The site very successful and I truly enjoyed the look and flow of it the first time I looked through it. The second time I started to nit pick and wanted things like more randomized lines and more info about the people working for the studio and also the map. The design works because of how simple the creator made it, they kept the colors simple and have high contrast, the images aren’t busy and let your eye flow from image to text. I the only thing the site is missing is a little more interaction with its graphic images, other than that it is a very strong and successful one page website.

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.”

 

For my review two of a one page website I chose the site Alyoop of the week “http://alyoopoftheweek.com”. This website caught my eye with its simplicity and kept me interest by its ease of use. It is a scroll up and down website with a page wide illustration of their choice for the best NBA alyoop of the week. As I commented earlier this is a very simple but eye pleasing site.

First aspect I noticed is the colors, none of the colors they use are very dual colors. Even the blacks and the browns they use have a sense of glow to them. They also use a lot of warm captivating colors such as red, orange, and yellows. The last thing I noticed about the colors are they are integrated into each illustration carefully and represent each teams main colors. Using small accent colors help to bring out the players and relevant designs on the page.

Another aberrance that I noticed on this site is how the content is set up. There is a very apparent vertical grid system that seems to be used with most of the content being center justified. Each illustrations text is looks to be some kind of slab serif font that guides you eye down to the players cartoon like illustration. The cartoon like illustration is very simplistic but each player is still very recognizable.

Lastly aspect I noticed was the navigation. While there is not much to say about it other than it is very easy to use. This is so because there are very few choices you have to make. You look at the player and ask do I want to see is alyoop and if so there is a distinct watch button under the player. If press watch it brings up a video screen and plays the video. With an “X” so you can exit the playing video when your done or keep it up and school to other players.

Over all I think this is a very successful site due to its ease of use and the visually pleasing content. At no point was I board or put off by any of the navigations. Lastly it left me with the feeling that I wouldn’t mind coming back to the site to see future content. Which in my opinion is what making a good site is all about.

 

In this one page site there have the ability to scroll vertically. While scrolling the side picture changes into the different subject that is being talked about on the left. In a one page site there should be some sort of grid system. This one page site is talking about the big cartel of 2014. This site is a great one page site it has information and also has the pictures. The color scheme is used throughout and it also adds to the site. It tells you how to scroll so people who just think there is only that one view make them wrong. In the book they talk about the layout of a site and the components in one. I believe this site shows that and makes a great point while doing it. Some of the design elements are being used like a grid. They have half of the screen being one color while the other side is a different one. They also have some of the text the color of the background of the one side. Which ties it together. The use of color in this one page site helps it seem more uplifting. I believe the site is designed well; the only changes I would make to this site would be changing the typeface. This site does show a controversy and I believe they made it a bit more eye-catching so people actually scroll through the entire site.

The site chosen is Jlenia Dog Sitter Rome, a site containing different kind of services for your dog. When I first visited the page the aspect that caught my eye the most and immediately were the colors used throughout the site. It is mainly consisting of warm colors but in lighter values that make them pastels, and these are used for the background, which in this case is portrayed as the sky. However, a cool color that pops up repeatedly as you scroll down is green for grass and frees, and it is very dominant and vibrant, which then contrasts with the background sunset-like sky. The texture throughout the one page site deals a lot with the imagery used which is a mixture of both cartoon objects, such as the hot air balloons, balloons, birds, and insects; and life-like imagery, such as the dogs, trees, wood, houses, and the grass. I recognized the texture at its strongest within the grass due to how it is highlighted and shadowed perfectly to make you want to feel it. For navigating purposes, it is simply done by going straight down the page, and for content not to be all mushed together, each section has a different scene that the level of grass distinctively divides, while the top of the scene is bright for the sky, contrasting the previous grass above it. This set up is rather cliché but it works very well with this particular set up and the graphics used. As you navigate downward, certain graphics and imagery move upward, like the clouds or balloons, or move across the screen, like the flying birds. Also, when approaching the next section, you will see where exactly you stand on the page by colored dots that fall vertical, since you are incapable of seeing it as a whole. Along with moving to each section, the title, followed sequentially with the text for that section fades in as the objects are moving around it, which I thought gave it entertainment, rather than a still page. Another means of the navigation is at the very top left corner where there are four ribbons that contain links to the awards won for the page as well as a voting link, which I see as a good idea for listing the accomplishments, making new users want to feel good about the site. I feel that texture, emphasis, movement, and color really make this one page site successful. The colors give it a very fantasy kind of mood to it, and the colors allow for all of the text to be very legible, and none of the colors clash together. Emphasis has a tie with color in that the images really pop out against the pale sky background and it brings attention to the graphics that help illustrate each section. Movement keeps the page from being to generic when scrolling down and the fade in and fade out makes the text more wanting to read rather than if it was just permanent. In addition the movement of the objects make the page come to life. The text is not only good color choices, but good font styles too. I believe that the design of this particular website is very artsy and playful which relates to whom the site is about; dogs, or “four-legged friends.” There is not a boring part about it, it’s no wonder why its been named the “most loved” site. Everything a website needs (about info, contact, descriptions, etc.) is all provided which makes it no doubt easy and understanding.

Winnersplaylist.com/grammys is a magazine styled site listing the winners of the2015 awards show. The design is very simple, but in it’s minimalistic approach holds a touch of elegance and class. The top of the page holds the logo for the site, which holds the boldest color for the site, along with the winner for the “#RecordOfTheYear”. From there it splits into 3 columns which continue down until all of the awards have been filled; it seems that with each row the awards progress from the most notable (or the ones people would care the most about) to the ones that were more than likely not aired during the ceremony. As there’s no real functionality to the site other than the option to play an audio link to the winner of each listed category it’s easy to use, but the seemingly unorganized positioning of the listings makes it a bit annoying to search through. The images are dull, and tend to blend into the pure black background, which adds to the sort of mystery to them before their reveal, but when scrolled over only the text beneath them brightens to the same gold as the header to give evidence to the fact it’s a playable link. The objects are fluid with the dimensions of the page, and as you expand it they get wider, distorting the images within them, and contorting them to nearly unrecognizable shapes if gone too far. In terms of simplicity and purpose the site is well put together and accomplishes it’s purpose, but in terms of handling and navigation is a hassle and annoyance, as it remains flat and not dynamic throughout the time on it. If it wasn’t for the fact that part of it was somewhat interactive it’d be the more interesting just to Google who won what.

Creating a “new” design is a challenge today since technology is a dominating factor. The easy way to start something today is to use a template and to make that version unique. What captured my attention with Studio Kwik’s design was it’s unique,, and original style that was clean, clear, and concise. The page was created for people to have insight in  their fixed charged for water and energy. It provides information in a fun way that is visually appropriate for friends and family. It is built for the future and easy to use.

The website I chose from http://onepagelove.com/ was Studio Kwik’s unique design called Knock Knock. From the start, the site was well organized. The color scheme used was a dull navy blue and a dusty orange where important information was kept. The shadow used for the background was a light grey and white, like how this blog was designed.

The user is able to navigate intuitively by scrolling down the page and also by following the guide, which is a constant line. With the flowing line, the site is easy to scan due to the numbers provided that act as milestones throughout the page. It is clean and simple which pleases the users and draws them to the content.

I believe the site’s design is well designed because of the color scheme, navigation, organization and originality of the page. Overall, the single page is pleasing to the user and stress-free, which makes the site a more enjoyable experience for all users.

The single page website I choose to critique is called Echo. According to onepagelove.com, Echo is a public relations agency that tries to connect their clients with the people they want to reach. “Echo amplifies brands and businesses”. I chose to critique this single page website because it’s opening image which was somewhat like an illusion, was pretty cool. The use of colors and illusions stuck out to me the most.

The navigation for the page was easy. It scrolls down to about three different “sections”. So the website is pretty short and stops abruptly. The layout and composition was simply plain. But it was too plain! At first glance, I thought the simplicity made it elegant but when I started to scroll down, I just realized it had more of an incomplete look. There was way too much negative and free space. I think this issue could have been fixed if there were some columns added here or there. There’s a “knob” on the upper right side of the opening page. The knob makes you want to click on it and drag it right, thinking you’ll unlock something but it actually doesn’t work. The fact that it doesn’t work makes me question if it even is a knob. The links on the website do not work as well.

The use of color was black, white and an off white almost gray. My opinion of the creator picking these colors was that they just tried to play it safe. If Echo is meant to “amplify brands and businesses” then why doesn’t their website portray that same excitement? I think one way of fixing this would be to add a pop of color here or there. I would suggest red because it’s an exciting color and it will combine nicely with the black and white colors previously used. According to The principles of Beautiful Web Design: Chapter 2: Color, the color red can be perceived as the color of passion and excitement. So I think having a pop of it in the original design would be good.

The chapter also states that the color white can be perceived among viewers as perfection, light and purity. However when I visited the page, I didn’t receive any of those thoughts from the web creator’s use of white. I just got a feeling of empty space. And the black text up against the white background didn’t bring anything special either. Now the color black can be perceived as power, elegance, and strength. I did get a hint of this feeling when the white text was up against the black background. In my opinion, it gave that section of context a bold statement. The font wasn’t special or fancy. However, it was used in two different colors (black and off white). The font isn’t really pleasing and the size is too big.

The chapter about texture doesn’t really apply to this website. There was no repeated pattern. The viewer cant feel roughness or smoothness. There wasn’t really any proportions because the website didn’t have much of a layout. The only thing that I would say had emphasis was the picture, I assume, of the creator. But even then it was pretty simple because it had a thin black border around the circle that held the image.

The only thing that I found interesting about this website was the opening page where it had an illusion where the text would slowly disappear and then reappear as you scrolled down. The text, ECHO, was put behind a black and white stripped layout so it looked like it was moving. It’s one of those illusions where if you look at it too long it will start to hurt your eyes. Most viewers would find this a bad element to have on a website but I found it quite exciting considering everything was pretty bland.

Kat Chemsak

ARTM2210

Feb. 25, 2015

For Better Coffee

            Looking through the different one page websites, there was only one that really stood out visually and interested me its amazing design. The reason why I picked this page is because its use of design elements and the way they creatively interpreted their content. When you first open the page, there is a beautiful background of leafs. The leaves in the background are green and show contrast in the different shade and tint of green. The shapes of the leaves visually point to the main object that will follow through the top to the bottom of the page. The coffee bean in the middle is brown and contrast well from the leaves in color since it is brown but is similar in shape. Also to coordinate with the shapes of the leaves and coffee bean, there are circles in the background.To use the space well and create a pattern without over doing the content of the background there circles are visually accepted with a round shape and contrast the green with red and tone down the contrast with white. The font chose is a sans serif that has a good use of kerning. The spaces between each letter and words help create a separation from the background, including the padding from the background. As the coffee bean continues to transfer down the page you can see how it changes and transforms. In a creative and organized way it turns the bean into grounded coffee beans, to in a filter, and than becomes coffee. While this is visually represented with graphics and animations, there is also font to make sure the viewer can read what is going on, and explains their concept further. This page is not cluttered and is very well conducted in a whole.