ARTM2210 Intro to Web Design

Just another Intro to… site

Archive for Spring 2012 Section B

Final review

I spent a good 6 hours myself coding our final project.  Not all of those hours were successful however.   It took me a lot of time to figure out the code for various things such as the rollovers.  I attempted to use some jquery but it did not work.  As a group i would say we spent at least 7 hours just working on ideas both outside of class and in class.  I struggled trying to code our website and it shows.  I feel that the website did not meet what we wanted it to be.  What we had planned looked good and would have been quite a nice website.  But we did not realize how limited we were by using our logo as our background.  We also tried to do things that none of us had any idea of how to do.  If we could do it again i think we would need to ditch some of the fancier ideas and stick to something more within our abilities.

Restaurant/Club

The smiling moose.  Their website is laid out well.  It is easy to find the information you are looking for.  Their navigation bar at the top states everything clearly and is easy to find.  The composition is well done.  They have their contact info at the top right and is easily noticed when navigating.  The navigation is easy and very understandable.  Since it is a restaurant and an entertainment venue it is very similar to what we want to do.  I liked the cycling images and the text and graphics look great.  I love the composure of the website and think it is a good website to take some tips from to improve ours.   Since it is essentially the same thing we want to make with our business this website speaks the most to me.

Final Bi Weekly

Hours Spent

Research:2 hours

Design:4 hours

Coding:30 minutes…(then gave up)

 

 

We spent about 2 hours as a group coming up with the idea of a club/restaurant.  In which we decided items such as the menu, color scheme, name, and other elements of the site and establishment.  I researched some different bar to get a feel for what kind of environment they had and to see how they were designed.  This was beneficial when I was designing the Logo and buttons for the website going off of the color scheme we had originally chosen.  With the design it featured many different elements for just the logo.  Including use of the colors and the font chosen, to change it to accommodate the theme.   Dreaweaver hates me except for during the finals.

Influences in our Final Project

When creating a final project, there were many sites used as influences in the decision on how to approach the final.  Almost all fashion websites have a plain white background because they want the focus on the clothing rather than a busy background.

One of the major influences used was Nastygal.com.  On the final project, the homepage had a slideshow and this was influenced by Nastygal.com  Nastygal.com had nothing more than a slideshow on the hompage to display, what kind of outfits the company had.  The hompage is the most important page to draw the viewers in and taking the time to make sure that the colors and everything was just right. Nastygal.com was the guidances for the homepage.  A different jquery code was used, but the influences from the site where there.

In trying to find a place for a logo, it was a hard a decision.  Continuing to visit fashion websites forever21.com came about.  Their logo was simple and put on the upper left hand of the websites.  This worked very well for the site and again the focus was on the clothing.  Everyone reads left to right so being able to see the simple logo first does not take away from it.  Logos are important because it helps viewers be able to recognize the site and when deciding on how to place the logo it took many consideration but following what forever21.com did was the final decision.

In creating the graphic of a girl on the white background denim.gasjeans.com was a factor.  In seeing a model have the same background as the website it pops out and feels like the model is in the website.  denim.gasjeans.com is an amazing site with beautiful jquery, but they were used as a reflection of what could make a model pop on the page and make it seem life like.

For the blog page, the influence was just the way a blog is displayed.  Simply with someone one writing and than a picture to display what the writing was about. Pages such as tumblr.com and blogster.com have many fashion writers within the blog sites.

In creating this final project searching the internet high and low was a start but after seeing other types   of fashion websites, taking a different spin on them was the challenge.  Making a website always has influences but not making them your own is the challenge.  This project really helped learn coding well, and it was a great learning experience!

Review 5

Bi-weekly Review 5

PulpFingers,com is a company that designs iPhone, iPad, and iPod apps. Navigation through this site is extremely simple, as the primary nav bar is located directly at the top of the page horizontally  under the logo. Being a one page site, the user has to manually scroll up the page to get back to the nav bar once they’ve hit the bottom. Being that the page isn’t too long, this is a minor inconvenience. The slight texture makes the page interesting despite it’s limited color scheme. I did notice that any header is a off white color, making navigation even easier. The tiny bit of jquery used to animate links here and there make Pulpfingers an overall appealing site.

cargocollective.com is designer ALen Pavlovic’s personal site. The primary nav bar flows vertically under his logo, and remains on the page no matter where the user navigates. Also, the images to the right of the primary nav serve as a secondary navigation method using graphics from each project.  This made diving in and rooting through his work easier as I knew what i was going to expect from him as an artist from the get go.

pelicandesign.ru/ is Vitaly Iiyasov’s personal website. Navigation once again flows horizontally across the top of the page, and remains in place on each new page.  The site is clear cut and visually interesting, as the first place the viewer is taken to when typing in the address is the portfolio page. Navigation back to the previous page requires hitting backspace or clicking the back nav arrow, which I found a little inconvenient. Also, there was no way to navigate to the next larger image when a smaller one is clicked, which disrupted the viewing experience.

morethan20.com is the awesome site of photographers alyssa and rich. Navigation runs across the topmost border of the page, which scrolls down to the section specified. The fact that it’s a Peter Pan reference caught my attention as soon as I saw the name, and the paper like texture and color scheme worked perfectly with the idea of their company being casual, fun, and whimsical.  I’m pretty sure i’ll keep this site in mind when it comes time to make my own photo site.

duggard.com is a vintage store run by James Graves, Casey Spitnale and Mackenzie Barker. Navigation is as simple as can be as there are only 4 links to click, and they remain horizontal above the content of the store, about us, and checkout pages. Simpleness of the site makes it very user friendly, which is what most look for in an online store. There’s nothing extremely flashy about it, and they do a great job of bringing the vintage inspiration that fuels their products into their site.

 

 

Bi-Weekly Review 7

For Our final group project we chose to do a fusion restaurant that included a beer and ice cream based menu. When comparing our website to other beer and ice cream sites, i think we did well at accomplishing our goal of simplicity in the style and design of our website. Im going to review my two  favorite beer and ice cream sites.

Ben & Jerry’s Ice CreamThe first thing you notice when you enter their site is there use of animation and vibrant colors. They use a horizontal navigation bar that stays at the top of the screen on every page you enter. The navigation bar also incorporates some very interesting roll overs. The website is also very children friendly. There are a lot of pictures that would entice kids to look around more. Overall the website is very affective, as it is very user friendly and is easily navigated.

Blue Moon Brewing Company Blue moon has one of the most interesting and visual friendly website. The whole site is flash based (Im Pretty Sure). We the user first opens the site they are required to put in their date of birth to verify they are 21. After that, the website loads like a book, and the navigation bar is vertical along the side of the book, as if they were tabs. When someone clicks on a tab, it will turn the exact number of pages to get to the tab you click. The website is very well thought out. The only downside is the tabs are somewhat hard to read, but the looks over weight that downside. Overall it is one of the best beer sites “I” have ever seen.

Klavon’s Ice Cream vs. Bittersweet

Klavon’s Ice Cream is a local Pittsburgh ice cream store located in the Strip District. The Klavon’s website is has a three page format  that contains all of the information as well as images on the first page, and menus on the second and third. The homepage’s background is a tiled, monochromatic (brown) version of their logo that is also placed in the top left corner in black and white. The top of the homepage contains contact information as well as an address for the store. Underneath the heading information are two brightly colored rectangles (red and yellow) to catch viewers’ attention, one being change of store hours, the other being a button for a menu that leads to another page. The next section of information has brown text (slightly darker than the background) and a gif of moving candy next to the text.  Then there is a slue of different sized images placed in the center of the homepage, with more gifs and brightly colored buttons underneath. The small red button on the right side is a second menu with ice cream flavors.  The bottom of the page has black text explaining the history of the store as well as regular store hours. It is difficult to navigate Klavon’s page, because the menus are not easily accessible. Instead of being placed in an easy place to find, they are thrown sporadically around the homepage. The information is not placed well for viewers to easily find, because it is sectioned off randomly and lacks organization.

The Bittersweet homepage sections off each page with a button and an image. The entire page is on the center of the screen and placed on a simple white background to help show each image. Clicking on either an image or button will allow users to go to the section of information selected. It is easy to navigate to different sections because the buttons on the bottom are placed in the same area on each page. Also, the logo button on the top takes viewers to the homepage. The information is sectioned off into smaller categories so it is easier to read. Each section uses the same typeface and color against a simple white background for clear legibility. However, there is no visual hierarchy to show importance of the text for each page. Each page has all of the information placed in the same area for consistency.

The layout of the Bittersweet homepage is easier to navigate than Klavon’s. The information is sectioned off on each individual page along with the homepage for Bittersweet. Klavon’s website seems as if it is a single page layout at first, but then viewers have to dig around to find there are two separate menu pages located within the homepage. The Klavon website spreads the information throughout the page without showing users where to find particular things someone visiting a local ice cream store’s website would hope to find, such as flavors, history, store hours, etc. However, the initial store information placed on the top has bigger text than the rest of the page, so if the viewer is having too much trouble navigating the page and becomes frustrated, they can call the store. In comparison, information on the Bittersweet page is easier to find than on the Klavon’s website.

 

bi-weekly review 7

The final website was basically inspired on a restaurant for people that usually go out and stay out until late so that is why it calls “The Munchies”. The researches were based on different websites such as, applebees.com, chillies.com and olivegarden.com. These websites helped to create a layout for The Munchies website and a style for the site. Also researches about the menu like prices and dishes helped a lot when we put together the menu site. Each of those restaurant website have a different idea and that it what made the munchies, different ideas put together.

Final Bi-weekly Review

For the restaurant, The Munchie’s, many of the basics came from sites such applebees.com, and olivegarden.com. A drop down menu in the navigation bar seemed to be very important. Also having a contact us, location, and an about us page was crucial. The home pages from these three sites all had pictures of offered items. The Munchie’s also has this on the home page.

Restaruant Review

For my final project, my group decided to make a restaurant web page. To start generating ideas for the site, I looked at many restaurant sites and found a lot of similar things. All of the sites had a navigation bar the ran horizontally across the top of the page. In the navigation bar, there was a menu button, location, contact us, and about us button. Since it seemed like many restaurants used this feature, we decided to use it for our web site. The site I liked the most was Applebee’s website. When I moved my cursor over the menu tab, a drop down menu appeared that had different categories of food to choose from. I could click on appetizers, burgers, drinks, pasta, etc. If I chose drinks for example, I would click on that button and I would be taken to a page that listed all of the drinks available at Applebees. One thing that I really liked about this site was that there were pictures of all of the food items. I like to be able to see what something looks like before I order it. The site uses the appropriate colors and font to match the restaurant. The Applebees website it the site that I have been referencing while creating our final web site.

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.

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

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.

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.

BiWeekly 4

The Carbonica webpage on sixrevisions.com successfully uses line, shape, pattern, light, and shadow. The site is composed of many layers, all with different texture patterns which resemble parchment or thin woven material. The layers’ patterns are not all perfectly smooth or even, but have slight variations. All of the layers are relatively evenly placed in relation to one another. Most of the shapes of the layers are nearly perfect rectangles. This spacing, placement, and shapes of each layer provides the viewer with nice, neat parallel lines. These parallel lines give the page a sense of clear cut crispness even though one or two of the edges of the parchment layers is folded over or slightly torn and the patterns do not fully resemble crispness. Therefore, the line, shape, and textured pattern used in this page give it a desirable balance through subtle contrast.

Light and shadow are also successfully utilized in this website. The page is lit brightly, but some shadows are still visible. The slight shadows underneath the paper and fabric-like layers provide a sense of depth in a vague but interesting way. This gives a 3D effect to the page without overkill. The shadow does not distract the viewer from the importance of the text and major message of the page. And, the light only emphasizes the significant portions of the site.

All of these elements work simultaneously to create a wonderful webpage. The shapes that the designer chose create parallel lines, successfully relaying crispness. This is contrasted by an earthy fabric textured pattern. These two elements work as cogs in the success of the overall piece. The light and shadow also contribute. The brightness of the page relays a certain mood to the viewer, and the subtle shadows provide depth to the webpage. Overall, this website successfully utilizes all of these elements.

Texture-Paige Snider

At bridge55.com, bricks are used to create texture behind text and pictures. At the top of the page, the bricks are cut out to show links, texts, and pictures. By cutting out the bricks, it looks like you are looking out of a building and into a sky with fireworks going off. Lines, like where the brick ends, create a constant flow for the viewers eyes. This makes the site easy to ready and understand.

Texture Webpage

Many web designers try to portray many points when trying to showcase a website and creating texture is one technique that web designers use to create great graphics in a webpage and create a realistic feel to the viewers. The website www.carbonica.org texture is very organic.   The overall background of the website look as a paper bag texture.  This creates depth with the information setting on top of the background.

The web designer than created a burlap sack texture under the paper texture that includes the information about the website.  The web designer also created tree and hill graphics on top of the burlap sack texture, which makes it, appear three-dimensional.

Also, on the texture of the paper the designer made the tip of the paper bend to make it seem realistic.

The texture within this website has an environmental feel and this appeals to the concept of the website.  The texture creates appeal to the website.  Because of the texture of the website, without the information, one will have the feel that the website is going to be environmental friendly.

This texture for the website goes very well for the information provided on the website, and texture makes the overall appeal of the website very appealing.

Ernest Hemingway Collection

  • Pick one site from http://sixrevisions.com/ and review its texture. How does the site use line & shape, light and shadow and patterns to give their page texture.

The Hemingway Collection site uses light, shape, and line in a very realistic way.  The site gives the illusion that one is sitting over a desk, as we see the shapes of the images laying flat against the table surface. Its assumed that the surface is a table because the coins and coffee cup are seen from above. The light seems to be generated from above and also from the top of the frame, giving the items a soft shadow, which is necessary to make them seem real. Shadow helps to pull the images away from the background and shows that the images are placed on different levels overlapping each other. The lines of the file that contains the information about Hemingway brings the viewer’s eye down the left side at all the objects, and also across the top of the file to bring attention to the navigation bar. The subtle texture of the background and paper combined with the use of shadow and light are very effective in giving the page a vantage point. Its safe to say that the overall design of the site is simple, but the effects placed on the images provide enough effect to create a realistic feel to the scene that is placed before the viewer.

Miles Dowsett

This webpage would draw peoples attention for many reasons.  One because of the light opaque background with the bold red text.  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.  On the background there is a delicate design that gives this webpage volume. This design is at a light opacity so it is  just a subtle design. If the design was at its full opacity, then it would be overbearing and take away from everything else on the webpage.

Towards the top of the page, the color begins to become a little bit darker and rougher. The edges of the page have a jagged shape that gives the webpage texture. The middle of the page where the text is located, is hi lighted with a brighter color to draw the audience into the text. The outside of the page has a darker color which gives the page a glowing sort of look. Although one might say this webpage is simple with not much design, not having much design is what really makes this webpage work.

texture

This page uses layering to help give the page texture and make sections of the page stand out from others. They also use rounded edges around subtitles and sections, which help give the page depth. The subtitles on the right hand side draw a your eye to them because they are more appealing and they are backed by colors that make them pop. The background of the website looks textured because it resembles hardwood floor and it shows the grain of the wood. The main picture that looks like a postcard really shows texture too with the way the border is colored. By the edges not being precise, it makes you feel like it’s a real postcard. The website is very appealing and eye catching. The page is very bright and looks lit, it definitely fits the main purpose of the website, it makes you feel like you are already part of Hawaii.

One page website- Trip the Mind and Shine

I browsed through the One Page Love site looking for a website that I would most want my own to resemble when I put it together.  The site I found to be the most interesting to scroll through was Michelle Thorpe’s, named Trip the Mind and Shine. Navigation through the site is very easy, as there are next and back buttons, which when pushed causes the page to appear as though someone is walking along a wall looking at pasted up posters. Each poster goes into great detail about what she does and the kind of photographs she takes. The format allows her to rely heavily on imagery without the site appearing cluttered. Widgets placed within each poster allow the viewer to explore even more of her photographs in slideshows and scrolling windows. All her links navigate to the corresponding website, such as her twitter, flickr, and facebook. I find this website to be both interesting and well made, as I had no problem using it and I found myself wanting to explore her work more.

Single Page Website

The Website I picked was Jamie and Dan’s Big Day. This website is very creative is an invitation for their wedding and the page is a single page the goes vertically down. The web page has a navigation on the top of each section that you can click and it will automatically scroll down to the part that you clicked, or you can just scroll down and it will also take you trough the whole page. The page is divided in 6 sections each part is something about their wedding saying either the day, the place, the hotel you can stay, etc. The website is also divided in 3 different colors, and they repeat the colors for the 6 different sections. The three colors go with each other so is not an odd color pretending that is just another page. We can see that the colors make look like a single page website. They also designed the website placing pictures of the couple at the end of each section so the people that are navigating know where the content ends for each section.

Bi-Weekly Review 3- Paige Neat

For the third bi-weekly review I chose to examine the Creative Rocket website. This site is very simplistic in nature yet still appealing. The color scheme of the site is mainly black and white, creating a sense of neat crispness. Though mainly black and white, the site has small splashes of color. This works to Creative Rocket’s benefit. The contrast of the plain grays and the vibrant colors generate more emphasis on the important items in color.  There is a very delicate balance in the site since there is only one splash of color. It is possible for some viewers to remain stuck on the spot of color and not fluently graze over the entire site. But, the contrast of the dark black and bright white of the non color portion of the site may help the viewer’s eye to recover from this rut. I noticed that my eyes flowed evenly over the page, and I believe that this is due to the site’s contrast and simplicity. The large font also helped to pull my eye around the page.

The site contains a scroll bar along the right of the page. This also allows the viewer to quickly and easily navigate through the site. This control allows the site to provide more content than just the initial screen view. The site also has many possible links to other important parts of the site. These links are made very clear, and this simplicity also helps the site. Overall, Creative Rocket is a site which utilizes color and navigation tools to compile a successful website.

Switch Wine

Switch Wine is a company that creates Australian certified organic wines. There are three navigation options at the top to scroll through on the one page site: ‘About Switch’, ‘The Wines’, and ‘Contact.’ However, the viewer can freely scroll to the left (or to the right if you’re on the center or end of the page) if they choose to do so. The colors used are nature inspired, along with a black accent. Colors that are used include blue, green,yellow, white and a sand color. These colors help play along with both the organic and Australian factors, because they are very clean and natural. The black accents help guide users along the website, pointing them in the right direction. (There is literally a big arrow pointing to the right on the homepage.) The contrast engages users and guides them along the site by showing how to properly read/use the one page website. Yellow, sand, and white contrast well against the blues so viewers can be shown information and text accordingly. The about Switch page uses a blue background with mainly black accents as graphics and lighter color text to show enough contrast to help guide viewers around the page. The next scroll option is a wine list offered by the company. The background is black, the text is white, and the images are of the blue and green bottles. Though the color of the site changed, the same scheme is being used to help tie everything together. Contact is the last part of the website, and uses more of the yellow, which has been an accent color throughout the site’s design until ‘Contact’. Each part of the site uses the same colors, but with variations of which one is the most dominant.  The overall color combination of Switch Wine is appropriate for an organic product from Australia.

Bi-Weekly Review 3

Austen Czapla

Bi-Weekly Review 3

Jeremy Mansfield Site

Upon first looking at Mansfield’s one page site, I was confused to was the purpose behind it was. At first I thought it was a site to sell ammunition for guns. After reading all the information on the page, I figured out that it was a site advertising his design. The bullets at the top of the page, lead me to that first assumption, but I realized  they were there because he is from the south and he is going for the southern cowboy theme. The color scheme on the site is really good though, in my opinion. It is a very bold color, but is also really easy on my eyes at the same time. I really like the texture added to the background, I think it works better than a solid background. My when all over the place when I first looked at the site, It took me awhile to get a grasp and figure out what I was looking at. The text colors compliment the background colors really well. Although his site isn’t very long, scroll wise, its very effective with all the elements it brings to the table. It is a one page site, but he has links that lead you to all of his social media sites like twitter, facebook and vimeo. Overall, I think the site is very well put together, and all the aspects compliment each other very well.

Older entries »