Blog 15: Cosmic Soda E-Commerce Site

This site, http://www.cosmicsoda.com/product/hello_and_goodbye/, is a fun hip e-commerce site. They take away most forms and show graphics instead. They show a scale going from extra small to extra large.  They show graphics of t-shirts with sizes in them to show what sizes they have and in what styles, 'x'ing them out as they run out of stock. Even the search bar isn't typically.  It is black instead of white and isn't a perfect rectangle. They take needed formatted items and make them apart of their design. They are a little harder to find but since they are large and black they pull you in and because everything is designed it is fun to find.

Blog 14: Atitude Brasil

While looking for web inspiration I found the site http://www.atitudebrasil.com/site/. Although it is not in English I like how it is laid out. It is a little busy but you can get a lot of quick concise information while being both organized and fun. I like that it allows for photos, text, and for a lot of color. Depending on the amount of information it can continue further down the page. There is a lot of structure with a strict grid to help organize the page and all its contents. I don't like that when you click on the links they open in a lightbox and then in a separate window if you want to keep going.  I like the structure of the page but I want the actual content to be able to fit into the structure or adapt to a similar structure not having to open apart from it.

Blog 13: Made Thought

This portfolio site at http://madethought.com/ is really different for a design consultancy site. It is very disciplined and methodical.  It is simple and fairly easy to navigate although the flow of it is slightly unconventional and took me a second to know what exactly got me to their work but after that I realized how it was organized and I could find everything.  I'm not sure its the best way to show your artistic ability but it is well organized and showcases each piece without distractions. It is not good for a quick look at his work because you have to click on each link to see it because there are no thumbnails.  Also the homepage has no obvious link but again it makes you feel like you need to pay attention to what is on the page.  With an all black background and no imagery and links everywhere your attention is really focused on what they want you to focus on. It was also nice because the format didn't have to change and he didn't have to use lightbox or any other galleries to showcase their work at a large scale.

Blog 12: Slider Gallery Tutorial

I found a tutorial on how to make a slider gallery like the one on the apple site at http://jqueryfordesigners.com/slider-gallery/.  The site gives you a video tutorial, gives the html coding, css coding and the jQuery plugins.  At http://jqueryfordesigners.com/slider-gallery/ you can learn how to code for an infinite carousel that slides thumbnails across when hitting arrows allowing you to see several images at a time and then rotating them to see the next set. This would be useful while showing products off, to use in a portfolio, or as a selection menu.  It allows for more interaction and lets a larger amount of images to be shown without cluttering the page.

Blog 11: Principles of Web Design

Smashing Magazine explains some basic principles of web design at http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/.  They explain how users scan websites, don't read them. They are impatient and if expectations aren't met they quickly leave the site.  They don't search for the best way to look for things they just find a link and click. Users also want control, no pop-ups and always have the ability to go back. "According to Krug's first law of usability, the web-page should be obvious and self-explanatory." Words should be to the point, not cute or long but what the user is looking for. And most of all keep it simple and organized.

Blog 10: iMockups for ipad

If you own an iPad it is now easier to design app's.  iMockup for the iPad by Endloop Systems Inc. is designed for web designers to mockup apps for the web, the iphone, and ipad.  There are grids to make wireframes, you can email the png files, and quickly design and collaborate about your creations.

Blog 9: Adobe Digital Publishing Suite

Making digital publications that are interactive for ipads and e-readers is the next big thing.  Martha Stewart's magazine and Adobe published an online video showing off the new technology and what they have done with it.  Check it out... http://www.marthastewart.com/msl-ipad-video. The possibilities are endless for designers with interactive publishing like this. You can download files at http://labs.adobe.com/technologies/digitalpublishing/ to help you make an interactive magazine.

Blog 8: Web Marketing Associations' WebAward: Glidden Website

Hitchcock Fleming & Associates won the Best of Show for 2010 for their Glidden Website, http://www.glidden.com/index.do. Their site is very interactive and user friendly.  When you enter the site a roller paint color in the background of the screen, grabbing your attention immediately.  There are organized swatches, inspiration rooms and other swatches that coordinate with the color you choose, color ideas for what mood you want to convey, etc. You can interact and actually paint a room to see the colors you want in a virtual setting. This site is very friendly to any one looking to paint, helping and guiding them along the way.

Blog 7: Online Forms

I found a site http://www.websitetoad.com/how-to-make-online-forms.htm that gives some basic coding to help create forms on websites.


This code allows you to select options like male/female or small/medium/large in a e-commerce site.

<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>


Or this that allows you to add a submit button.


<form name="input" action="html_form_action.asp"
method="get">
Name:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

Blog 6: Shopping Carts

While researching e-commerce sites and their check-out / shopping cart sections I have found several tips or suggestions that seem helpful. One is to have some sort of progress chart so they know what all is involved and that they will have a chance to confirm their order. This clears up some confusion and keeps your user posted on what the whole process contains.  The page should also be clean and all distractions eliminated. The 'next step' button should be clearly identified and there should also be an option to continue shopping. At the end when their order is completed there should be a note thanking them for their order.

Blog 5: Nice design, textures, and navigation

Looking online I found http://www.andreashinkel.com/deutsch/home/home.html, the website for the Celtic Football Club. I think this site is strong because of all the texture and the overall tone and feeling it creates.  It has more of a darker homey feeling compared to the colder white designs that most web pages take on. I also liked the use of java script to make the tags move up and down when the mouse rolls over it. This small action makes the site more interactive and interesting.  I also like that the navigation is towards the bottom of the pages.  This also breaks from the traditional website formats but works well since the pages are short and the base pages are limited to a small amount.  Adding the circles, flowers, and arrows to the navigation as you roll over them makes you want to keep moving and discovering more about the page. Small elements like these can bring the user into the page and capture their attention quickly and easily.

Blog 4: Non-Profit Website (Africa)

Revive Africa (http://reviveafrica.com/index.php) is a non-profit site that allows you to donate in different ways to orphans in Africa. The focus of the site is the images of the people, the people that are in need of your help. There are large images on the home page but also large images of the individual children you can help. Photos tend to pull on the heart strings more than just hearing stories. If you show who they are helping they build a personal connection and will be more likely to donate. Because this site is for children in Africa the textures and colors are geared towards Africa. It is rough, natural, but yet bright. Non-profit sites focus is more on people but they still are effective, easy to navigate, and still have an e-commerce part.

Blog 3: Good E-Commerce/Commercial Site

While researching e-commerce website examples I found Mission Bicycle Company (https://www.missionbicycle.com/) that has a really strong design and is quite functional as a business. I think the one large image pulls your attention in quickly while featuring a product. I also like the header and navigation with the simple black symbols along with the text. The navigation is easy to follow and the structure keeps everything organized.  

ShoeGuru (http://shoeguru.ca/) is another strong commercial site with a completely different design. This is very image based in design and is very simplistic. The navigation is still easy to follow, I especially like the image based links. On one of the pages when picking flats, boots, and sport shoes it not only says it but it also has large images of the models wearing the shoes as the navigation buttons. The grayish black background makes the page have depth and all the products stand out in high contrast.

Both of these sites have totally different styles and approaches but both are very effective.

Blog 2: Pikachoose

from http://belvedereinc.net/ 

While looking for a nice way to display portfolio images I found Pikachoose a JQuery pluggin. I haven't tried to use the coding yet but I love the examples on their site. It seems practical in the fact everything operates in one window. You don't have to mess around with zooming, pop-ups, and closing windows all the time so the navigation is simple and fuss free. Their best example of it in use is on http://belvedereinc.net/. Here it is displayed very cleanly. The thumbnails are small enough that it makes you view the image larger but just big enough that if you are going back through you can identify the right one. The only improvement would be a space to scroll or maybe for a caption but for a simple selection of images this is one of the better options.

Blog 1: Top 10 Web Trends for 2010

I found on http://designtutorials4u.com/top-10-web-designtrends-for-2010/ the top ten web trends for 2010. Although we try to make designs timeless the web is easily a place we can be trendy because we can constantly update it and change it according to the new trends. This year although quickly passing by has some important trends that can help make any page more interesting and more up to date. Some of the trends that I think are note worthy are single page layouts, hand drawn styles, and large items. Single page layouts are very practical in small sites. Its the no mess route but if not organized well it could be more work. They are very straightforward but if there was a lot of content it could be overwhelming and a scrolling chore.  This site gave http://www.kinoz.com/ as an example but I also found http://dannyblackman.com/ that uses a one page layout.  Here he adds he own artwork in between the sections that adds an extra touch.  He does not have any menus that can take you directly to the section that you want though so the navigation is a little more frustrating because you have to go in that order. Of course I have to bring up that the hand drawn look is in since most of the work I do seems to involve some sort of hand drawn element. Using your own writing and sketches can add a personal touch and stand out on the web where traditional fonts are typically used. A good example of this can be seen on my website http://gozips.uakron.edu/~amh105 of course or http://www.wingcheng.com/ that encompasses a one page design and hand written elements. The last noteworthy mention is large elements. The website actually had typography, large images/photography, and introduction boxes (headers) as three different trends but basically is is trendy to have one of these be a large element on your page to get your attention. Large type in different fonts can be catching to the eye when surrounded with system fonts. A large photo can grab your attention quickly when needed especially when the content and colors are interesting. I liked the website http://www.cassius.com.au/index.html where he has a large black and white image of himself in the background that changes on the pages. It is very contrasting to the bright and bold colored elements he places on it. I also love the easy and quick navigation of his site. Large headers also grab your attention right away and give every page a consistent feel. http://www.denisechandler.com/index.html I feel is a good example of how large text and large headers can be fun and seek your attention. Knowing the trends is helpful in staying relevant in the quick pace of the web.  Any good design will be timeless but when the web changes and can be updated so quickly is important to be able to evolve with it and give the people what they want to see.

Form and Content 6: Good and Bad Outside Typographic Designs

1. OfficeMax's typographic sign is strong in it's design. There is a powerful connection between the look of the font and the store's products. This is always a good quality in a logo/sign because you don't question what the product they are trying to sell is. The serifs make it look professional and remind me of a typewriter but having a font with curved lines make it appear more consumer-friendly and less harsh. The simple yellow and black color scheme coincide with a typical legal pad which also connects to its products.

2. Yes Issue 1's has it's strengths and weakness's in its design. With road signs and political issues, hierarchy is essential. In this case 'Yes on Issue 1' is the most essential and then the picture of the girl that relates directly to the issue and makes it personal. These evident essentials are what is strong with the design. What is weak is the rest of the sign. When you are quickly driving by something you can't read small text or information if this sign was placed by a red light or stop sign maybe more people would be able to read it but where it was located the text was not appropriate.

3. Casual Male XL's sign is another strong sign design. Because they have a small target group they were able to focus in and create a design that their specific customers would like. The font is modern and masculine. It is also nice how they tie in the the orange bar with the orange XL. Having the XL larger also connects with the products being sold and the literal meaning of the word.

4. The Marathon Gas pump's design has its strengths and weakness's but overall it is weak in it's design. There simply is too much going on for your eye to focus on and there is a lack of flow and unity. There is a lot of typography and colors and there is no clear hierarchy. Someone that is not used to pumping their own gas could be quite intimidated by the design and layout of this gas pump. Its not as user friendly as it could be.

5. The University of Akron banner signs are strong in their design. They take in consideration that people are just quickly walking or driving by and that they are up high up so they stuck with something simple in design. I have seen banners with small type that you could never read while driving. The UA and the curved shapes look nice being repeated multiple times.

6. Flynn Environmental's design is alright but there is nothing special or anything that standouts about it. It works in hierarchy and in simplicity for the road but the type and logo is too plain that no one would remember it or see the direct connection between the logo and the business.

The biggest thing about design in the real world is that it needs to convey a message, function in its location, and stand out. Appropriateness is essential. Something can look cool but if its not functional or relates to the company its representing it is not a good design.

Form and Content 5: http://attitudedesign.co.uk/portfolio/

This print design is a poster and album cover for a Indie group, Spokes, found on the website http://attitudedesign.co.uk/portfolio by Attitude Design. The designer intended for it to have a retro feel. I think the strength of the works is the unity in design between them but they still have some variation within. It has a focused color scheme and the similar lines going throughout really unites all the page layouts. Theses lines also bring interest to the piece being one of the only graphic elements. The sea-foam, redish orange, and tan color help support the retro feel they were wanting to achieve. The composition works but isn't all that exciting since most of the pages have all the elements dead center in the page with similar negative space on all sides. The lines of the K help break up the rectangular shapes and the different warm and cool colored sides descend and ascend create a little more interest and depth. The hierarchy is clear since the title of the group is largest in scale and the album title is smaller in scale which automatically leads your eye to the group's title first. The typeface they chose is fairly modern in style and not having serifs allows the lines of the font to continue to the edge of the page. Overall I think this design is fairly strong but I don't like it for a cd album for a band. It seems more like a design for a business. There are no pictures of the band or any clues to lead you to believe its a band or even music related.

Form and Content 4: http://handtypes.com/modern7.html

This image comes from the website http://handtypes.com/modern7.html and was designed for the Boheme Publishing company whose goal is to teach graphic design. This piece is really strong because of the depth created by layering, line, and perspective. There are three main line elements that create a grid for the space. They aren't given much importance in the hierarchy but are definitely elements that gives the piece structure and depth. The first line element is a basic grid overlay that is placed behind "color theory." The next line element is the radiating lines that meet at "For Teaching Graphic Design Subjects." These draw your eye backward toward a vanishing point giving focus to the text there and again creating depth. The last line element is the set of dashed lines that are given more weight and placed more randomly throughout. This element is treated more like the text and is used to break the text up and also emphasize the different angles in the piece. The text itself is the main emphasis in the piece and creates the most depth. The text has a lot of variations in scale, typeface, and color. The scale variations create a hierarchy in the text, pulling your eye more to some words before others. Some of the scale choice is due to some words receding towards the vanishing point. I think the main reason for the typeface variations is that graphic designers use different typefaces and by showing different fonts in use it gives it more of a designer feel. It also makes overlapping areas easier to discern what word is what. Color contrast helps with this point a lot too. The color scheme is limited to just three hues of warm colors- pink, orange, and yellow, a white and black. This creates unity within and simplifies the potentially busy design. The only real design problem I see is the treatment of the actual content (the series name or title). These elements lack a clear hierarchy and place within the grid and seemed to be an afterthought. This information should be clear-cut and flowing since it is the information that is pertinent.

Form and Content 3: http://www.toddroeth.com/class/grph_210/

Under the "Meaning & Composition" lesson from a professor of typography (http://www.toddroeth.com/class/grph_210/) was an example from Josef Muller-Brockman, a Swiss graphic designer. This design is quite simple and direct but visually it works and when broken down there are more complex elements than first realized. The hierarchy is strong and how the font is placed leads your eye around to read all the elements. "Helvetica" is definitely the focal point of the piece, being the largest of all the fonts in scale and also having the most contrast. The bold white font against the bold black stripe really make the title of the typeface jump out. The location of being almost dead center also pulls you in. Small details like the H and the l in Helvetica lining up with the red diagonal stripe simplifies the piece and shows that the designer was looking at the details and had sense of an internal grid connecting the visual elements with the type itself. One of the most unique features was how he laid out the lower case and upper case letters. Most people want to divide the characters up equally line by line but he broke them up kinda randomly, more based on the graphic broken lines that they would create. It then becomes more about the type fitting into the design and making sense visually than trying to adding two chunks of 26 characters into the design. Another unique element is how he switches weights or the color of the font within the text. Although the first line of uppercase letters are not more important than the second line of uppercase letters he chose to make them bolder. He did a similar thing with the quote making "in war" bold and black, "truth" even bolder and white, and "is the first casualty" in a finer black font, all in one sentence.  This uneven distribution of weight and color actually has a purpose.  "In war" fitting in the dark red needs to be heavy because there is so much font to the right of it. "Truth" is the focal point of the sentence so it needs to have a higher contrast so it white and even more bold. "Is the first casualty" is lighter and airier so that it balances out and does not distract from the title. This style is also carried out where the author's name is and in the different weights of black lines so there is a consistency throughout. Even though this Swiss design seems simple at first glance it is all the small graphic decisions that make this design work so well.

Form and Content 2: www.inanyus.com/2007/12/data-table-exercise

I found this typographic piece on the website http://inanyus.com/2007/12/data-table-exercise.  It is a data table designed for a typography lesson. Although it is displayed small on the screen the original intention was for it to be installed with the dimensions of 3x2 meters (9.8 x 6.6 feet).  The table is really unique since it is designed with typography alone, without any grid lines like typical tables. Most audiences don't enjoy reading tables and only do if they have to, but this data table has a clear hierarchy, colorful text, flow, and variation which pull you in. The design does not compromise the purpose of informing you though.  All the information is still clear cut and easy to read. The way the text is laid out and scaled creates a sense of flow and it leads your eye around the piece, making sure you read each of the categories.  While reading tables audiences have a tendency to read the first couple columns and skip the rest but because of the flow and the hierarchy your eye is directed to all the content, reading the most pertinent information first and then the less significant ones. One of the biggest design elements is the scale of the font. The way the font is scaled not only creates a clear cut hierarchy but it also creates a sense of depth. With almost all tables repetition happens since it is column after column of information but it is nice that the color and scale of the font creates variation within it. The color scheme is very contrasting and bright and uses a lot of different colors to add more variety. I'm not sure if this color scheme is the strongest but it does look nice. I would have like to have seen a smaller palette or maybe not as bright of colors.  I'm just not sure how it would look blown up to 3x2 meters with those bold of colors.

Form and Content 1: http://melissahie.com/

 

     

I began my search at the website http://vandelaydesign.com /blog/ design/unique-website-layouts/ looking for some unique website designs.  It took me to http://melissahie.com/.  This website demonstrates a unique way of showing a portfolio and of navigating throughout sites.  

Melissa Hie is a web and graphic designer who wanted to create a site to show what she has done (her portfolio) and how to contact her if you want her design expertise.  Her website is unique in the way that you navigate through the site by sliding from page to page.  Each page on her site has a button with three-quarters of a circle and an arrow.  If you click on the button the next page slides into view.  This way it is not endless links in bars, instead you are guided through the website page by page, more like a book.  Her design leads the viewer to become more engaged in the site and read through all the information presented.  This site is very simple, to the point, and informative yet unique and pleasing.  To have both function and design is what graphic design is all about.  

Not only does the navigation work so well but other simple design elements like the typography, the hierarchy, and the color scheme are also strong.  The typography throughout the whole website is very simple and consistent.  Because the design was strong, she did not need to use complex font.  The goal of the website is to inform, so complex font would be distracting to those who just simply want to hire a good web designer.  The hierarchy also is a strong element.  Each page has a clear cut title, subhead, and/or body copy.  There is no competition between these layers of focus.  I also liked her color scheme.  She was able to use bright colors like purple, lime, pink, and turquoise but its not too bright or random.  I think by having the pages slide from one page to the other it ties the colors together and make the pages have unity.