Monthly Archives: February 2012

Exploring Downtown Toronto – Morlock

The pictures below are a collaboration of all the pictures our group (of 6) took that day (only a small fraction of them are included, as there were way too many!) We named our group ‘wolfpack’! : )
[taken Feb 5]

Waking up…brrrrrWaking Up...

Meeting up @ Finch StationAt Finch Station

Getting a transfer…How does this thing work :o

Day pass…no comment.Posing with your Day Pass lol

A danger sign where the subway platform ends 😮TTC Subway signs 2

Another sign….it’s actually right above the other one o.oTTC Subway signs 1

Stand back! Kinda looks like a swimming pool and you can’t jump in 😦TTC Subway signs 3

Finally on the subwayInside the TTC subway

An ad inside the subway
TTC Subway ads 2

I was at Summerhill station =/
TTC Subway ads 3

When you can’t pronounce it, it means its expensive haha
TTC Subway ads 1

Another station along the route…some stations are in the open
Close to Summerhill Station in Toronto

Got to St. Andrew station!
St. Andrew station

Gettin out in the open
St. Andrew station

A sculpture around Sun Life Center…
Around St. Andrew station 4

The stuff of legendsAround St. Andrew station 3

Somewhere around St. Andrew still…
Around St. Andrew station

At a bus/streetcar shelter….that’s the streetcar in the back!
Shelter 1

Look at the change in white balance from the above image!
Shelter 2

Roy Thompson Hall
Around St. Andrew station 2

Random pigeon blocking my way!!!
Pigeon

Emily Street
Emily Street 2

Walking tall…all that was missing was a baseball bat in my right hand!
Emily Street 3

Still walking, in search of some street art not to be found on Emily Street! =/Emily Street

Java’s Daily Specials…
Java's Daily Specials

The special for that day!
Java's Daily Specials 2

This is what happens after you get Java’s special and start driving…
CP24 Van

CTV. Breaking news, literally!
Don't Drink and Drive

The Much Music SUV
Much Music SUV

Getting some pizza…
Pizza Pizza

A poster inside that Pizza Pizza
Poster inside Pizza Pizza

munch munch…
Munch Munch?

Revenge of the pigeon…what did i do to you D:
Pigeon 2

Black Market…best place to get stuff you don’t need but you buy anyway!
Black Market Signage

I wonder what he’s reading o_O
I wonder what he's reading...

…I found out -_-‘
Reading a newspaper

Black market signs all over the place…
Black Market Signage 2

You make your own sense out of this…
Shoe Person of the Year

Tough economic times call for sacrifices…
When haircuts cost $15 this is what happens...

The apes are getting smarter…its happening!!
The Active Surplus Ape

Maxin relaxin…
Active Surplus

Robots inside ‘Active Surplus’
Robots at Active Surplus 3

Cheeseeee!!
Robots at Active Surplus

hmmm…
Robots at Active Surplus 2

bunch of marbles bought from Active Surplus
Marbles from Active Surplus

Silver Snail…
Silver Snail from the outside 2

Silver Snail from the outside

Inside…
Silver Snail Poster
Silver Snail Flyers

Taking pictures of graffiti
Taking pictures of graffiti
Graffiti 1
Graffiti 2
Graffiti 3
Graffiti 4
Graffiti 5
Graffiti 6
Graffiti kingofthedot
Graffiti 7
Graffiti 8
Graffiti 9
Graffiti 10
Graffiti 11
Graffiti 12
Graffiti?

New York Subway
New York Subway

We sat inside for a bit…
Inside New York Subway

Gandhi Indian Cuisine, pretty close to New York Subway
Gandhi Indian Cuisine

Gandhi Indian Cuisine 2

Portland and Queen…not far from New York Subway
Portland and Queen

UMBRA… looks better from the outside :d
Umbra Store

Back at Silver Snail…well right across the street
Black Bull Patio Restaurant

Black Pull Patio across from Silver Snail…CN Tower in the reflection!
Black Bull Patio Restaurant 2

Some big deals going down in this town…
Buying a Hot Dog

Play ‘The Turtles – Happy Together’ and stare at this photo for best results.
He's wondering if he should eat it

It’s a trap! Friendly Stranger shop…
Friendly Stranger

Cannabis Culture Shop

A picture inside the store…Mona Lisa Behind the scenes?
Mona Lisa Behind the Scenes

Back around Osgoode station…
Statue right outside osgoode station
statue at osgoode 2

Waitin’ for the train…
at Osgoode station headin back

Ahh here it comes……..
Osgoode station

Business card on the subway seat (of that stranger store)
a business card

Reading…
so focused...

I thought we read this already :S Guy on left spotted a ghost @_@reading the NOW newspaper

I did not approve of this xD
Cheer?

Everyone saying goodbye!!
goodbye from our group

People in my group (left to right in above picture): Me, Zeeshan, Binthu, Abdullah, Jonathan, Ehsan

Long exposures!

No editing involved, just long exposures. You can see through doors!!

Long exposure 1View all sizes

Long exposure 2View all sizes

Exploring Principles of User Interface Design

Structure

The structure principle has to do with the overall architecture of your interface and how objects are grouped together.

  • Group Objects effectively
  • Navigation within the screen is important
  • Look at other applications with a grain of salt

Microsoft Word is structured in a way so that similar tools are grouped into tabs, and further organized into sections within the tabs reducing the time required to find a specific tool. Navigation is quite simple as Word provides you with several methods to perform a single task, letting the user utilize the software in their own working style.

Simplicity

Simplicity in UI design refers to how understandable the interface is when users perform common tasks, such as providing shortcuts or hotkeys.

  • Consistency
  • Don’t create busy interfaces
  • Align Fields effectively

Adobe Reader keeps things incomplex as one toolbar gives you access to all the common tools, while advanced options can be accessed from the menu bar. It keeps the ‘page thumbnails’ panel minimized to the left providing the user with an option on how to scroll through the pages.

Visibility

Users should not be confused or distracted by unnecessary options or information, and options/items should be clearly visible.

  • Don’t create busy interfaces
  • Word your messages and labels effectively
  • Follow the Contrast Rule

FIFA 2012 (PS3) gives you a concise start menu which lets you instantly access any gameplay modes and displays your profile on the top. Current soccer news is also mentioned at the bottom in a marquee, but it’s small enough that it doesn’t distract you from the menu itself. Menu labels light up as you hover over them, and advanced options are present in submenus under each menu so you’re only exposed to the information needed.

Feedback

The interface needs to provide user feedback in a clear, concise manner which is easy to understand. It needs to keep the user aware of any actions, changes of state, exceptions or errors that occur as a result of interaction

  • Expect your users to make mistakes
  • Your design must be intuitable
  • Word your messages and labels effectively

Skype makes clever use of balloon-like alerts within the interface as well as several variations of ‘popping’ sounds to notify the user about the changes of state. The user is notified when they receive a message, a call or if another user goes offline or comes online.

Tolerance

Tolerance is concerned with the flexibility of the interface. The interface should allow for the cost of mistakes to be minimal, providing features such as undo and redo.

  • Expect your users to make mistakes
  • Justify Data appropriately
  • Your design must be intuitable

Notepad keeps things manageable for note-taking users concurrently providing undo and redo options. Users are also able to utilize the ‘word wrap’ feature to save on desktop space allowing you to multi-task while taking notes.

Reuse

The reuse principle is critical in how the internal and external components of your design are reused, reducing the need for user reconsideration.

  • Explain the Rules
  • Set Project Standards
  • Don’t create busy interfaces

Windows Media Player consists of a linear interface as it stays consistent to its purpose letting you play media without cluttering application space. The simple design and recurring functions for media files reduces user reconsideration on how to use the software.

[assignment partner: Ehsan Ramezani]

Textures – Artifical and Natural!

6 Natural textures:

A bunch of rocksRocks

Another rock!! Got this reddish tone to it….
Red rock

Guess what this is…Grey rock

And yet another rock…damn, I must really like rocks? Yes, this rock really looks like this.White rock

Grass, you deserved it after all those rocks were thrown at you!
Grass

My hand, send me my my palm reading!!
Hand / skin

Click “Read the rest of the entry” below to view the artificial textures!

Read the rest of this entry

Elevator Floor!

An interesting elevator floor? The ‘cp1’ type and the circular edge is embossed.
Click the image to view a larger size (redirects to Flickr in new window) [Feb 3]

Elevator!

Depth of field – door handle!

Portraying low depth of field —> low f-stop number + adjusting shutter speed (exposure control).
It’s the door handle for my room!
Click the image to view a larger size (redirects to Flickr in new window) [Jan 12]

Door handle

White balance!

Using white balance to get accurate colors in your image. Taken in the Fine Arts building at York University, Toronto.  (Click any image to view it larger, redirects to Flickr) [feb 15]

Playing around with different white balance settings:

york_finearts1-1

york_finearts1-2

york_finearts1-3

york_finearts1-4

Custom white balance used for the second image of the dog!

york_finearts2-1

york_finearts2-2

Another art piece in that building…

york_finearts3-1

Setting up custom white balance, didn’t actually use the bottom two as I needed to fill the entire picture with the paper so I had to do it manually later on.

wb_2

wb_1

That’s my photography prof down there!! Hope he doesn’t sue me for uploading this image 😀

york_finearts3-2

One of the images on top, in which you see people holding up blank white paper, was used as the white balance custom setting for this one.

york_finearts3-4

It worked out a lot better when I just held up the paper up close to the camera while standing close to the wall you see in the image, and then using that as the white balance for this image. I see a horse!! what do you see?

york_finearts3-7

Downtown Toronto!

A shot of downtown Toronto taken at my friend’s place. [ 3rd Feb, original image size 5184×3456 pixels]
Click the image to view it in (1024×683) size, or click here to view in (1800×1200) size.
Other sizes

Downtown Toronto (resized)

Kobo Touch Edition – Full Review

Linked post here
Click here to download as Word document (Word 2007/2010 compatible .docx format)
————————————————————————————————–

Kobo Touch eReader Review

kobo_ereader_touch_edition

Pictured above, the Kobo Touch Edition

Company Overview

Headquartered in Toronto (Canada), Kobo was founded in 2009 with the aim of entering the eReader market which seemed to be dominated by the Amazon Kindle, Sony and the Nook by Barnes&Noble at the time. Around a year after Kobo announced their first eReader, the Kobo Touch was revealed to the public on May 23, 2011.

System Specifications

The new Kobo was quite an improvement over its predecessor, utilizing a 6-inch E-ink touch screen, having reduced weight at the same time increasing overall storage capacity.

Available Colors Lilac, Blue, Silver and Black
Wireless Connectivity 802.11b/g/n
Processor Freescale 508 Processor
Device Size 114mm X 165mm (4.5 in. X 6.5 in.)
Device Depth 10mm (0.4 in.)
Weight 185g (6.5 oz.)
Diagonal Display Size 6″ Pearl high contrast E Ink display
Screen Grey-Scale 16 Level
Storage 2GB – 1GB is available to store content (over 1,000 eBooks)
Memory Expansion Up to 30,000 eBooks with a 32 GB SD Memory Card
Connectivity USB, Wi Fi
Battery Life 1 month (Dependent on individual usage. Actual results may vary.)
Supported File Formats Books: EPUB, PDF and MOBI
Documents: PDF
Images: JPEG, GIF, PNG, BMP and TIFF
Text: TXT, HTML and RTF
Comic Books: CBZ and CBR
Pre-Loaded eBooks 15 Hand-Selected Free Previews
Fonts 7 Font Styles, 17 Available Sizes
Software New & Improved Free Kobo Desktop Software

Software Overview

The only software associated with the Kobo Touch in terms of installation is the Kobo Desktop Software which is used to setup the eReader and associate it with your Kobo user account. The application also lets you build your own digital library and shop for eBooks on your Mac or PC.

awardsUnlike the previous Kobo, the Kobo Wi Fi, the Touch edition also comes with a beta browser that might’ve been Kobo’s way of experimenting to provide the users with a proper browser in their next Kobo model, which came out to be Kobo Vox. General public feedback has shown the browser to be a little tricky and sluggish at times, but after all it is meant to be a basic web browser and was more of a side-feature to their product.

Reading life, a social networking-like nifty tool, is also part of the reader. It tracks your reading stats in detail, letting you know when your prime reading times are as well recording your reading speed and average time spent per books. On top of this, readers also earn awards on completing certain tasks on the reader in the form of badges, in a sense encouraging you to spend more time reading.

Kobo, like the Barnes&Noble and Amazon, also offers apps for the iOS, Android, Blackberry and even WebOS so you can easily sync your Kobo library across any of these devices; however, you cannot sync eBooks you externally added onto your Kobo eReader aka. which were not bought from the Kobo store.

There are also quite a few neat extras hiding in the Touch, one of them being a pre-loaded Sudoku game under the settings menu on the 4th page of the ‘About Kobo Touch’ option. One of the names under the ‘Special Thanks To’ credits on the last page has a smaller font compared to the others, tapping it starts the game! A sketchbook is also included where you can scribble notes and save them to your library.

Physical Interface

As previously stated in the system specifications, the Kobo Touch has a crisp 6-inch E-ink Pearl display using 16 levels of grey. What E-ink really does is create a contrast ratio that resembles that of a paperback book, even letting you read the text and graphics in direct sunlight.

On top of the 1GB storage space for content, the Touch also has a slot for expandable storage on its left side; users can insert up to 32GB MicroSDHC cards into the slot, allowing you to store approximately 30,000 books on your device (sounds like enough content for an average user).

Like the Nook from Barnes&Noble, the Kobo makes use of the same Neonode’s zForce infrared touch technology. Due to Kobo making the move to a touch screen interface, it was able to make the device much smaller in size and reduce the weight at the same time. As Kobo puts it:

The Kobo Touch eReader has just one button, making navigation easy. Books don’t have keyboards – neither should your eReader.”

Communication/Network Capabilities

Arguably the most convenient feature of eReaders like the Kobo Touch is the fact that you could be anywhere at all and as long as you have WiFi you’d be able to download books onto your account. Add the fact that it supports all current wireless standards as well as 802.11n which is not fully finalized. It provides the user with peace of mind knowing that their investment will not get outdated anytime soon as far as network capabilities go.home

Users also have the option to load external content such as PDF files or e-pub (extension .epub) files and transfer them to their kobo reader via the Micro-USB-to-USB port at the bottom of the Kobo Touch.

Considered to be a downside by most users, the Kobo doesn’t seem to have PC-free operation like the Amazon Kindle. However, once your kobo account is setup you’re able to sync your library with devices such as your iPhone, Android or Blackberry phone or even desktops or tablets.

Read the rest of this entry

Audi Photoshop Website Layout – v2 :D !

Here’s the original Audi Layout we created in class (just redirecting on my own blog):

https://digitaleffectx.wordpress.com/2012/01/27/photoshop-website-layout/

A useful list of Photoshop shortcuts provided by my teacher (ITS ALL ABOUT SHORTCUTS PEOPLE!!) [for both Mac and PC] :

http://www.mediafire.com/?32eb6f1taoc8i4p   (PC shortcuts – Photoshop CS5)
http://www.mediafire.com/?p9fo8g8zyz1t4pd  (Mac shortcuts – Photoshop CS5)

Source files for this project (if anyone wants to take a look):

http://www.mediafire.com/?7cby1fa9tj9upsz


Second Audi Layout

The images had to be shrinked a lot to fit in the small column on here. Click any to view them full-sized, it will redirect you to my Flickr.

Here’s some insight on the second audi website layout which we had to create ourselves:

Starting off with the file from the previous project, I selected the center-point image. From there, I used a rounded rectangle for the top menu and added a few logos (to decide on one later). Used the stroke effect to get that gray outline on the top and bottom around the image!

mainimage-stroke

Adding a rounded rectangle as a way to create round rectangular quick links at the bottom of the image:

bottom blocks

Sadly, that didn’t work out as when I inserted the image on top of it, the corners looked terrible. I finally ended up using this tutorial from Matt Thomes so my image would instead serve as the rounded rectangle:
http://matthom.com/archive/2004/09/10/fast-rounded-corners-in-photoshop

^ If you end up using that trick to get fast rounded corners and you want to get the result on the same page, ignore the last step under ‘Almost Done’. Instead, click on your image layer and then click the ‘add layer mask’ tool which is on the bottom right and looks like this:

layer-mask-tool

Once done implementing that, I tried to alt-drag and make 2 clones but apparently that didn’t work out as I couldn’t replace the image for each of them. I had no groups but just an image itself which served as each block. To get a better picture:

bottompart

The 3 links are just images with a mask on them. Since replacing the images on the clones didn’t work out, I just deleted the other 2 and repeated the process separately for each one. The top menu seemed to have too much empty space and didn’t look balanced, so I added an extra menu there. On top of that, I gave the 3 bottom images a ‘difference’ blend mode on the stroke so they change colors as it goes from the grey stroke of the other image to the background (look at the border of the image) Once finished with that, I had my images and the menu pretty much set up:

layout-final-2

All I did next was add a few text layers under those 3 images, add some final touches and make sure everything was lined up right according to the guides and the grid. Ctrl-click multiple layers, then use the selection tool (v on keyboard if not in selection tool mode) and you’ll see the align options on the toolbar under the file menu. And there you have it!!! Enjoy!

final-grid

End Result

You won’t be able to see the image properly due to the white background. Click here or on the image for a direct link view it in flickr’s lightbox!

final

Self-Potrait!

Tried out a bunch of ideas, then got my friend to take pictures of me playing table tennis and I thought I’d stick with that! Changed the tone curve, saturation and luminance of the RAW file in Adobe Camera Raw and that was about it! This was part of a photography assignment. Picture taken with a Canon T2i.

[Click on image to view full-sized: redirects to Flickr]

Self Potrait - table tennis

Stina Persson Inspired Art!

My attempt at trying to create something inspired from Stina Persson’s work:

[Click on image to view full-sized: redirects to Flickr]

Stina Persson Inspired Art

%d bloggers like this: