ARTM2210 Intro to Web Design

Just another Intro to… site

Archive for Bi-Weekly Review

Review of The French Gourmet Restaurant – “http://www.thefrenchgourmet.com/”

After careful review of The French Gourmet restaurant, the overall design is somewhat similar to the one my group and I are currently in the process of creating.  Although ours is for the fusion of both French and Chinese cuisine, the layout has aspects that greatly compares to ours.  But, enough about my website, here is my review of The French Gourmet webpage:

Located in San Diego, California, The French Gourmet goes that extra mile to “taste the delicious difference.”  Their amenities include dining, catering, a bakery, and a wine boutique.  Some positives that the website has is its color palette, font style, and navigation.  Some negatives that the website unfortunately has is some significant clutter.

POSITIVES

Color Palette – The royal blue and fire truck red accents truly add to the sandy yellow background color.  The navigation tabs are located at the top of the webpage in the royal blue color, with a white font.  The headers are all in royal blue, which make them, stand out perfectly against the white divs where the majority of the information lies.

Font Style – As far as the fonts that The French Gourmet uses, the variety seems spot on.  Using a basic serif font for the majority of the site, and combining it with the italicized script font for the site’s headers and titles, works extremely well.  The two styles compliment one another effortlessly.

Navigation – From a technical standpoint, the webpage is successful.  All the links, tabs, and sub-sites work productively.  The navigation is easy to use and follow for any age.  The drop-down tabs make it simple enough to find exactly where the viewer is going and needs to be.

NEGATIVES

Clutter – The amount of unnecessary clutter the page has is unreal.  Take the homepage for instance.  At the top of the page, there are a few things that clutter it up.  There is a font decrease/increase button, email page button, print page button, and a home page button…even when the user can click on the main logo in the middle to get back to the homepage.  The top simply looks cluttered.  They could have found better spots for the necessary tabs/buttons, because for the viewer, it is overwhelming.  There is also a ton of clutter towards the bottom of the site that can definitely be condensed.  The logos of the supporting groups do not have to necessarily be all in a line like that, or even that large.  Again, it is overwhelming.

Restaurant review

I did my bi-weekly review on a restaurant called Ray’s Place. Ray’s Place is a bar/tavern in Kent Ohio. It was one of my favorite places to grab a burger or wings when I lived in Ohio. Firstly on their website their home page is an old image from back when Ray’s first opened up. The section where the image is is a slideshow of images of their foods. Something that caught my eye was how when you go to select  a section on the site the box with the title changes colors when you scroll over it. When you go to the different sections, there are multiple sub-sections you can view. For instance under special event it lists multiple events that happen at Ray’s Place. One sub-section that it lists is the Budweiser Clydesdales. Under this section it shows multiple pictures from when they came to visit. One section at the top that catches your attention is the section titled “Memory Lane”. This section takes you back to 1900 when Ray’s started. It has a slideshow of the timeline of Ray’s and also has a video of the story behind Ray’s Place and it’s history. This site is easily accessible and neatly laid out. All the food items that need descriptions have clear and helpful descriptions and their “liquids” page is very well set up into categories and is easy to get to exactly what section you need. Over all I feel like this page is very simple but very effective. I really enjoyed talking a walk down memory lane of one of my favorite dining establishments. I learned more than I ever knew about Ray’s!

The Club Scene

Since we are doing a club/restaurant for our website, I felt it would be appropriate to look at a few club sites to see their design and how they function.  The club site I looked at is called “the Diesel Club Lounge”, http://www.dieselpgh.com/?v=club .  The site is very dynamic and interesting to look at, and also includes a radio feature at the top of the site page to show off the club scene.  All the tabs and menu items are absolute on the page and then all the information changes underneath the image of the bar.  The picture of the bar also changes with each click of a different button.  I really enjoy this page and it is very nice and easy to navigate.

Nastygal.com is a high fashion website, many fashion websites have a white background because many of clothing items are not one consistent color, so therefore there is no clash of colors.  It has a very simple header of the title of the website in a cursive typeface.  The main focus of the page is the animated slideshow of models wearing the clothes in the middle of the page.  There is a simple navigating bar to travel throughout the site.  Many fashion websites such as nastygal.com are simple but yet very dimensional.  This is a site where one can purchase the clothing so there are many ways to view the item easily.  One way is to click and view all the different views of the items or one can use the zoom button over the picture.

For our final project, we want it to look like a high fashion website, simple yet effective.  Nastygal.com and many other sites are being a model for us to create a website, but we will put our own spin on the fashion website.

Bi-Weekly Review 6

For my 6th Bi weekly Review I chose to take a look at some Ice cream shop websites and some brewery sites to compare again the competition.

Bruster’s Ice Cream: Bruster’s is a large ice cream chain store in the Northeast. Their website is very user friendly, with tabs that easily label all the navigation buttons across the top of the screen.  The images were surprisingly pixelate for being the website of such a large chain store. The use of color is random at times, but it only works  because it is an ice cream website. Overall the website is very clean and well put together, and its easy to operate. Any one from ages 8-70 years old could use it with ease.

Dairy Queen: Everyone has heard of dairy queen. it is the essence of cheap ice cream. (in my opinion). It is your typical basic soft serve with your basic sprinkle toppings. There website was very well put together, more than one would expect. They use a nice animated screen on the main page introduce customers to the eating options.  The only problem is, there is a lot going on, on the first page. Eyes can easily get distracted and not no where to go. Besides that, its nice. Like Bruster’s, Dairy Queen used a wide variety of colors on their website.

Yuengling: Yuengling is one of the most famous/ popular beers in the northeast and in pennsylvania. There site started out by making visitors enter in their date of birth to check if they are 21, just as a precaution. After the age check, the site opens up with a big graphic and a horizontal navigation bar. The big thing that stands out, is their color scheme. Its a very neutral brown color complimented by their signature green. The navigation bar at the top worked well, and things loaded faster that most of other sites.

Ithaca Beer

The Ithaca Beer Company has a multipage website available to people over 21. The homepage gives information about events relating to the beer such as events and news. The navigation is located under the banner at the top of the page, which showcases the different kinds of beers the company brews. Each navigational button has subcategories to answer questions about the company and its products. However, there is no search option which sometimes leads users straight to a desired page. When one of the categories is chosen, it then leads viewers to a page with a list of links to the subcategories anyways. This is not very useful, and could be replaced with a page that summarizes the main category and then gives the options for related topics. The overall design and color scheme The Ithaca Beer Company chose for their site is fitting. The colors  remind users the generic color for beer. The background uses a golden brown gradient that uses halftone circles that are a visual representation of head. The navigational links are displayed in the same golden color, and then highlighted in white when scrolled over. The body text is a dark brown like the color of stout.

Though the navigation bar on The Ithaca Beer Company website can lead users to redundant pages, the design concept relates to the product being sold. However, this does not create complete confusion because users are guided on where to go from a list of options per page. The background of halftone circles gives the look and feel of beer in a glass. The appropriate color scheme carries out elements of the beers The Ithaca Beer Company brews. The website though not the easiest for new users to navigate, uses graphics that portray the products in a positive light and show that the company is knowledgable of beer.

fifth bi-weekly review

http://pulpfingers.com/
Pulpfingers has an incredible use of texture combined with a very simple color palette to create a visually pleasing site. There are about three colors used along with a fine grain texture. The navigation is the most important element of the site; it sits at the very top of the page. The most emphasis is placed on the navigation because it is unique in the size of the text and the use of lines attracts the viewer’s attention. This navigation is horizontal and located in the same position as one clicks through the different pages.

http://www.blindpigdesign.com/
Blindpigdesign.com emphasizes the navigation with the dark background and unusual flying pig icon. It is a vertical navigation bar that features a hovering talent, when one hovers over a word the dotted background appears. There is another navigation located further down the page, which consists of social media sites. These sites are represented as icons instead of actual words. This site uses a two-color scheme of white and black with a few shades of gray. The two sections are separated by the different colors; the content page has a white background and the navigation bar has a gray background.

http://www.trailerparktruck.com/
Trailerparktruck.com is an excellent example of a single page website. The navigation bar is located at the top of the page. When one word is clicked, the page scrolls to the location further down on the page. There is an option on the right for the viewer to scroll automatically to the top of the page, which allows the user to click on another word and so on. The secondary navigation is much smaller than the primary one and is tacked on the left side of the page. Again, another page uses icons for social media pages.

http://hellohellohi.com/
hellohellohi.com uses navigation in a very unique way. The main navigation is a horizontal bar settled near the top of the page. This site’s secondary navigation is different, the navigation is scattered across the second half of the page because each page is its own bubble or circle. Shape creates the distinction between the two navigations on this page.
http://www.zappos.com/
A great example of bread crumbing would be zappos.com. The main navigation is located horizontally at the top of the page, while another navigation is on the left in a column. The main navigation does not change but the vertical one does. The vertical navigation becomes more specific as the viewer clicks on a particular label. For example, one clicks on women shoes, then boots, then black, the size. The content of the page changes and there become fewer options for a person to choose from. Along with the differences of change, the two navigations are differentiated by color and shape. The main navigation, which has the most emphasis, consists of a solid blue box. In contrast the vertical navigation is blue font on the white background.

Bi Weekly Review

Playground Blues

For this blog site the navigation bar is vertical going down the left side. When the cursor is moved over the navigation bar, images appear to be clicked on. This part of the navigation is secondary. The colors of the rainbow run down the side with images accompanying them. The primary navigation is in the center of the page. The links are hi lighted in a blue and when a cursor is run over it, the words will become underlined. This is how one will know that it can be clicked on. After clicking on one of the secondary links, a new pages opens with new information. At the bottom of that new page, there is an arrow that will take you back to the homepage. This navigation is very simple to use. Although the design is very plain, the navigation works well.

jBunti

This site has horizontal and vertical navigation bars. The months run down the side and there is other information that runs horizontal across the top. The design for this site would catch ones attention because of the bright colors and bold shapes. Compared to this last blog reviewed, jBunti could be a bit overwhelming for some people.

Apple

The Apple site is one of the most easiest navigation sites to use. The theme is a monochromatic  color scheme. With grey and white tones the site is appealing to the eye.  The large font it the top of the navigation bar makes it easy for customers to use. The white and grey color scheme attracts customers to the site.

Polkdesign

When first opening this site, it seems to be very bland and plain. The only two colors used are a crimson red and a cream color as the background. The navigation bar runs horizontally across the top of the of the page. This bar is the only thing on the entire page that has links to it. Many  people would find this site boring because of the plain neutral colors and lack of design. It is easy to navigate around but that is all that this site has to offer.

Hopkingdesign

After first opening this site, there are only two lines of text on a black background. The text says click here. After following the navigation, the viewer is taken to another page that shows all of the information and design. the site does not have very much design to it at all. There is just a white background with text on it. Not very appealing at all. The navigation is simple to use, but the design could use some work.

 

Brittany Miller

 

Bi-Weekly Review 5

http://freelanceswitch.com/: This site has both horizontal and vertical navigation. The main navigation is at the top (going horizontally), and is in the gray box. The secondary navigation is within the green box below the main navigation, as well as off to the right side going vertically. The green box has a slight gradient and is given some texture to create a distinction between primary and secondary navigation.

http://www.apple.com/finalcutpro/: The site has mainly horizontal navigation. The primary navigation is at the top, with a gray texture added for distinction purposes. The secondary navigation is below the gray navigation box, and is also horizontal.

http://macrabbit.com/: This site uses only horizontal navigation. It is very simple in that it uses small icons along with text as links. The main navigation at the top is the only navigation throughout the site. All of the icons used have a similar artistic style to them, and when they are clicked they change color and are circled.

http://www.prague-guide.fr/: This site uses vertical navigation. The links are made to look like folder tabs and are given texture for distinction. On other pages, horizontal links are used with no special added texture. When the main tabs are clicked, they change color to show which page the user is on.

http://www.polkdesign.net/: This site utilizes horizontal navigation. The main navigation is flushed left and changes from black to red when hovered/clicked. Other pages use secondary vertical navigation (flushed right).

Four out of five of these sites use horizontal navigation as their primary navigation of choice. They also tend to use vertical navigation as their secondary. Their main navigations tend to be textured, whereas the secondary is not.

Bi-Weekly Review Navigation

When looking at Hardgraft.com the first thing that you notice is the fixed aspects on the website. For Navigation the left hand side of the website contained links to the different collections and the different categories of good. Because this is a smaller website there is no level of links. For example, it does not say Cases and then list Ipad, Phone, Laptop. Because of the simplicity of this site, they do not have any breadcrumbs for shoppers to use. This site relies on the back button designed by Safari, Firefox, Google Chrome etc. They can use that to return to all products, or if they remember the title, click on the main link again. There is no back arrow link on the page.

Carnation website is an attention grabbing site that utilizes geometric shapes and vivid colors. Although viewers may gravitate towards the site because of this reason, the sites navigation programs may push them away. Carnation does include a banner on the top of the page that leads to links of other pages. The confusing part of the website is that it also scrolls down, and the scrolling is split unto different pages. This is similar to a one-page site. At this point the viewer could be confused if they are supposed to click the links, or scroll through the information to find what they are looking for. Although the website has a good site ID, it is missing noticeable sub-heading that would make the navigation easier. When looking at the actual links and arrows though, they do change colors letting the viewer know that they are clickable.

Genia agency is a foreign website that has a good use of a grid pattern. The navigation is organized well with the site ID clearly identified and the links being along the top of the page. The text and images are aligned in boxes. When scrolling over links, you can clearly identify that they are clickable as they change color, or a vector box appears. Although there is a lot of information, the organization of the website allows it to be readable. There is no bread crumbing on this website so the viewer will have to use the back button provided by the Google Chrome, Safari, etc. or reclick on the link on the top of the page.

Planet propaganda is a website with unique navigation. Although on the top right of the page Method | Work | Blog | About | are listed you initially see these choices in the middle of the page, as soon as the homepage loads. These words are placed in a triangle pattern in the center of the page. The background is a slideshow of images but the links are static. There is no option is scroll so the viewer must click on a link. By keeping the homepage simple, the viewer has less chance of getting confused. Some do use J Query with buttons to send the viewers to new information.

The navigation of Archikon is different than most websites you see today. Although the website is in a different language, the artwork and layout leaves me to believe that this is an architecture website. Instead of having a banner across the top, or left side of the page with links, Archikon places its link randomly on the home page. These links are connected to the site ID with thin white lines. It resembles a scatter map used for brain storming.There are no bread crumbs for the client to use.

http://www.hardgraft.com/#/collection/heritage
http://www.carnationgroup.com/expertise
http://www.agenciagenia.com.br/genia
http://planetpropaganda.com/
http://www.archikonconstructeurs.nl/

Navigation Use and Bread-Crumbing: Brock Switzer

SecondStory.com

Second Story is the website of a design firm located in Portland Oregon.  The webpage for this group is amazing.  The site uses a combination of traditional scrolling on the “news” page as well as x-axis jquery to continue through the information.  The sites navigation is beautifully laid out.  The viewer has a couple options.  For the first option one can simply click on the links located on the left hand side of the page and watch as the site smooth scrolls to the side to reveal the clicked on section of content.  The other option is to press arrow buttons on the right hand side to continue through the content sections.  Obviously, this is a brilliant way to guide viewers through the site to view the content in the order desired by the designers.  Someone visiting the site must move through each section of information in order to arrive at the next.  Everything is on the same page and the order never changes but the site is very easy to use and with the addition of quick links on the left a visitor to the page can get to the information that they need quickly as well, for example the “contact” page.

 

Morethan20.com

More Than 20 is a website for a husband and wife photography team in Buffalo, NY.  This website is also pretty amazing.  The site is at it’s core a one page site that uses both jquery and self-scrolling to achieve the final goal of being taken through the content.  Again, the use of jquery to scroll for the viewer allows designers to have nearly total control over how the site is viewed and in what order.  The site shifts to multiple pages once the “galleries” section is reached.  When the viewer clicks on a photo it moves to a separate page full of photos from the session indicated by the thumbnail.  Just because this is a separate page doesn’t mean that it is difficult to return to the single page sections.  The links at the top remain no matter what page is currently displayed and when clicked on return the visitor to the main sections.  The site has a reasonable and logical flow to it.  There is an illustrated logo followed by an about section, galleries, FAQs and finally a contact form.

 

DucttapeandGlitter.com

Duct tape and Glitter is yet another website for a graphic design company.  This website is simple and on multiple pages.  When a visitor first arrives at the site it is on a simple homepage with links at the top of the page as well as linked photos near the bottom of the page.  The navigation is simple and not too cluttered there are only 4 navigation options at this point.  There is some bread-crumbing on the site.  There is a large arrow pointing to the top nav bar which is in a specific order which leads the viewer to believe that is the order in which they should be viewed.  Again a logical order is used in which the work, about, blog and contact information are viewed in that order.

 

pulpfingers.com

Pulp Fingers is a group that creates apps for smart phones.  The website for Pulp Fingers has a beautiful texture.  The entire site feels like cut out construction paper.  That being said their navigation leaves something to be desired.  The site is rather simple and there are few navigation options but they are near the top of the page and somewhat difficult to see.  The link that stands out the most is the “blog” link on the right hand side of the page that stays in the same position with the site as it is scrolled.  This link is the most important feeling and seems to take away a lot of focus from the main nav.  It may be that the designers wanted the site to have an emphasis on the blog but with other important information like what apps the team is working on, it seems an oversite to make those links less important and hardly noticeable.

 

TrailerParkTruck.com

Trailer Park Truck is a website for a restaurant in California.  This site is very simple, easy to use and the navigation and bread-crumbing are spot on.  This website like many others that are nicely laid out used smooth scrolling jquery to guide the viewer through the content areas.  The site has a simple nav bar at the top that has very limited options.  Once the visitor clicks on a link the site scrolls to the section of information and from there traditional scrolling takes over.  Logically, most viewers would no doubt click the first link and then simply scroll through the rest of the sections which are intelligently laid out to give out the information needed in a precise order.  There is however always the option at the right side of the page for the viewer to return to the top and click on other links from there.  Sites like this one that use jquery links and single pages are clearly the most precise bread-crumbing sites.  A visitor almost has no options as to the order of the informations presented which gives the designers and company owners the ability to ensure the information presented is done so in a very particular way.

Five Examples of Navigation

Architect Steven Holl has a website that uses a unique form of navigation and bread crumbing. It is composed of a navigation bar on the left that is a made up of click-able boxes that take the visitor to different sections of the site, but the navigation bar never disappears. Each page has a different background so a change is noticeable, and the home page background changes every time it is refreshed. Secondary Navigation sometimes appears on the right depending on what page the user has traveled to. The navigation is traditional, but the way the whole site is available in one large box is very different. The navigation is designed to appear like an architectural sketch. Each navigation option is given a larger size in the map according to its importance on the site. The site does stand out as a result, and fits the subject matter.
Dizidesigns, a web design and graphic design company, has a traditional, but refined navigation system on its web page. The navigation at the top of the web page transports the user to the other sections of the page, but that is all there is to the website. There is no secondary navigation aside from the rollover, portfolio page that allows users to click pictures that take them to other websites that the company has designed. The pink, white, and grey color scheme is on each page, so the designers create continuity throughout their site.
Web designer Evan Eckard has a similar design to Dizidesigns, but Eckard uses a speaking, horizontal navigation bar that explains what each section is underneath its heading. For example, underneath contact it says email and phone. This allows the user to better understand where each click navigates to on the page. Eckard also is consistent with his color scheme and font choices to make the whole site feel like one piece.
The flash website, Nick AD, uses an extremely unique horizontal navigation bar that appears anywhere the user clicks, but the user must hold the click until they rollover the section they wish visit. Whenever a section is selected, the section appears on the site. Every section appears within the page, and as a result, it feels like one whole page. The only issue with this concept of navigation is that it is so different from what most users are used they may get intimidated and leave. With a little experimentation, the website does prove to be a refreshing perspective on a web page by making it a much more interactive experience.
The design company, Wards Exchange, uses a simple, vertical navigation bar that is numbered which makes the experience linear. Not only is it numbered, but also each section gets lighter in color to create a visual progression. The navigation plays off their brochure that uses a similar format. There is not other form of navigation on the page, and once a user goes through each page, they will have a clear understanding of the company. Each section is a simple page that does not take much time to read through. Consequently, the user has no reason to object to traveling the linear route because it is effortless. Like all the other sites explored, the color scheme and fonts were consistent from page to page.

 

~Written by John Marshall

Bi-Weekly Review

inBloom: A viewer that uses this site would be very pleased with the easy use of navigation.  inBloom is setup with a unique design and the color of the background really makes the page come alive. When someone clicks on a tab on the page, it wont open up a new window, which is nice. This feature makes this site easier for the r people to navigate. The color scheme is very simple and effective and easy on the the images and links around the page.  Overall, inBloom is very nice. There is always a tab to go back to the page previous page which is a big help to alot of people. Makes for the navigation to be simple and to the point.

Hello Color: This website has a very creative layout, as the title says, but it is very different than most websites. Hello ColorThere has very little stuff going on the first page which makes it easy to find where to go because of the simple introduction. This website also uses a clicking navigation bar. The one thing this site is lacking, is a better style and color scheme. The colors are very silent, which makes it easy to loose attention when browsing. The site is also just to plain and boring. Nothing is really occurring on HelloColor. Needs to have more going on to keep the viewer awake.

Apple: Apple is one of the easiest websites to use and figure out. Everything is laid out in a good area.  It’s large font on a navigation bar at the very top of the screen makes Apple sytand out to most of the different sites. Although there is a very minimal use of color, Apple still makes the site very unique. Even though color is not used that much, Apple still gets the message across to the people. Everything they design is based off a black and grey color scheme.  The only problem with the site is that when you go through tabs you have to  click on different navigation menus. Most people are used to it, so it does not really pose to much of a problem.

Hopking Design: Opening the website, there was no information to be found on it. Just based on the layout, it was very nice and simple and got to the point very quickly. There is a horizontal navigation bar across at the top right.  This is really only the  The simplicity of this website makes it very easy to navigate. Although it is easy to use, that doesn’t mean its designed simple, it is well put together. Although there was no content, Hopking Design still has style and makes for an interesting website.

Playground Blues :  The first thought of this website do not really catch my eye. It has a very standard welcoming design with a message to the people on the front page. This site also uses a vertical navigation bar. It is very hard to find at first. Its located on the left hand side and very unnoticeable. Once you enter a page, there is no way to get back except using the back button on the browser. The color scheme is very bland besides the design on the front, but it works well! The only problem is that there needs to be a better use of the layout and style on the page, it is a little too basic and really has not much thought in it at all.

Bi-Weekly Review 5

Websites with good bread-crumbing:

Freelance Switch: A person that uses this site would be very pleased with the easy of use when it comes to getting back and forth between pages. When someone clicks on a tab on the page, it wont open up a new window, which is nice. Sites that pull up multiple window just become a hassle and are hard to manage. This feature make this site easier for the older generation to navigate. the navigation bar runs horizontal across the upper section of the screen which makes it very easy to see. The color scheme (grey and line green) is very simple yet effective and easy on the eye.  Overall, the bread-crumbing on this site is very nice. There is always a tab to go back to the page previous page.

Creative Solutions: This website has a very “creative” layout, as the title says, but it is very confusing to the eye. There is a lot of stuff going on the first page which makes it hard to find where to go because it is easy to get distracted. This website also uses a horizontal navigation bar. Unlike the last site, this site is harder to get back to previous pages. The one thing this site is lacking, is a better color scheme. The colors are very muted, which makes it easy to loose attention when browsing.

Apple: Apple is one of the easiest websites to use and figure out. Everything its in large font on a navigation bar at the very top of the screen. Although there is a very minimal use of color, that is the essence of apple. Everything they design is based off a black, grey and white color scheme, which are basically the only colors the website uses. The only problem with the site is that when you go through a bunch of tabs, the only way to get back to the to the bingeing is by using the tabs at the top of the page.

News Pond:  Upon opening the website, there was no information to be found on it. Just based on the layout, it was very nice and simple. There is a horizontal navigation bar across the top with a sub navigation bar underneath. The simplicity of this website makes it VERY easy to navigate. Although it is easy to use, that doesn’t mean its designed simple, it is well put together. Although there was no content, this is the best website of the five.

Mac Rabbit :  The first impressions of this website would be good for all audiences. It has a very welcoming design with a cup of coffee on the front page. This site also uses a horizontal navigation bar. Once you enter a page, there is no way to get back except using the return button on the browser. The color scheme is very bland besides the design on the front, but it works well! The only problem is that there needs to be a better use of the layout on the page, it is a little too basic.

5 SITES!

After a trip to webdesignledger.com, one may notice that several sites posted to the blog have different ways of navigation. For example, on the Fantastic Examples of Package Design post, different posts use different tactics of bread crumbing. The “Ish” Watch page requires using the back button to get back to webdesignledger.com. The next page, Grady’s Cold Brew, opens up into a new window. This makes it easier to get back to WDL without using back buttons for much navigation. Both sites are from lovelypackage.com, and have a one page layout that scrolls down with images of different packaging types. The blog reviewed was smashingmagazine.com. The first post was entitled The Elements of Navigation. On the top of the site the logo enables viewers to go back to the Smashing Magazine homepage. There are horizontal and vertical navigation bars, however, the vertical one gives more specific options for viewers to navigate different areas of the site. The part The Elements of Navigation was under is highlighted as “UX design.” Since this part is highlighted, viewers know where to go to find similar articles. Different subjects have blue type, and subcategories are black. On the side of smashingmagazine there are several sites that are related to design and web development. One of those websites is teamtreehouse.com. The homepage gives options to visit either web development, web design, or iOS development sections. The main navigation bar is placed horizontally on the top. The Web Design option when first click starts off with an overview video. There is then an option to “get started.” The last navigation page in the web design portion gives links to several instructional videos on how to learn web design techniques. Then to get back to the other options, the viewer is required to click the home button on the top navigation bar. Next to the navigation bar is a search bar, incase the viewer has specific keywords or terms in mind. The last website viewed was abduzeedo.com’s Roy Lichtenstein tutorial. The navigation bar is placed vertically on the left, and gives viewers four main options that branch out into subcategories once scrolled over. Underneath the navigation bar are contact options and for users to login to the site that have a smaller font size and are grey text instead of white like the main search options. The search bar is placed on the top right corner. It is easy to navigate from this article to others because the titles of each tutorial state what programs they use. Also, each article has a description of what programs are used and where to find them in the navigation bar. The bottom of the article also has options for the viewer to learn more about different programs. Many of the sites reviewed used vertical navigation systems and different color choices to differentiate search options. Since many of the articles have similar topics, it is understandable why similar navigation tactics are used with each website previously stated.

Blog Review – “www.webdesignledger.com”

“21 Inspiring Examples of Dark Colors in Web Design,” “15 Icon Design Photoshop Tutorials,” “30 Amusing and Funny Photo Manipulations,” “WDL Premium: Retro UI Set,” and “10 New Free Fonts for Your Designs,” from “webdesignledger.com,” all share very common similarities.  Their overall formats, layouts, navigation, and color palettes seem very comparable.

As far as the format and look of each site, all five pretty much follow the same template.  On the main site, www.webdesignledger.com, a short paragraph states what each site is about, with a small thumbnail located on the left, also with an italicized, gray, bold title.  When directed to each specific site, the title and information is justified to the left, with multiple advertisements on the right hand side.  Photos are shown throughout the page, with titles and labels explaining each graphic individually.

The navigation bar is horizontal with a gray background color, white type, very legible, and always remains at the top of the page.  There is also a good distinction in what each site is categorized in.  On each page, before the title, each category is in all caps and in red.  The red is there to stand out to let the viewer know that for instance, “21 Inspiring Examples of Dark Colors in Web Design,” is categorized in “INSPIRATION,” and “15 Icon Design Photoshop Tutorials,” is categorized in “TUTURIOLS.”

When it comes to the color palette, all five of the sites on Web Design Ledger look very alike and consistent.  They look universal with white backgrounds, the same typeface, and the same colors of type (gray for main title, black for normal text, blue for headers, and red for categories).  The cohesiveness of the sites makes Web Design Ledger come off very professionally and organized.

As far as bread crumbing, Web Design Ledger does not visually show any.  When a link is clicked, and the viewer goes back to the original page, the link does not change a color or anything.  To the viewer, the paths they take cannot be re-traced.

All in all, the five pages, “21 Inspiring Examples of Dark Colors in Web Design,” “15 Icon Design Photoshop Tutorials,” “30 Amusing and Funny Photo Manipulations,” “WDL Premium: Retro UI Set,” and “10 New Free Fonts for Your Designs,” share many commonalities, including their overall formats, layouts, navigation, and color palettes.

Bi-weekly 5 site review

http://www.begbicycles.com/

The sites primary navigation is placed at the top of the screen and is framed by parallel lines. It gives the user the option to go back to the home page or go forward to: bicycles, accessories, gallery and BEG blog. Their secondary navigation is at the bottom on the page directing the user to: how to order, contact us, small print, trade, cycle to work and press. The color and texture on this page does not change from each type of navigation and they are both horizontally placed. Instead the designer uses line and font size to suggest importance of each menu.

http://blindbarber.com/

The sites primary navigation is placed at the top of the page. It gives the user the option to go click shop, about, menu, locations, press and news. Their secondary navigation is at the bottom on the page pointing the user to newsletter, return policy, reservations, friends and contact. Both navigation menus are horizontal. To expose the importance of the primary menu the type is in a large font on top on a black and white picture of a barber. The photo’s dark texture makes the white text pop from the screen directing the user’s attention. The secondary menu is placed in a plain grey rectangle with a light grey font, not distracting the user from the rest of the page.

http://www.archikon.nl/

The sites navigation is randomly placed on the home page. It gives the user the option to click projects, contact, Archikon blog, construction and office.  Their secondary navigation is horizontally placed in the bottom right corner of the page directing the user to twitter, linkedin, feed and login. The primary navigation is on top of a large color photo. The designer uses circles as pin points and white lines to move the users eye from one option to the next. The secondary menu is in a small blue rectangle with black text. This site did not rely on trends, its unique navigation design will only intrigue the user more.

http://saltsurf.com/

The sites primary navigation is at the top right of the page horizontally placed. It gives the user the option to visit home, the concept, surfboards, online store, contact and below the salt. The secondary menu has only 4 circles horizontally placed directing the user to the available now, available in the store and blog. The primary navigation is small boxy text which uses an underline to show which option is being currently used. The bottom navigation is not even text, just circles. Clicking on them changes the photo in the background and the next option the user can click to go to a different part of the website.

http://manualcreative.com/

The primary menu is at the top on the page directing the user to projects, news, profile and contact. Each category is separated by a small line and the entire navigation system is placed horizontally. The secondary menu is set up quite similarly to saltsurf.com. This site uses circles as well to point the user to different options. This site seems to have followed the WordPress theme with a very plain template.

In conclusion these five sites do not focus heavily on color or texture to create a separation from the main to secondary navigation options. Most of the sites used large pictures to illustrate the site so most colors used were white, shades of grey, minimal blue and black. To separate importance a the menus a variety of font sizes were used, placement on the page was emphasized and circles were implemented instead of text.

Bi Weekly 5

BlogName is a kind dull boring site with a gray background. There is no texture from the first page to the second and has really no color either.  The viewer has to scroll down to look at the content and links to navigate the site.

Evan Erkcad is an interesting site.  The bright colors and the black background draws interest to the viewers and leads them to the vertical and horizontal navigation bar.  The second and first page have the same qualities to keep the viewers interested.

ResNet is a great site which has many colors and textures for the viewer to see. The texture helps the viewer navigate the site by having the navigation bar at vertical and horizontal.  The site does not change page to page.

Dizi is a very bright and pink site that attracts people to look around.The bright pink bars around the site shows the viewer where to click to navigate the site. The creme color texture matched the pink to keep the viewers looking at the site and not have a headache.

Franophone Prague Guide is a well put together site.  The yellow and oranges texture is suited for the viewers eyes to navigate around the site to view the content. The navigation bar is vertical which lets more on the page for the viewer to see.

The Seen

The Seen website has a very wide use of color and textures. On their site it says they are “a small multi-disciplined creative design business born out of F1.” They design for a few different companies, but mainly ones dealing with some sort of racing. Each block has a different form of animation that makes me want to see what will happen next when I click on the block. Also the use of color is extraordinary. It has a dark background that makes me want to get a little closer to read the text and spend that much more time on the pictures within the page. Due to the fact with all the animation on the page it makes me want to play around with the page and see what it all has in store. Overall i really enjoy the colors and textures on this page mainly because it can keep me interested and wanting to learn what this specific site has to offer.

iamtodd.com

iamtodd.com is a portfolio website for designer Todd Miller. The website uses the same pattern to display the designs Todd Miller has worked on. Each design is placed equally apart from one another with a description on the side. Also, each piece has a white border around it for contrast against the grey grainy background. Underneath each image, behind the white borders, Miller uses small white lines and blue boxes as a drop shadowing technique used to give additional depth to each image. It helps blend the portfolio images in with the grey background and tie in the graphics used at the top of the page. It also brings attention to the next design on the site. The grey and blue color scheme allows the white accents to bring out the pieces Todd Miller put in his portfolio. The overall look of iamtodd.com has a weathered, vintage feel which is brought out by darker blues and greys and graphics that blend into the background.

Bi-weekly review

 

I choose to analyze the web page of an organization that manages carbon emissions named Carbonica (http://www.carbonica.org/). The web site of Carbonica has a very interesting texture. The main background is made to look like it was some kind of old cardboard paper; one has a darker tone than the other which allows it to stick out to the viewer. The top of the page has a part that look like a mesh fabric and some graphics that represent a hill with some trees scattered on it. The web site use line and shape to subdivide the information so that it is easy to mentally organize. It also uses light and shadow on the background to give it the illusions of depth and make it look 3 dimensional. Overall I like the way they included texture in their design as it emphasis the ecologically friendly activities of the company.

Bi-Weekly Review 4

The Helmy Bern website is very interesting and beautifully textured. It is a company that offers products for skateboarding, skiing, and surfing. The overall textured theme involves a ripped piece of cardboard. To get the textured effect, they use a slight drop shadow on the cardboard, and give it paint splatters and signs of wear and tear to make it look authentic. As for the background, it is somewhat grainy (like the texture of a street), with brush designs at the top that make it look as if it was painted. The whole site has elements of “grunge” to them, which really ties into one main aspect of their company–skateboarding. The grungy theme is uniform throughout, with articles having the same kind of diagonal brush design in the upper left hand corner.

The Ernest Hemingway Collection

The Ernest Hemingway Collection is a website that sells products inspired by the lifestyle of the famous author for whom the collection is named.  The site also features information about Hemingway and links to other websites with similar products based off of the man himself.

This website is beautiful.  The entire site is laid out to look like an old desk.  The background is of dark wood and sitting on it are trinkets such as a compass, glasses, old coins and a pencil.  The item changes with each page of content.  The content itself is laid out on an old notebook page.  The corner of the page even has the mark of a cup that was sitting on it.  This elegant little detail adds another dimension of texture and realism that one doesn’t often see in websites.  Beside the notebook there are also several photos that are inside of actual photo paper, again a nice touch that adds so much realism and feeling to this site.  The photos change on each page along with the trinkets.  There is also a coffee cup sitting on the desk that stays in every page of content.

The texture of this website adds to the content greatly.  The whole site is about a man that liked to explore and write and was worldly.  The realistic objects and the texture of the paper and the old desk add to that style and let you know a little about who Hemingway was without even having to read about him.  One gets the sense of being in the home of someone knowledgable and world traveled.  It has a richness to it.  The colors are deep mainly brown and tan tones and velvety and the lighting is soft.  It makes you feel like you are in the home of someone wealthy.  It is interesting to see a website mimic realism so well.  It no longer feels like it is on a computer monitor but, instead, feels like a real desk and real photos and items.  In a world obsessed with being modern and pushing new boundaries it is refreshing to see a site with an old world texture and color scheme.

Bi-weekly review: Texture

The site Kayintveen.com used texture in a very subtle way. The dark gray background has a very fine grain texture, which is just noticeable to the naked eye. The texture is contrasted to the “clean” or flat colors used for the background of the subject boxes. The competition between the texture and non-textured elements creates a focus on to subject within the boxes along with the use of light.
Light in this site is used to focus the reader to the information within the subject boxes. There are very small and faint shadows surrounding the main boxes, which contain the pictures. The shadow designed to create depth in the webpage. These shadows are along the edges of the subject boxes.
Shape is utilized in abundance throughout the site. Kayintveen.com used shape to create separate bodies of information in a unifying way. There is only one shape, the rectangle, repeated down the site. This repetition created a pattern in order to enhance the texture of the website.

Bi-weekly Review- Coalmarch Productions

The site for Coalmarch Productions looks like they’re going for an old-timey coal miner look. They accomplish this through giving their main body a texture like parchment or an old coal document. The shading for the body is like a golden creamy color with darker speckles and spots mixed in, they even put what looks like a big water stain on it. The shadows on the sides add to the overall look of the site, instead of a flat lighting it looks more like it could be lit by candlelight. The lines that break up the body from the asides serve their purpose without taking away from the aesthetics of the site by using a different shading from one side to the other. This site does a very good job of portraying something older through textures with a modern medium.

Bi-Weekly Review

For this review I have chose the site The Seen.  This webpage would draw peoples attention for many reasons.  One because of the dark background.  The dark background really makes the pictures and texture stand out.  After exploring the site more, one begins to realize that the shapes and lines in the background is what really draws me into this sites layout.  With all the images and bright colors in each of them makes for an attention grabber and makes you think about what the designer is trying to say about his or her work.

Towards the top and the middle of the page, the color begins to become darker and noticeable. The edges of the page have a jagged shape that gives the webpage texture. As  you scroll over the photos a links appear to the pictures and take you off the site and into another link.  This makes for an exciting and interesting site.  As I navigated The Seen I came across different creativity and bold ideas. The Seen is a very plain site, but it makes for all the better because the real message is when you click the photos and give you that particular photos and gives more detail information on it. The outside of the page has a darker color which gives the page a  sort of different look. However, one might say this webpage is simple with not much design, not having much design is what really makes this webpage work in a way of its simplicity.

Bi-weekly Review 4

The Ernest Hemingway website from http://sixrevisions.com/ uses an interesting collection of texture. The hardwood pattern background serves as the base of the website giving the user an overhead perspective of what seems to be a desk.  The use of space and varying scale of objects creates an almost tangible depth to the website.

The wrinkled paper of the tag, layered on top of the pictures with ripped edges paired with the slightly discolored corners of the main page keeps with the theme of a desk that someone has used. When the user scrolls down they will notice the spotted brown ring that the coffee cup left on the paper. The light opacity of the ring adds texture to the page, making the user imagine that someone left the cup in that place long enough for the liquid to seep in. The top menu is centered in the page with a strip of material behind it; the sheer detail of the element adds yet another piece of the site that looks real enough to touch.

The glare on the coffee surface makes the light appear to be coming from the above right. That harsh reflection was not paired with a strong enough shadow to the side; which then made the site a little less realistic. Also when scrolling down the pattern of the hardwood turns black, not because of the lack of light because the darkness was not matched on the paper above. This change in brightness makes the whole desk theme less realistic. The overall site is trying to make something realistic, but it does not follow through with each of its elements.

Lanikai Texture Review

Lanikai Properties is a real estate firm located in Oahu Hawaii. Because the real estate is located on an island, the look of the website is drastically different than websites on the main land. The main texture of the website is a wooden floor. The lines on the wood run vertical, the same way the page scrolls. The wood is a light color representing the light and airiness of the island. If the wood was a dark chestnut, it would give the website a completely different feel. Along the right hand side of the website, there is a distress striped banner that runs down the side of the page. The colors are a bright, cheerful color palette. The distressed look of this banner remind the visitor of the beauty of nature, of the house in Hawaii. The distress look may also be nostalgic for those who have traveled to Hawaii at a younger age. The web designer also distressed a lot of other shapes and boxes on the site.
There are many smaller textures that Lanikai uses to their advantage. The header is highlighted with lines and a circular shape to attract visitors’ eyes to the companies’ name. To keep the website organized, Lanikai uses boxes to hold the text and pictures. These boxes are also distressed to keep the feel of nature to the website. Some of the boxes are tilted to a right of left direction. The tilt removes any seriousness feeling for the website. The top box utilizes diagonal stripes, as diagonal stripes give the website a feeling of fun movement. The vector graphics placed around including a Volkswagen car and Hawaiian flowers enhance the lighthearted whimsical feel.
Lanikai Properties have a lighthearted fun website that is achieved with the use of texture. Light colors and wood grain work distressed boxes to keep the overall theme naturalistic. Rotations, vector images and order of placement keep a fun feeling to the website. Overall the website represents a Hawaiian real estate well.
-Shelbey Surgent

The Rugged Texture of Bridge55

Bridge55


 

Bridge 55 is an online men’s fashion clothes store whose website features an interesting use of texture to convey their style of urban, ruggedness. The most obvious use of texture is the brick wall background of the site. It is a rough, beat up brick wall that uses contrast and a gradation of color to keep it interesting; some parts of the wall are fading to white while others are nearly burnt black. Furthermore, the bricks are not consistently shaped and are cracked at points; as a result, it looks like a very, old thrown-together sort of wall. One nice touch about the wall is exclusively featured on the home page, aesthetically differentiating it self from the rest of the website. The brick wall is shorter in height and opens up in the center to reveal the website’s specials. In a sense, the background becomes a foreground frame to showcase their sales and exclusive items. The frame the wall creates is staggered, not a perfect rectangle, but it keeps with the whole rough and rugged feel of the whole site. Also, the wall features graffiti art of some of the brands the site sells on the wall, which of course, only makes the site feel more urban.
Many of the lines on the website have a torn look to them; the most notable example of torn lines is the navigation bar at the top, center of the page. The background of the navigation bar is a black, torn rectangle that runs up against the background on all sides except for the top, which touches the white banner that extends the length of the page. The white banner and the black navigation bar create a strong contrast with torn edges that immediately place the visitor subconsciously into the world of the site. The banner is clean, white and easy to read. As soon as the viewer’s eyes cross the torn edges of the navigation bar and enter the bricked wall background, they are in an urban world of rugged style where store’s clothes become the spotlight. The only other unique use of line and texture on the site is the side bar on the left side that appears on the left, it is a simple rectangle with a page pealing effect in the upper right corner. It is a nice touch that makes the page feel less plain and two dimensional, but it is the only place they use that effect and consequently, it feels slightly out of place. The website does not use shadows and feels very two dimensional for the most part. It would be nice to see the background move with scrolling to separate it from the rest of the page, and also use shadows and transparency to give it more depth. All dimensionality aside, the texture of the website replicates the feeling of urban, ruggedness of their clothes by using a simple, well picked background and a smart use of torn lines.

~John Marshall

Texture and Feel

The ernesthemingwaycollection.com website is all about making the screen of the computer seem as if it were the top of a wooden desk. It accomplishes this through several details. Most of it includes areas, items, wherein information is displayed as well as the personalized simple color choices.
To begin with the lines and shapes of this site are both simple and complex. The site is supposed to be a desk and as a desk it would have things on it such as coffee and papers to read off of. It has those things as well as some of Hemingway’s personal I.D and his photographs. These are all straight edged, lined, pieces but they lay on the desk haphazardly as if it were someone’s real desk. Within these items is the text, which give the information.
The color of this site is very much muted and faded colors. There is not much shadow other than the desk wood gets dark near the bottom of the page. It is probably to make it feel like an overhead light source of either a lamp or a window. There is also some reflection of light in the coffee cup but that was most likely done in a graphic.
Overall texture and feel of this webpage is very well done. It all fits together very nicely and pulls off its intended purpose nicely. I would think that this is a very reputable website for information on Ernst Hemingway.

« Newer entries · Older entries »