The first step was to sketch the draft layout of the page…

The next step was to get everything in photoshop, once I figured out what menu items I wanted and how I wanted the different graphical elements laid out. The logo and tag lines were easy enough to figure out, all were a play on the word “different”, except with the “misspelling” (Niels Diffrient’s surname is actually spelled that way).

Next step: pick a background and setting. I wanted something luxurious yet mysterious, functional and with depth. So a dark room would be perfect, with some nice wallpaper. I wasn’t satisfied with that, so I threw in a spotlight for good measure.

The next phase was to figure out a way to succinctly, effectively, display the major selling points of the product. I chose a minimalist approach, allowing the chair to “sell itself”.

The best way to bring the design all together was to use Adobe Flash, with some animation and other graphical effects. At this point, I realized that the “designer” link wasn’t really necessary, so I removed it.

And voila. finished product! http://lab.weareapostrophe.com/diffrient/

The concept is fairly simple, and very effective in minmizing the amount of code and images needed to create attractive menu tabs for navigation through web sites.

The first step involves creating the one image that will be used for the regular state and hover state of the tab, placing each one under the other. Once this is done, the requisite CSS rules are created for the menu items to be represented as tabs. The trick is to shift the position of the images used as backgrounds for our menu items using CSS, whenever the mouse rolls over or away from the tab. The resulting effect is a seamless transition from one state to another with less loading time and designer headache.

Many sites, for example Ask.com, have used this approach to serve all their images from just one file, producing greater efficiency while accessing their site.

As a kid growing up, I wouldn’t have ever made the correlation, but there was something about Roy Forrester, forecaster for Jamaica Broadcasting Corporation, standing in front of clouds, sun, and aerial shots of Jamaica that always fascinated me.

How’d he do it? The answer was revealed to those not in the know at Research Day at the University of the West Indies a few days ago, when CARIMAC introduced visitors to the concept of the “green screen” and chroma keying, using Final Cut Pro. The notion is simple enough: place the subject in front of a green background, and then use the editing software to remove everything green from the shot. The colour green is used because it is considered the least similar to natural skin tone. Martians, however, would have a problem, as their green skin would be obliterated with the rest of the background once the chroma key is applied. Humans dressed in green experience similar results.

Once the chroma key is applied, the resulting image is overlayed against any desired background, and voila, instant teleportation to the skies.

Now if I could only figure out why he was wrong all the time…

Granted, when I first heard it, it was in Russian. But it has stuck with me ever since, and it basically encourages me in whatever I do as part of this course. The fact that design has, and will continue to make a difference in the lives of human beings the world over, is more than enough motivation to continue the work I do.

While he may not be the author, Art Lebedev is the first person I heard with the quote. His studio’s work has always been an inspiration, as it is fuelled by functionality and simplicity.

CSS, or Cascading Style Sheets, are used by designers to paint the uninteresting canvas that is their HTML page with bright colors and images, and to aid in their display and positioning on user screens, as well as for printing and the visually-impaired.

CSS uses rules to instruct browsers how to display HTML elements. The elements may themselves have identifiers known as ids and classes, which link them with the CSS rules meant to be used for their display. Within these rules one may specify key-value pairs for various attributes of the elements to be displayed, such as background-color, font-size, or position.  For example:

body {
background-color: red;
}

tells the browser to fill the background of the body element of the page with red.

CSS Zen Garden illustrates the power of CSS, by allowing users to create multiple designs from the same basic HTML page. In an assignment, I was able to change the look and feel of the original CSS Zen Garden page from this:

to this:

The language is simple to use, and is more often than not an instruction set for Internet browsers to allow them to display text and images on user screens. HTML achieves this by separating commands using tags, whch prompt the client computer to react in a particular way to the information that will follow. Tags are made up of elements, or the name of the tag, and atrributes, which are key-value pairs used to characterize or customize a particular tag. A typical HTML page has the following structure:


<html>
<head>
<title>My first page</title>
</head>
<body>
Hello world.
</body>
</html>


Even the cheesiest of ideas, when presented well, can stir the response you need to get going. In the creation of a successful business plan, it’s important to convey your ideas as clearly as possible, and there’s no better way of achieving this than through the use of illustrations and graphical representation.

As part of the Illustration module, we were asked to come up with a business plan for a new company to put to none other than Mr. Trump himself, who Danah apparently has some connections with. To complete the plan, we would need a logo, a interesting character to go along with it, and a poster to draw attention to our new business.

The logo is perhaps the most important of these elements, as it needs to be simple, yet memorable, so your business and what it stands for can be quickly identified by your target audience and the wider public.

I chose to use very bright colours and large block text for my logo for a new Courier Service, Docucentre and Business Concierge all-in-one. As one can imagine, coming up with a logo to encompass all these services was challenging, but I’m satisfied with the end result.

If my Art teacher were dead, she’d be turning in her grave upon hearing what I do for a living, and study now. Ms. Lynch is still alive, however, and one day I’ll have a sit down with her, perhaps over a drink, and ask why she failed me three years in a row in Art class. Maybe then I’ll have a better appreciation for the work I do now, and improve on my apparent lack of the basic principles of design she sought to instill in us back in the day.

I will admit. I cannot draw to save my life. I think it’s because I lack the patience needed to work with a pencil and paper. But give me a mouse (or Wacom tablet) and Illustrator or Photoshop, and I can work wonders!

In the illustration module of the course, our favourite graphic artist, Danah Cameron, showed us a few tips on how to express your ideas on paper,  and on screen, using Adode Illustrator. When broken down into it’s smallest components, drawings become easier to execute. It’s all lines and shapes at the end of the day. Utilising the techniques she taught us in class, I was able to create some interesting illustrations, such as the one shown below, featuring Mr. Squarepants himself.