Archive for April, 2010

On creating online portfolios + finding inspiration

Smashing Magazine offers some helpful tips on how to create an effective online portfolio –Show ’em your stuff!

Looking for inspiration? … Here are some ideas on where to look.

And here are some tips for creating creative résumés …. (Thanks, Laura! :))

And finally, Smashing Magazine gave this showcase of websites from around the world (wide web)!

Advertisements

Swiss Miss: on design

A good friend of mine at MIT sent this blog to me: Swiss Miss … There’s some really fun stuff on here! (Thanks, Jonas! :))

Web 2.0

Web 2.0

Although the term, ‘Web 2.0′ (2004–present) seems to suggest a new version of the Web, technically, it isn’t. The only difference is the way in which software developers, web designers and end-users use the Web. According to wikipedia:

‘Web 2.0 is commonly associated with web applications that facilitate interactive information sharing, interoperability, user-centered design,[1] and collaboration on the World Wide Web. Examples of Web 2.0 include web-based communities, hosted services, web applications, social-networking sites, video-sharing sites, wikis, blogs, mashups, and folksonomies. A Web 2.0 site allows its users to interact with other users or to change website content, in contrast to non-interactive websites where users are limited to the passive viewing of information that is provided to them.”

The term came into being at Tim O’Reilly’s O’Reilly Media Web 2.0 conference in 2004.[2][3]

Here’s a useful Web 2.0 Design Guide, by web design from scratch, for tips, trends and tricks to design for Web 2.0.

Using Google Analytics

Since the incarnation of Web 2.0, the Web has become not only a vast collection of resources for information on just about any topic you can imagine – it is now a wide-spread social phenomenon with great potential for designers, small business owners and content creators alike! A good idea on the web can *and does* –spread like wild fire!

How can you, as a designer, ensure that your site not only stands out among the myriad of websites on the Web, but also know how your site is being used? To understand how your site is fairing on the Web, you can track and measure your website’s performance with Google Analytics! The trick is to be smart about how you design your site from the get-go, and to market it effectively through social media networks. Once you have done those two things, you can monitor your site’s performance with Google Analytics. Here’s how:

According to ‘The Missing Google Analytics Manual‘, there are four components to effectively market your website:

  1. Attraction: How do you attract users to your web site?
  2. Retention: How do you hold your users’ attention and keep their interest within the site?
  3. Conversion: How do you convert a users’ actions into transactions?
  4. Measurement: How do you measure your website’s performance, including traffic, referrals, most popular content, and so on  … ?

First, create an account with Google Analytics. Once you have done this, it will generate a unique code identifier that looks like this bogus account: XY-1234567-8. Now you can add a tiny <snippit of js code> called Google Analytics Tracking Code (GATC) to your site to begin tracking, so you can record and monitor your site’s performance.

To include basic Google Analytics code within the pages of your website, paste the following javascript into your website. This code consists of two parts: ‘a script tag that references the ga.js tracking code, and another script that executes the tracking code.’ (For more advanced Google Analytics functionality, visit GATC’s code manual, to learn how to tweek the code for your site. But note that you should know how to code, in order to use this site.)

For the first part of code to reference the tracking code, copy and paste the code below into the web pages of your site that you wish to track:

<script src='http://www.google-analytics.com/ga.js' type='text/javascript'> OR

<script src='https://ssl.google-analytics.com/ga.js' type='text/javascript'> (for a secure page connection)

And now for the second part, to execute the tracking code, copy and paste the snippit of code below:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try{
var pageTracker = _gat._getTracker("UA-xxxxxx-x");
pageTracker._trackPageview();
} catch(err) {}</script>

Once you have plugged the necessary code for Google Analytics to track your site’s performance, it should begin tracking.

To see how your site is doing, login to Google Analytics and click, ‘View report’ for your website’s profile. Once you have done this, Google Analytics will show you a dashboard with your site’s informatics.

Understanding the Google Analytics Interface:

Google Analytics screenshot of a bogus website

The Google Analytics Dashboard is made up of the following widgets:

  • a Calendar with a line graph representing the time line specified
  • Site Usage , including how many visitors and pages were viewed on the site
  • a Visitors Overview, including technical information about what browser and connection speed visitors used to view the website
  • a Map Overlay, representing where visitors accessed the website from. (You can drill down from country to city, for more specific information about your visitors’ location.)
  • Traffic Sources Overview, with a pie graph representing the per centage of visitors who found your website via a Search Engine, or a Referring Site or through Direct Traffic.
  • Content Overview (what content visitors access within the site)
  • Direct Traffic

more to come soon …

lynda.com: a great resource to help you learn, master, and apply digital tools and techniques.

I learned about educator and graphic designer, Lynda Weinman back in the day of web-safe colours. Lynda was the first to painstakingly identify the 216 of 256 possible browser-safe colours in both hexadecimal and RGB. At the time, this resource was essential to designers, as colour was less predictable onscreen –depending on your choice of colour and how you were viewing (i.e. browser or platform).

Now-a-days, browser-safe colour is less of an issue but lynda.com continues to be a great resource for learning tips, tools and techniques for anything web/ graphics related.

To keep up-to-date on the latest, greatest trends and techniques in web and graphic design, visit: lynda.com
Lynda.com’s lbrary of video tutorials are well worth watching!

Enjoy!

Visual search engines

Robin Good’s Top Visual Search Engines:
The Most Interesting Ways to Visually Explore Search Engine Results

MIT: Museum + Media Lab

MIT Museum

I visited the MIT Museum in November, 2008 and was blown away by what I saw! Their creative use of technology was truly inspiring! It was not *just* technology, it was art!
Working at the intersection of art, science and technology –you can’t help but feel like you’re in a digital renaissance at a technophile mecca!

During my visit, I shot some photos including this hologram of Keith Haring.

MIT Media Lab

Founded by Nicolas Negroponte and Jerome Wiesner in 1985, MIT’s Media lab is a leader of innovation in technology.

For Negroponte, “Innovation comes from differences. Lateral thinking is key, because ‘incrementalism’ is the enemy of creativity. By juxtaposing people from very different backgrounds, new ideas are bound to emerge.”

Similarly, Wiesner believed, “we cannot hope to solve the problems facing us without a greater understanding of the modern world, based on the integration of knowledge.”

MIT Lab’s philosophy is to inspire the innovative use of technologies through passion and creativity that aims to help people. It fosters a “unique culture of learning by doing, developing technologies that empower people of all ages, from all walks of life, in all societies, to design and invent new possibilities for themselves and their communities.”

The One Laptop per Child is just one of so many amazing and inspiring projects, born of MIT’s Media Lab! –Now that’s technology with heart!

MIT Media Lab
Media Lab’s demos and downloads

References:

Negroponte on innovation and the MIT Media Lab. Momentum, MIT Media Lab

The MIT’s Encyclopedia of Cognitive Science, by Robert A. Wilson, Frank C. Keil is a great resource for anyone interested in HCI design!

The Etymology of Design: Pre-Socratic Perspective, by Kostas Terzidi, MIT Press, 2007