articles on

MTV Brazil Website Redesign

MTV Brazil Website Redesign

It's fascinating to see the design direction that most big content-centric sites are following resulting in a simplified look and feel with more white space and big images. A good example of this is the personal project that Paulo Rogerio Ziolle Junior put together for the redesign of the MTV Brazil website. Check it out and let us know what you think. Over the last few weeks I've been analyzing web sites that are portals with content related to music, MTV caught my attention because of its content, so I decided to design it as if it would be on my way. It's all in Portuguese, sorry about that. ;( For more information about Paulo Rogerio, visit http://www.pauloz.com.br/ MTV is known worldwide for its close relationship with the music and everything that is related to it. The website does not serve simply to publicize the program or display video clips, Youtube exists for a reason. The focus should be on quality content.

Hit the Road with Us: Travel sites inspiration

Hit the Road with Us: Travel sites inspiration

Do you like to travel? What kind of recreation do you prefer? Are you a desperate vagabond looking for every possibility to escape from the smoggy city into the wild with your old rucksack and tent? Or do you prefer comfortable stay at the luxury hotel where everything and everybody is to your service, where rooms are furnished with royal richness and you can enjoy the roaring sound and salty breeze coming from the ocean having delicious breakfast on the balcony lit with tender morning sun? It doesn’t really matter what makes your heart melt: a palace with complaisant servants facing the crystal bay or impassable jungle swarming with insects and beasts busy with their own business and secretly spying upon you from behind the thick trees. From our viewpoint, the most important thing about travelling is changing the habitual environments, breaking the routine circle. Exactly these factors help us restore our life energy, optimism and inspiration. Now, when the weather is nasty and cold we especially miss the blue cloudless sky, the hot sun and the caressing, transparent waves. We would like to carry you away from your boring office or apartment and take to the most exotic places in the world. (Some of them even don’t exist in reality). Yes, you are absolutely right, the collection of most beautiful, unusual and attractive travel website designs are waiting for you today. We promise that it will be difficult to draw the sight from some of them, so magnificent they are. However, we live in the real world and remember that all content should be not only eye-candy, but also effective. That’s why below you will find some brief tips on good travel sites design. Did you know the depressive statistics that only nearly 30% of consumers consider that travel websites are easy to use? What should you do with it? Please read herein under. Travel websites design guides 1. Easy search. Nothing can be more frustrating for the users than complicated search forms with multiple fields and unclear paths leading nowhere at the end. (According to analytical data, a search function that allows the user to search a date range rather than just one day of travel is much more preferable). 2. Visual appeal of website pages is extremely important. But don’t try too hard. Keep them simple and well-structured, which enables quick scanning. Give preference to light colors (blue, yellow, green) and avoid the dark ones. 3. Make sure that every page of your website has direct purpose and focus. This way your visitors will understand what they are required to do. 4. Take care of speed download time of your website. Internet is getting faster every day and nobody will wait until all elements of you website become visible. 5. SEO optimize your website. Nowadays high search engine rankings are utterly important for your business success as a rare tourist will persistently browse the pages looking for the website, which is somewhere in the outskirts of the web. 6. Navigation onsite should be as simple and understandable as possible. Choosing a tour of your dream is not an easy task, so let your clients focus on it instead of solving the brain-twisters hidden in site navigation. 7. Don’t be too verbose. Your text should be concise and straight to the point. (Mention only important factors such as location clarity, that is, how near the hotel is to the beach, airport, city center, type of holiday, whether children are welcome, etc.). 8. You website should work equally well in all browsers and on all popular mobile devices. Mobile transactions are becoming mainstream (EyeforTravel’s consumer research states that 20% of bookings made today in the USA are made via mobile and this number is still increasing). The utmost accessibility of your website shows how much you care about users’ comfort. And don’t forget about customers with motor impairments and reading difficulties as they also like travelling and can turn into your loyal paying clients. 9. Frequently analyze users’ activity on your website in order to make amendments if necessary. 10. Don’t overburden your home page with super- complex design, animation or intro. All these won’t make it look cool, on the contrary your website will acquire an amateur, cluttered look that cause nothing but users’ irritation! 11. Engage social media tools that your customers use. Some of them like to share their vacation photos, post travel videos or reviews. (We can recommend you to concentrate on Instagram and Pinterest as potential platforms because they are more suitable for visual content sharing). You can also include a travel blog into your site and post useful travel tips, advice and interesting tour info. All this stuff works for your benefit! 12. Touch users’ emotions. In travel site designs user interaction can play the decisive role. If your website stirs positive feelings about the location or travel service you offer, the user will never abandon it straight away. How can you reach this? Of course through HD photos (the larger and the more choice – the better) and welcoming design. Here visual explanation of your message is the shortest way to customers’ hearts, decision-making and their wallets. 13. Be ready to work out a great marketing plan. A gorgeous website design is just the tip of an iceberg. As soon as it is done, switch on the mechanism of your marketing plan to draw traffic to it. 14. Partner with other travel websites. Exchanging links and ad postings with websites that are in similar business gives you additional advertising, which strengthens your online positions. And don’t forget about travel forums for online travel marketing. 15. Offer competitive prices. A holiday is rather expensive purchase, so it’s absolutely natural that lower price will put you ahead of competitors. 16. Good reviews from other holiday makers provided on your site will save your customers from surfing elsewhere for additional information. Olery reports that 81% of travelers find travel reviews important and 49% won’t book a property without sighting reviews. So, encourage your clients to leave reviews on review sites like Trip Advisor and Expedia, on social networking sites and on your blog. 17. Update your content frequently. Firstly, search engines like fresh content, secondly, your visitors will be interested in dropping in more often to be in the course of latest website propositions. 18. Set up a Youtube channel for your travel business. In this case a video costs a thousand words. It brings a destination to life and makes deeper impression on the user. Youtube has a bunch of useful tools that can improve your video popularity. Get creative with your videos; run video contests through your database and award a prize for best travel video. This practice won’t cost you a lot of money, just time investments. 19. Offer users to subscribe to your newsletter, making them tempting hints on great deals, exclusive offers and giveaways, carried out on regular bases only for subscribers. 20. Go creative with your packages – bundle up other components to value add them and make unique on the travel market. 21. The properly selected widgets can improve your website’s design, provide useful information and give your website a more professional look. But don’t be carried away by them: make sure that your widgets are useful, relevant to the topic and complement your website design. Conclusion If your travel agency still doesn’t have an online presence, it’s a good time to get the one. Do you need more arguments? According to Econsultancy’s research almost 85% of holiday purchases by consumers involved the internet (53% booked online, and a further 30% did their research online before booking offline). So making the online offering right has crucial significance for travel agents who want to survive in this market. The key to a successful travel website lies in consistent marketing efforts. You might have a great idea, but it will have no success if your brand is not associated with reliability and trustworthiness. We wish you good luck in your travel business and offer to make a short tour through the most creative, user-friendly, exotic and nontrivial websites on the market. Amaze Vayable Skyscanner Kuoni Winshape Camps Keurig Let’s Travel Somewhere The Hobbit Absolute Travel Elite Traveler Unknown Rovinj. Croatia Pedaling Nowhere Anchor Travel Rob Lutter Gogobot Rome 2 Rio Lastminute Hipmunk We Love 2 Ski Spotted by Locals Bald Hiker The Everywhereist The Most Perfect View Sonicomed Ankommen im Sein Explore Corner Ibis Bay Summer in Tennessee Bed and Breakfast Miglino Pakata Grand Hotel Don Juan Royal Bike Riders Gramercy Park Hotel About the Author Helga Moreno is a learning junkie, requiring a new dose of fresh information every day. She is always keeping her notepad at hand in order not to miss a single thrilling event happening in cyberspace. She diligently puts down all her thoughts in order to share the most interesting of them with web community in general and TemplateMonster.com readers in particular. Want to know more about her? Visit her Google+ profile.

Responsive web design case study: Zee

Last week we launched the new Zee website - Zee is my company here in Brazil. We did the site in a single page, presenting the company, our works and keeping the focus on content and in a simple design. I decided to write this case study because the main challenge we faced was to develop a totally responsive site, and since lately this is a strong web subject, I decided to show how was the creative process of the new Zee layout. I know this matter is all around the web, but a definition about responsive design always come handy: Responsive Web Design (RWD) essentially indicates that a web site is crafted to use CSS3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling. - Wikipedia Summarizing: 1 code, 1 CSS and a fluid and optimized layout to all devices. This is not a tutorial about developing a responsive project, is a case study. But there are a lot of articles and books about this, so here are a few references: Livro: Responsive Web Design, de Ethan Marcotte Build a responsive site in a week: designing responsively - .net magazine Responsive Web Design: What It Is and How To Use It - Smashing Magazine Responsive Web Design Techniques, Tools and Design Strategies - Smashing Magazine A Primer on Responsive Design : From Content to Development - UX Magazine Responsive Web Design, by Ethan Marcotte Breakpoints The first thing we did was to set the breakpoints, the amount of changes in the layout. It is almost impossible to do a different design to all resolutions and devices available today, so we decided the resolutions that would be the base of the design and kept a fluid design between these resolutions. In our case we are using the following breakpoints: 640px, 1024px e 1280px (remembering that 1280 is the width limit). Wireframes showing the 3 base resoluções Mobile first As we will have 3 base resolutions, we will have 3 different layouts. With this comes a common question: which layout I should pick to start? Starting with mobile is much more interesting and recommended, because this way we can keep the focus on important things so we can add other elements as the resolutions increase. There are a lot of articles about this issue and I suggest a really good book from A Book Apart callled Mobile First, Luke Wroblewksi. Layouts Now that we created the information architecture it is time to create the layouts. This part depends on your methodology, I like to do wireframes on paper, because this way I can correct and try things faster. After defining the base of the architecture is time to go to the layout. A lot of things change in the moment we create the layout so I don't see a productivity advantage in investing time on detailed wireframes. Layout for 640px resolution Layout for 1024px resolution Layout for 1280px resolution Media queries Layouts are ready, time to work to make some magic happen. In terms of code I used HTML5 Boilerplate and jQuery. But what actually make the layouts break between resolutions is the media querie. CSS3 has this fantastic property and the documentations about this is huge on w3c.org, but to simplify the explanation, here I used basically the width definition to do the breakpoints. Use of CSS3 media queries Widths in "%". Texts in "em". The big thing here is, apart from the media queries, to work with the widths in % because this keep the fluidity between breakpoints. (Be prepared because in this part math will take over your brain!). And the texts too, always in "em" instead of pixels. Result You can check the result on ou website: zee.com.br. In case you can't test in other devices use this link: responsive.is. And remember that Abduzeedo is also responsive! You can try it on iPhone, iPad, Android or even on this link I shared to see how the site behaves ;)

Surfing the net with your hands and mouth

I've seen some pretty cool Flash sites out there but I think this one has to be one of the most innovate. Web designer Andreas Lutz has created his portfolio site using Flash and utilizing your computer's webcam and microphone to let you surf his site without need for a mouse. You use your hands to make gestures that the webcam tracks and you can use speech. It's freakin' amazing! When you go onto the site all you first have to do is some simple calibrations and then you're ready to start speaking and waving your hands to surf his site. He created a cool video to show you how it works. (See below) And here's his site: http://www.andreaslutz.com/ ANDREAS LUTZ - Because clicking is so 90s! from andreaslutz on Vimeo.

Inspiration from Asia

When I'm looking for some inspiration, or if I just want to check out some great artwork, I love to check out this great site called Startdrawing.org. It showcases artists strictly from Asia. There's some pretty amazing work on it. Check it out: