Discover what creates the magic in our work.

Feb 21, 2011

Creating Depth In Web Design

Have you seen one of those website that makes you want to touch the monitor to feel the texture or a beautiful big image so real you want to jump right into it? No, we're not talking about those fancy 3D flash websites but one that plays with depth so well it creates a whole new dimension right at your flat screen.

Nike Better World used the mixture of fluid movement and layers of images to replicate a faux 3D effect to the website. Everytime you scroll the page, the different layers of graphic moves creating a space between the objects. We especially enjoy looking at the page with the orange running shoes. They looked as though they are in the midst of falling everytime the page is scrolled.

It is not difficult to put some magic touch to your website to give them more depth.

Here are some quick tips we've learned to share:

1. The 1px Wonder
Notice how the white box stands out from the background? Actually a 1px grey line was applied to the box to give it a faux shadow between the white box and the background. This works especially well if you just want a simple touch of depth to your website and easily achievable using CSS.

Same method can be applied to navigational bars, buttons and others to create the effortless faux 3D effect for your designs.

Apple did a great job in using these magical 1px lines on its navigation bar to separate the section of the pages. The darker lines works as shadow whereas the lighter ones creates highlight.

2. Foreground and Background
While choosing an image to use, always choose one that has a strong perspective and focal point. Otherwise, try editing the image to emphasize more on the object at the front and a blurred out background to show depth. For instance, we've edited this image with two cows. The cows are nearer to you hence the color is brighter and clearer where as the background is blur and darker. This helps to make the cows stand out from the background creating a good depth of field.

3. Size Does Matter
An object on its own does not show any depth unless it is being compared to. By playing with the size of an object near and far it creates an instant depth. This method is commonly used in carousel styled photo gallery or operating system UI.


Although depth is not an important element in web design, but why limit yourself? There are so much more methods you can try and explore to give your design more flair.

Here are some of our favourite websites using depth beautifully:

http://www.floridaflourish.com/
http://www.wearecupcup.com/
http://www.joshsender.com/
http://riotindustries.com/
http://365daysofastronomy.org/
http://www.jonabel.com/
http://www.nineflavors.com/
http://www.motocms.com/
http://substrakt.co.uk/
http://carlcartee.com/

Feb 17, 2011

A Project Executed With Love :- The Girl Effect

Feb 17, 2011 11:36 AM Posted by Unknown , , ,

It's seldom I come across a project that I will rave about. And I mean, we are seldom given a brief that will change the world, one person at a time, a village after another.

Here's a little story about something I find extremely compelling. Over the weekend, I started reading an amazing book called THREE CUPS OF TEA.

It kept me awake till wee hours in the morning for the simple reason that Greg Mortenson, a lost mountaineer, stumbled unto an impoverished village called Korphe in the remote highlands of Pakistan and was nursed back to health by the headman.

He made a promise to Haji Ali and it changed his life, and most astoundingly the lives of those many children across Northen Pakistan and Afghanistan.

Greg Mortenson, many years and many schools later started an organization called THE GIRL EFFECT.

As a practitioner in the business of web strategy and communications, I have planned, designed, and maintained more websites than I can count. For more than a decade, that is.

I'll have to say that I was awed by the simplicity and impact of the website of THE GIRL EFFECT. It has all the critical components for a great website.

1. A Compelling Story Told in an Engaging Way!

2. A Clear Call for Action. You Can Make A Difference

3. Viral-ability

I will say it again, wow story told well, great design to support the message, and a clear invitation to participate.

WOW!

5 Stars!

Can somebody give me a project like this?!!












A final word. What is most admirable is, I can almost see those passionate people who made this work, with LOVE oozing out of their hearts. All said, the greatness of this website comes from the great attention the team member poured into the planning and execution.

And you can't do that unless you are inspired by true love and devotion.


I should know...

Feb 8, 2011

Digital Marketing and Customer Experience Design


Guys, there's an elephant in the room!

For almost 15 years, which I believe is about the full length of the e-commerce history, the digital marketing or similarly called interactive marketing industry across the globe seems not keen on paying attention to the idea of improving the service experience for customers.

The brick and mortar businesses and their subsequent e-commerce guys are mostly working independent of each others. The customer experience of these companies are broken. The chain of service and the delivery of the brand experience is sub-par.

Why hasn't anyone done much about this? I think the answer is fairly simple.

Most companies, for whatever's their worth are seldom customer-focused. Most companies in Malaysia or across the world, be they listed/berhad companies, SMEs or small enterprises tend to be process focused. In other words, they see their business from inside out, and a customer is often seen as an inconvenience. Now if you add the multiple channels that customers now interact with companies, and multiply the inherent intricacies with turf-ism, the occasional clueless leaders, fear of technology by some older folks, and technology-fetishistic IT guys looking for the latest gadgets and trophy apps to run, the Customer will often be knocked down from his throne.

The result is disgruntled, under-served, uncared and totally under-appreciated customers, who are looking out for better care, better intimacy and better service and buying experience!

So if you ask me where's the holy grail of the Internet?

The answer is an integrated customer experience, off and online. PC, and mobile and whatever other devices, all plugged in together with the focus on the customer's experience of your company.

Set the performance indicators, measure the success rates, listen to the feedback and keep on improving.

Obvious, no?

Well, yes, and all of us at XIMNET will be working to help our customers deliver this OUTSIDE IN experience.

Designing a customer-centric service experience that's unmatched. And that will be one helluva differentiation to take on your competitors.

So, the day will come when you, the people working in the sales & marketing department, the IT folks, the PR heads; when you think about getting help to connect the dots for your company and your customers; if you google for "DESIGNING CUSTOMER EXPERIENCE" and drop the usual "WEB DESIGN MALAYSIA", or "MALAYSIA WEB DESIGN", or even "DIGITAL AGENCY", then I think you are on the path of reclaiming winning this war.

GOOD LUCK, design experience warriors!

Google's Work of Art

4:40 PM Posted by Unknown , , , ,
After the successful and controversial Google Street View, Google did it again this time by introducing the **Google Art Project. Explore museums around the world in few clicks and discover masterpieces at incredible zoom level.


**Google Art Project is an adaptation of the Street View Project for indoor use.



This unique collaboration with some of the world’s most acclaimed art museums enables us to discover and open up the world of art through thousand artworks online in extraordinary details and informations.

Experience it now:

1. Google Art Project: http://www.googleartproject.com/
2. Youtube Channel: www.youtube.com/googleartproject

Related Articles:

1. The New York Times: Real vs. Virtual: Examining Works of Art Online
2. Engadget: Gigapixel Images of Art Classics

Feb 1, 2011

Digital & Web Trends 2011

Feb 1, 2011 2:55 PM Posted by Unknown , , , , , ,
Have you been to YTL's YES flagship store at Lot 10, Kuala Lumpur? Gadget lovers will enjoy spending time in the store with many gadgets to play with such as iPad, latest mobile phones, Mac and others. There is a huge digital wall at the store called the "Touchwall" displaying information such as the weather, news, sports, photographs from Flickr and more.

Image Credit: Yes @ YTL Communications Sdn Bhd

2011 marks the significant change on how we interact and consume information, communication and design.

How XiMnet is going to stay relevant as a digital marketing solution provider in the tide of change?

After months of research and brain-storming, we came out with a list of recipe that will serve our customers first-class gourmet solutions from our creative kitchen this year.

1. Large (Full Page) Background
A picture paints a thousand words. Nothing is more convincing and convenient to deliver a message visually and directly to your audience and captivate them within seconds. We have started using this style since the begining of 2010 and it has generated quite a bit of exciting results. Some of our clients in the Property Development sector find this extremely useful to attract home buyers and prospects.

2. CSS3, HTML5 & Jquery
As Flash does not play well with some of the new technologies around, we are looking into some of these tools to help create a platform for rich media information. We are always thinking ahead on how to represent and display information to our clients' audience effectively. Information does not have to be displayed page by page, they can be pulled out where and when needed, or even rearrange to the sequence you prefer. Moreover, they should work seemlessly on any gadget or platform.

3. Mobile Ready
More and more information are made accessible to mobile phone users these days. Hop onto a bus, ride in the LRT, have a meal at the restaurant and everyone is holding onto their mobile phone connecting to news updates, social networking sites, chat and others. In order to catch the huge percentage of these users, we are going to equip ourselves with mobile ready websites and solutions. This will be a huge challenge in exploring a wide range of mobile browsers, tablets and other gadgets.

I strongly believe that with the support from the ever evolving technology of high speed internet connection these days, it is only a matter of time before we create the next history; digitally.