4 Sites on Infographics for Web Developers

1 www.onextrapixel.com
In an article from this site, Bima Arafah relays the meaning of "infographic" this way:

Information graphics, or better known as infographics, is a visual representation of information, data, or even knowledge. A graphic is used when a complex piece of information needs to be described precisely, clearly and will not confuse people when they read it. Traditionally infographics are considered as visual elements like signs, graphics, maps or diagrams which are used as media to help people to understand the meaning of text-based content. This information visualization focuses on representing a particular sequence of data or specific information from statistical data. Usually it will look similar to a graphic or diagram, and nowadays infographics look more creative and imaginative.

He also briefly provides its history and gives an overview on effective infographic design. Here's an example of how an infographic can relay useful information using fun visuals which will hold the attention of your audience:

2 www.hongkiat.com
This site offers refreshing (and funny) information regarding the ins and outs of infographics. It goes into some detail on why they're necessary, how they're helpful to you as a developer, and what about them can be useful to your viewer. Here's a sample of what's on the site:

3 www.infographicszone.com

A great site to visit for archived inforgraphics for the consumer and student alike. What I like about this site is its layout/presentation -- very eye-appealing. A true testament to good design. A funny sample of its infographic content:

4 designwebkit.com

Here we have it. Bravo, designwebkit.com for getting it right. And a great big thank you for your design tips and tricks. A good example of what an infographic SHOULD be for responsive web design:

4 Examples of Simple and Stylish Navigation Menus

1 cognigencorp
has an excellent but simple nav bar. It's a pressed button option menu. I like it because it is clean, creative and easy to navigate once the drop-down bar appears.

 



2 revolutiondrivingtuition
is awesome and really simple, as it links to a single page upon pressing. I love the unusual and asymmetric layout of the nav bar. Quirky, unique touches like that can make a page appear much more seamless and thought-out.

 

  3 abduzeedo

is simple. Very simple. But classy with its dropdown, animation-style grace upon click/hover. I like the speedy display and white on black background color scheme.

 

 

 4 iipvapi

uses "colorful sloping Flash-based navgation from an Indian web design agency." I wonder if they programmed it using HTML5, Java or..? In any case, I appreciate the color and unusual creativity behind it. I can see myself using something similar because of the photograph background of the nav bar.

 

3 Web Sites and Their Wireframes

1 craigslist  has a very recognizable layout, which got me curious to see its wireframe. I figured it would look pretty busy. Let's take a look:

The wireframe: I think it looks the same. Cool!    

2 google on the other hand seemed like it would be pretty lackluster, with minimal content: 

Which its wireframe displayed as: 

3 behance that Adobe-sponsored gallery portfolio site, surely must have more to it due to photos?

Not as much as I thought it would, but definitely more than google.com had:

Oh, I used wirify for the wireframing of these sites. 

And here it is is, wirified:

4 Web Sites Where Images are the Star Attraction

1 deviantart: one of the best go-to sites for artistic inspiration no matter what genre. I've visited this site for free .psd downloads: brushes, masks, tubes, etc. A great collection of talent across the globe.

2 google art communities: not only a great place to view artists' collections (or showcase your own work), it is categorized by medium. Also, many moderators require copyrighted material be cited. I've been inspired by and have met many like-minded photographers here.

3 behance: a wonderful, collective place to showcase your portfolio or browse those of other artists. I believe you can also commission artists for works; a good option for web developers looking for original content.

4 steampunk gallery: this is a simple website concept, organized well by category. For steampunk lovers, it is a good place to look for unusual pieces and art. There's a note which says the material on the site is from open sources but not to download to your computer. This site also showcases the same type of stuff, but is meant more as a "bookmarking" site to store content. All the same, both sites are a great go-to place to familiarize yourself with what is current or trendy in the steampunk world.

5 Inkscape: a professional vector graphics editor for Windows/Mac/Linux. It's free and open source. Artists and web designers alike can benefit from this awesome design tool. I may be using it for upcoming assignments. Vector images always look amazing and are so much easier to size for publishing.

4+ CSS Properties that Intrigue Me the Most

1 background-image: these add so much to a site. It not only helps to creatively set a page apart from others, it helps to stylize without too much effort. A great way to personalize...

2 embed custom font: who doesn't like a great font that stands out; one which displays properly no matter what? I do!

3 outline style: differs from the everyday border and allows for customization. I think I can put this to good use. And this site is a great resource!

4 animation: because I am hoping to eventually include some of the Flash animation I created. Because it isn't standardized yet, you have to be browser-specific with this one.

5 filter effects: can be very useful for photos, backgrounds, etc. It seems that only Firefox supports it at this time :-(

6 image slider: this would be very handy on my Wordpress site! I love the click buttons at the bottom. 

4 Online Resources for Learning More about CSS

Site 1
CSSTutorial has tutorials (and video!) which are easy to understand and quickly apply. It also links to other useful resources. The overall setup of this site is good.

Site 2
EchoEcho is organized well and even has little quizzes to take to test your new-found knowledge of CSS. This is a good starting place with great content.

Site 3
CSSbasics has a textbook style layout with examples to cut and paste into Notepad++ if you want. Its organization is very good, and does an excellent job explaining concepts.

Site 4
SiteGround is a site with tutorials which explain CSS, its file syntax and provides an example page. I chose this site because it was recommended in a CSS google+ community <-- another great resource, by the way.

 A CSSgenerator is also a handy tool. The link provided is for CSS3, I just really liked the style of this site.

4 Examples of Web Sites I Like

Site 1 
Pinterest is a site for pinning things of interest to a personal board. It serves as a guided search tool people can use to collect links (visual bookmarks) and store or share with others. I like it because it's organized well and it inspires creativity.

Site 2 
MindBodyGreen is a wellness guide for the average person. It has articles and DIY topics written by both leading authorities and layperson alike, which appeals to anyone new to lifestyle changes. I like it because there is always something of interest and it keeps me motivated on a daily basis. It streams to my Facebook, too.

Site 3 
MyModernMet is a site I recently stumbled upon. It is a creative person's candy store in that great photography, art, architecture are showcased in an appealing way. I like it because it is fresh, new, original and keeps me current with trending photography styles.

Site 4 
TwoFoods is a gem of a very user-friendly little site which helps compares the calories, fat, protein and carbs of two different foods. It is simple, direct, clean and efficient. All reasons for why I chose it.

3 Reasons I'm Learning Web Development

1) it is an academic, vocational and social MUST
2) have always had a keen, personal interest to do so 
3) it's a great platform to develop new skills which already align with my hobbies/talents