Watkins Web 3: Blog

Posts tagged with “show and tell”

Dynamic Ways to Display Information

dots no. one
dots no. two
dots no. three
Koalas To The Max is a website in which you can hover over dots to make smaller dots. Eventually they turn into an image.

dots no. four
A similar project to the one above. It just has a different image and thus different colored dots.

data driven documents
Data Driven Documents was used to make the websites above and the Urban Water Explorer too.

urban water explorer
The Urban Water Explorer is pretty neat looking.

what do you work for
Data Viz Challenge was a visualization challenge using data in which some of the contestants used D3js from above. The entries are interesting.

Hulu Tv and Movie fun for free

Just for fun, TV and movies on your computer

Easybib, easy citations

Writing a paper and unsure about citing a web site or book, check out easybib, copy and paste your url for a correct citation.

Word count tool

word count tool

Writing a paper for a class and need to know the word count? copy and paste your text in a word count tool.

Site Designs of Interest

Good.is top screen

Good.is displays an interesting site design.

Good.is footer

The footer is also pretty cool.

Verge.com header

Verge.com, a technology site, has an especially dynamic layout.

Verge.com middle tier content

This is particularly noticeable in the way the tiered content is displayed. It is divided by threes and developed in a kind of spiral pattern using rectangles.

Verge.com footer

The design of the footer gives a simple reprieve after the dynamic design of the main content of the site.

visvim.com site design

Visvim.com plays with the idea of a pdf design as applied to a website.

show and tell

Pinterest has received a lot of press lately. This site has some similarities, but it’s great if you are constructing a home or redesigning a room. You are able to collect image ideas. You can find out more about a product or buy. You may ask a question about the products or services also.

Just showing an inner page and a hover option.

Nike skateboarding
I liked how the navigation list exploded when I scrolled over it.

Show and Tell


This site was interesting because it showcase the work up and down and side to side. I would have display what they were showing a little better but they way you navigate through the site I thought was very unique and well done.

Eight Hour Day

I love this website. I thought the website appearance reflected the style of the work really well. It was very simple and clean. I really like the use of the grid work. I think it was a great way to show case their work without overdoing it.

Keith Cakes

This website is the best cake or baker shop I have seen in a while. I though it was very classy and showed the pastries off very well. I went to this website and it make me hungry which is perfect for this store.

Useful Color and Pattern Sites


Kuler is an Adobe website that allows users to brows and submit color combinations. You can then take the colors and adjust them in the browser to get the color scheme you are looking for. It gives you the RGB, CMYK, HSV, LAB, and HEX values of each color so you can use them in a design program.


PatternCooler is a website that allows you to choose from a huge selection of patterns and make a custom colored version that will repeat horizontally and vertically. You can mess with the colors in the browser and input HEX colors if you already know what you want. The patterns range from god awful to actually pretty cool. The more basic designs, such as hexagons or stripes are useful because if you already know what you want it can save you the trouble of making a repeating pattern in Photoshop.

HTML5 Canvas

After a couple of tries I finally got the look I wanted. Give it a try yourself.

Basic html5 code

html5 basic framework

You can start a web site here with basic html5 code.

Wireframes anyone?

wireframe images

You can see any web site in wireframes. Maybe not so useful but it can give you an idea of how web sites are designed.

MediaQuery Bookmarklet

media query tester

Load this on your browser tool bar and you can see the pixel width and height of your designs.

Responsive Web Design Tester

responsive web design tester

Test all your responsive design here. It works and you can scroll through each size and device.

Kelsey Show & Tell

The first site We Heart was done in HTML 5. I really liked the format of the different sized boxes across the page and the clean typefaces.

This second site Gallery of Mo, intrigued me because of all the illustration used and how it was executed really well without being too busy.

Nathan Ford's portfolio, is one I mainly like because of the hand done navigation and headlines. It's something similar that I want for my own blog for project 1.

Jill's Show and Tell

The first site I shared is a site that is a combo blog and work projects site by a design group calling themselves The Church of London. It was created using wordpress and I really like the clean, well-organized layout. The next site that I shared, I was not too crazy about but I did like the way that the navigation to the next and previous posts are being handled. They are over to the top right and have images as the buttons. This is the site was created by a group that gathers up all the latest developments in design, fashion, etc. and posts it all on one site as a reference for other designers and is called Cool Hunting. The third site that I shared I really like. It si very clean and well-organized with a definite hierarchy of information. Unfortunately it uses flash to accomplish the dynamic pieces of the site. It is the site of an architectural firm called Gensler.

Show and tell

Agent 8 Ball

Agent 8 Ball

The Gamits

The Gamits

David LaChapelle

David LaChapelle

These sites claim to be done in HTML 5 without any use of Flash.

Show and Tell

Best Education Sites

I really like this site because it used a ton of eye-catching info-graphics. I thought it was also interesting because it was about college websites and our pretty much stinks. It was nice how the other html pages didn’t cover the entire home html page.

Icon Dock

This was a site that is powered by wordpress. It thought we might be able to use some inspiration. I thought this one was really nice how it used all application icons and evolved a ton of icons to look like a app icon. The nice thing was that you could use these icons for your own use, or you can buy them.


This is another site powered by wordpress. It is a type heavy site that showcased them as images. I thought the grid work on the blog page. It featured the type as thought it was an image. Then you click on the image of text which takes you to the permalink page. I thought this website was great!

Great resource for developers that want their designs to work



This is an experimental site written with HTML5 and using WebGL. The site runs on the Chrome browser. It does not run on Safari.

It is an interactive simulation through a landscape. It reacts to where you look. After one finishes, they may look at the technology, add their own image to the story or see others creations.

Kelsey had showed a similar site last semester involving a jog through anywhere and having it adapt google map info and images to the video.

Visit the site


This site is written in html5. It s an app to help people with celiac disease find restaurants with gluten free menus. One may search by a zip code or based on current location.

Visit the site


This is a video blog by Marco Rosella. He’s an Italian interactive designer. This contains his favorite Vimeo and Youtube posts. The site is written in HTML5 with SVG animations. You are able to switch between the 2 video sources. The wheels are styled. You can see the code by searching the CSS.

You may stay updated through his social media sites.

Visit the site

Show and Tell

Slavery Footprint

I thought this site was pretty interesting both in design and in content. Powered by HTML5 and lots of Javascript. I thought it was an intriguing way to present a survey. I liked how it gave you little bits of information along the way. I also thought it had a very nice visual element with the design.

Font Dragr

I came across this site and thought it was a kinda neat. It uses HTML5 and I'm not sure if the editable content uses the new contenteditable or not. It may use some Javascript or something. I guess it is a bit useless, but the idea is interesting. The demo did not work well in class.

The Onion: Google TV

The Onion generally makes me laugh. I really liked the approached to this site. I like how the interface is different from most websites. It's almost like a TV channel rather than a website. I like how it was just full screen video and the menu was hidden and very simple. Unlike the main Onion site.