Thursday, December 9, 2010

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.

Wednesday, December 8, 2010

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.

Wednesday, November 3, 2010

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.

Wednesday, October 20, 2010

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.

Sunday, October 3, 2010

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.

Wednesday, September 8, 2010

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.

Wednesday, September 1, 2010

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.