Sunday, February 20, 2011

Reflections

Completing this assignment, I understand better the issues and challenges faced by designers today. I always had the impression that design was an art, but my research and this course had led me to understand that there is also a science towards it, as shared by Jakob Nielsen in his studies. 

I had always thought writing journals were a waste of time – blogging definitely fell under that category. Then, we moved into the 21st century and all the of sudden, bloggers were mini celebrities who could earn a living just by posting advertorials on their blog, and signing endorsement deals like local blogger celebrity Xiaxue, 



bloggers are also sent luxury items just so they’ll blog about it. Of course, there’s also the ever-witty “Blogfather” of Singapore, mrbrown who provides a running commentary on social and political issues mainly of Singapore.

Now, I look at blogs (and bloggers) differently. 

This activity has thought me how to use design, layout and multimedia inputs to my advantage to make my weblog more interesting and hopefully interactive. Much time was spent planning, researching and finally laying it out. It was time all well spent and i hope you find my posting interesting.

Cheers!

Leonard


Design Differences Between Print and Web

Jakob Nielson wrote in 1999 about the differences between Print and Web Design and states that the differences are in the design of dimensionality, navigation, response time, resolution, canvas size, multimedia, interactivity and overlays.

He says “Respect the Differences”, and states that anything that is good as a design is more than likely to fail as a web design. The differences between the two medium are great and one must approach the design differently for each medium, focusing on utilizing the strengths of each while minimizing the weaknesses.

In print, the design is 2-dimensional with the focus on the text layout. For web, the design is both 1-dimensional and N-dimensional with the focus on the scrolling experience.

Taking the Asian Wall Street Journal (AWSJ) and its online counterpart as an example, we can clearly see that what Nielson states is true.

To navigate the online AWSJ for news, I would have to scroll up and down the page and click the various links to gain access to other pages and stories. Response times in getting news varies, depending on your Internet connection speed, computer and server response. The print publication, on the other hand, gives you the instantaneous response you would like, with just a flip of the page. Furthermore, the online canvas size is limited to the screen size, unlike print, which gives designers the freedom of a broadsheet to be creative with.

Screenshot of the AWSJ

Comparing the online AWSJ to the print version, it is very natural for my eyes to be drawn to the top leftmost corner of the page (main picture) and then to scan down looking at the next biggest headline and again downwards, completing the N-dimensional process. In order for me to “navigate” around the newspapers, turning of the pages is required. Despite print’s ability to outshine the web in terms of response time, canvas size and resolution, it lacks the interactivity and multimedia features the web can boast of.

WSJ Print version                                      WSJ Print version with N-Dimension

In this advanced digital media age, those features are required to engage and keep readers interested.

References  
Nielsen, J, 1999, Differences Between Print Design and Web Design, viewed 21 February 2011, <http://www.useit.com/alertbox/990124.html>

The Impact of Online Media

With the convergence of technology and information, society has since become very much dependent on the Internet. Online media has affected nations and how political parties communicate their party agenda to the masses. With more and more people on the move, it is a natural progression for the masses to move away from mainstream media only and adopt online media.

Facebook is one good example of how people today connect and communicate in our digital society. Almost all mobile phone manufacturers now have apps that help users connect through their phones. Friends are made and updates on personal information are all done through it in a blink of an eye, with a press of a button. It has reached an impressive 500 million user base and has become so integrated into our lives that some swear they “cant live without it”.

Facebook's User Growth

Facebook's World Wide Growth

Another example is Wikileaks, the now infamous whistle-blowing website. The information it has “shared” through the web has recently left many governments, especially the United States of America, racing to do damage control. By leaking confidential and/or secret government cables, many secrets, truths and lies are now out and has potentially damaged many foreign relationships between countries.

Screenshot from WikiLeaks's Website


In Singapore, reported by the Temasek Review, an online newspaper / blog - Since Datuk Seri Najib Razak assumed the office of Prime Minister of Malaysia, Singapore and Malaysia have been experiencing the warming of diplomatic ties. But for how much longer? Wikileaks leaked a diplomatic cable between Singapore’s Foreign Ministry and the U.S. to the Australian newspaper, Sunday Morning Herald. They were quoted to be making disparaging remarks about the Najib administration, which may also affect US foreign policy and attitude towards Malaysia. How this will turn out, we are still unsure, but this is another very good example on how massive an impact online media has on the world - it brings with it immense knowledge and knowledge is power.
Screenshot from Temasek Review's Website

It is, without a doubt, that online media has become one of the most powerful tools of this era.

References
Temasek Review, 12 December 2010, WikiLeaks: Singapore diplomats told US officials Malaysia lacks competent leadership, viewed 20 Feburary 2011, <http://www.temasekreview.com/2010/12/12/wikileaks-singapore-diplomats-told-us-officials-malaysia-lacks-competent-leadership/>

WikiLeaks, viewed 19 Feburary 2011, <http://213.251.145.96/>

Friday, February 18, 2011

White space can be “positive” space

When I first started work, it was as an Account Executive with a design agency some 8 years back. The projects I contracted for were mainly direct mailers and my clients wanted them chock full of information, images and details – every millimeter had to be utilized. Then, six months into the job, I handled an advertisement layout project for a luxury clothing brand. Despite having seen such advertisements in magazines and newspapers, I was still speechless at the difference in layout – there was minimal text, and much white space. The advertisement was so effective at conveying the brand’s luxury, elegance and sophistication.

A good example is the Tiffany & Co. website.

Screenshot of T&C website

As defined on Book Rags - "White space, also referred to as negative space, is the portion of the page which has neither text nor graphics. It doesn’t necessarily have to be white in colour, just left unmarked.

That said, white space shouldn’t be merely considered blank space. As it helps to break up text and graphics, it provides visual breathing room for the viewer and makes a page less overwhelming.

For many publications such as newspapers, yellow pages advertising and some magazines, page space is at a premium and every little bit of it is required to detail vital information. To avoid confusing the viewer and easing the difficulty of reading, some designs compensate for this problem through the careful use of leading and typeface.

With judicious usage and a proper balance between ink and white space, designs actually benefit more from the presence of white space than if it were cramped with information and therefore, difficult to read".


In Keith Robertson's words, "In fact, white space can make or break the effective transmission of image and text". 


References
Book Rags, White space (visual arts), viewed on 13 February 2011, <http://www.bookrags.com/wiki/White_space_(visual_arts)>


Robertson, K, 1993, On White Space: in Graphics Design, viewed 15 February 2011, <http://www.logoorange.com/white-space.php>

Thursday, February 17, 2011

Reading PDFs online

PDFs are one of my worst online reading nightmares.

Firstly, I have to wait while downloading the document. Woe betide me if it is a huge 12MB file and I’m accessing the Internet via my snail-speed mobile modem.

Then, I have to pray this document doesn’t cause my computer to crash because invariably, opening the Adobe Acrobat Reader via my web browser uses up more computer memory than I have to spare.

If I get lucky and am able to view the PDF, it’s a challenge to navigate because it wasn’t designed to be read as an online document, but as a print document. The font size can be so tiny that I need to zoom in 200% without needing a magnifying glass.

Jakob Nielsen got it right when he wrote: PDF: Unfit for Human Consumption.

He says, considering the poor usability of PDF for online reading, designers should avoid presenting information unnecessarily in PDF, saving this format only for documents users are likely to print.


References
Nielsen, J, 2003, PDF: Unfit for Human Consumption, viewed 16 February 2011, <http://www.useit.com/alertbox/20030714.html>

Wednesday, February 16, 2011

Still on the topic of issues faced in the web, I found a youtube video about CSS Optimisation teaching us how to add to the site's design and usability when done right.





Copyrights on the Web

As I am still on the topic of ethics, my research led led me to an article written by Kristina Pfaff-Harris, she states that with the Internet readily available to many, the global accessibility of online resources brings up many issues in how these resources can be used. One of the more common issues is that of copyrights. Many people see work published on the Internet as public domain, and do not view it in the same light as the same material published on paper.

While copyrights exist not to restrict access to works but as an incentive for creators to retain control over their works and therefore keep creating more works, we need to understand they exist for good reason. For example, if my works were constantly used without my permission and plagiarized, I would be very frustrated and may stop creating further works altogether.

Some guidelines of “Acceptable Use” have been established although this varies in the opinion of many web page creators. For some, "acceptable use" is limited to viewing the pages. For others, it is completely unlimited. In general, linking a page to any other page on the web and adding the title is always acceptable. Putting your work or information on the world wide web is similar to having your phone number listed on yellow pages and since anyone can find it, they can link to it.

But when in doubt about possible copyright infringement, I’d say to ask the site administrator.

References
Pfaff-Harris, K, 1996, Copyright Issues on the Web, viewed 10 February 2011, <http://iteslj.org/Articles/Harris-Copyright.html>

Tuesday, February 15, 2011

Rule of Thirds & Lead-in Line

The rule of thirds is a basic principle in photography and graphic design. It states that the use of this rule to compose a design, photograph or image can be made more interesting visually by dividing the page into thirds vertically and horizontally equally. Position important objects at the one or more of the intersections of the lines.


Image from about.com


The lead-in line can be visually important to any viewer, helping them navigate their way through an image. The effect of such a line can be presented in many ways from a zig-zag or s-shaped, leading one from the focus point out of the picture. 



 


Lead-in lines are defined by Liza Masoner as lines within an image that leads the eye to another point in the image, or occasionally, out of the image.


Since we are on the topic of images I would like to share a video off youtube. How you could improve your designs, images and photographs with these 2 simples rules, the rule of thirds and lead in line.


References
Bear, J, B, 1997, Use the Rule of Thirds - Compose your page in thirds, viewed 8 February 2011, <http://desktoppub.about.com/cs/pagelayout/qt/rule_of_thirds.htm>


Masoner, L, 2007, Leading Lines, viewed 8 February 2011, <http://photography.about.com/od/gloss3/g/LeadingLines.htm>

Improve your photos with two simple rules

The Ethics and Aesthetics of Image Manipulation

Recently I read with some amusement the recent uproar over a local hairstylist’s manipulation of a photograph – he superimposed his image alongside that of actress Nicole Kidman’s. With this photograph, he falsely claimed to have styled Nicole Kidman’s hair for various public events and used that to advertise his hair salon.

Pic on the left: Nicole Kidman with local hairstylist Jonal Chong: Pic on the right: orginal - Nicole Kidman in the same pose and dress with Spanish director Alejandro Amenabar

Many of us think that the manipulation of images was only made possible with Photoshop. While the software certainly makes manipulation easy, there have actually been fake photographs since the invention of photography.

Historical Image Manipulation
The image below was taken in 1917 by 2 young girls in England, with a simple camera. Some people today still believe the photograph is real.

A "Fairy" photograph from 1917 from Cottingley, England by Elise Wright and Frances Griffiths

With digital manipulation possible, there is virtually no limit to what can be done to an image. I like to correct my photographs to accentuate the aesthetics – brighten it a little, sharpen it up here and there. Occasionally, I entertain my toddler son by superimposing whimsical additions such as a bow-tie or rabbit teeth over photographs of him.

The important questions when we manipulate an image are, why are we doing this, and what are our purposes and intentions?

How ethical is it to manipulate the image?

I believe the answer is if the picture is taken for personal or artistic purposes only, then pretty much anything goes because only aesthetic considerations come into play. Manipulation only becomes a problem, and a question of ethics, when the artist or photographer lies about his motivations, methods, and conclusions, and presents images with the purpose to intentionally deceive.

References
Chan, R, 2011, My Paper, Was Singapore hairstylist with Nicole Kidman, viewed 13 February 2011, <http://www.asiaone.com/News/AsiaOne+News/Singapore/Story/A1Story20110106-256620.html>

Lodriguss, J, Catching the Light, viewed 14 February 2011, <http://www.astropix.com/HTML/J_DIGIT/ETHICS.HTM>



Monday, February 14, 2011

- Web Design - What makes for good design?

The Online Citizen: Community of Singaporeans or political party?





Screenshot from TOC's Website


A controversial topic relating to blogsites and the unspoken political rules that govern them surfaced again recently. The Online Citizen (http://theonlinecitizen.com/), a socio-economic blog in Singapore, was forced to register as a political association in January 2011. Besides being restricted from receiving funding only from foreign sources, this gazetting also required the owners, editorial team and administrators of TOC to be revealed, and a committee of president, treasurer and secretary had to be designated.

Discussions on the government’s decision ensued almost immediately. From the group of taxi drivers I overheard at a coffeeshop, laments about Singapore being a “nanny state” and the government being “too strict” were frequently heard.

When it was revealed that a former Nominated Member of Parliament (NMP) was one of the four volunteers at TOC, some people insinuated that he had become an NMP as an “attention-gathering exercise” and a stepping stone to entering partisan politics.

As usual, this gazetting was a hot topic in the community and led to many renewed criticisms of the incumbent Singapore PAP government.


References
Siew, K, H, The Oneline Citizen, For the last time, TOC is not a political party!, viewed 8 February 2011, <http://theonlinecitizen.com/2011/02/for-the-last-time-toc-is-not-a-political-party/>