With a new year on the horizon, it’s time to pack away the old, worn web designs and prepare for the brave, new face of tomorrow. Although trends don’t start and stop on January 1st, there is a definite shift from what we craved at the beginning of the year to what we are seeking tutorials for at the end of the year. Most of the time, this shift is subtle. It’s a perfection or re-interpretation of a currently hot trend. Trends help us evolve as designers. As we master the skills of design aesthetic, we continue to push forward to what’s next or what needs to be fully discovered.
Make no mistake about it, you will recognize the ideas behind these trends. Although this list isn’t a drastic departure from what was popular in 2009, it marks different trends that will be expanded upon and made better as a result. As you think of how you will incorporate new trends into your designs, focus on the main idea of each trend. Be encouraged to dabble into these trends so that you become part of the movement.
1. Oversized Logos/ Headers
Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything.
Main Idea: Huge headers that make your visitors remember you.
2. Sketch/ Hand-drawn Design
Hand-drawn design is not exactly new on the horizon, but we all know that it is still on the fringes of web design. Many designers admire the style but are afraid to create their own sketches because of the “I can’t really draw” attitude. If you look at the most popular hand-drawn websites (and relative to other types of trends, there are only a few), you will notice that most of your fellow designers can’t draw. These designs are not exactly headed to an art museum, but they do convey a sense of whimsy, and blur the line between cold web and personal interaction– the ultimate goal of the internet. If you can doodle, you can sketch for web design.
Sketch in 2010 will become more elemental, and not as much the main focus of a web design. It will be used to personalize standard web copy in new and exciting ways.
Main Idea: Sketch becomes an elemental part of corporate design.
3. Slab Typefaces
Slab typefaces are relatively new, although they’ve been around for over 200 years in traditional media. To get a good visual definition of slab typefaces, think of the old Wild West “Wanted” posters. Those bold letters are slab typefaces. Slab typeface is commonly all capital letters and are bold and imposing. Many designers have shied away from slab typefaces in the past because logos and headers were smaller and more understated. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice.
Main Idea: Slab typefaces is used to bravely express who you are.
4. Typography
Typography is one of the most difficult trends to tackle which is why it will remain fresh in 2010. With all the cries for usability, web designers are afraid of using new and different fonts. The idea of mixing varying font sizes together is completely unthinkable. Fonts are meant to be explored, twisted, and molded to fit your purposes. With the correct placement, a website that utilizes Typography as its main design element will be more interesting to a reader than overloading the same site with tons of photos.
Main Idea: Typography is young, but will continue to be a part of web design.
5. One Page Layouts
One pay layouts challenge you to edit away what’s unnecessary. In 2010, this trend will move away from the quirky navigation and become more minimal in its approach. Think of these websites as business cards. These websites will be more of a one-stop-shop for how to locate you and your work on various other sites– your blog and your social media hangouts.
Main Idea: One page layouts will be more about personal profiles and less corporate.
6. Huge Images
A close relative to the oversized logo/ header, the huge image does much the same thing. It creates an visual impact that the visitor won’t soon forget. Unlike the oversized header from above, huge images are not part of the site’s branding. Instead, these images draw the visitor into your site, if not for their content then for their humongous size. In 2010, web designers will find themselves more comfortable using these big statements in their design to convey the site’s tone.
Main Idea: Huge images will be used to invite visitors in.
7. Change of Perspective
As we’ve discussed before, the desktop perspective has been done to death. 2010 will see a definite change in perspective to a more realistic view. There may also be a move toward side-shot aerial.
Main Idea: 2010 will play around with different perspectives.
8. Interactive/ Intuitive Design
Flash has seen better days. There was a time when you couldn’t visit a website without running into an annoying Flash interface. These days Flash is a lot more relaxed and much more professional. Although some designers prefer jQuery for forms and popups, Flash still has its place in design, especially when done subtly. Flash still has no equal to its interactivity. In 2010, web designers will move toward the more redeeming elements of Flash. Because the average visitor is more web savvy these days, designers will also create sites that are slightly more intuitive than in the past.
Main Idea: Interactive design will make a come-back.
9. Modal Boxes
Modal boxes are a trend that’s picking up steam and will be virtually everywhere in 2010. A modal box is like the popup’s more sophisticated older brother– it’s smooth, good looking and popular. Modal boxes are so easy to design and easy to use, making them the perfect solution for any designer concerned with usability.
Main Idea: Modal boxes will continue to pop up in 2010 designs.
10. Minimalism
Forget the old school minimal websites. Websites of 2010 will continue to feature lots of white space but with bold typology and surprising color schemes. Not all minimal websites will agree with the notion of black and white simplicity. Although minimalism is by nature muted, it will also showcase fresh colors. Minimalism isn’t cold, it’s warm and too the point.
Main Idea: Minimalism will venture into typology.
11. Oversized Footer
Oversized footers may be everywhere already, but 2010 will find them even more exaggerated. The footers of tomorrow will be less of an after-thought and more of an integral part of the design. Look for footers that feature contain random information, such as feed updates from various social media, daily polls, and Flickr feeds.
Main Idea: Oversized Footers will feature less important, but more personal information.
12. Retro
Retro designs are here to stay. Although a lot of the design community admires retro web design, it can be difficult to fully embrace this style without coming across “undone.” The key to retro designs is to be inspired by its tone and underlying playfulness. In 2010, retro design will be expanded as designers find new ways to honor vintage art.
Main Idea: Retro is new.
13. Intro Boxes
“Hi, my name is…” will find an even bigger stage in 2010 as designers recognize the beautiful simplicity of introducing yourself to your visitor. If you’re struggling with making a creative “About” page, the intro box will be your best bet. It forces you to condense who you are into a relatively small about of space. In 2010, intro boxes will push its own boundaries. Instead of the boring hello, designers will find new pick-up lines. And, instead of the left-flanked intro block, 2010 will see boxes in unusual placement, perhaps even in the middle of a page.
Main Idea: New ways to say “hello.”
14. Magazine Layouts
As more and more people migrate from the comforts of traditional press to online infotainment, designers are challenged to welcome them in with an easy transition. There is a move toward the magazine layout, where information is carefully organized on a single home page, giving the visitor an opportunity to explore as interested. The familiar layout will appeal to appeal to anyone who’s ever read a magazine or newspaper, but it will also be easier to use– no flipping pages! In 2010, magazine layout will become very huge for blogs in particular.
Main Idea: Magazine layouts will be used for infotainment sites.
About the Author
Jacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.
Related Posts
Here’s some other articles that you will definitely find useful.
Its always tough to predict the future, and that is all the more true when talking about the web. The internet continues to evolve so fast and in so many directions, due in large part to the various social media tools, making the web accessible to people who never dreamed being part of it.
Here is a list of design trends that I think will play a large role over the next year, well into 2010.
Typography
This trend started over the past year and will continue. Designs will trend toward the use of typography an integral part of the overall work rather than a liability. Web designers will start using larger, more exciting fonts in place of system text. Overall, designers are paying closer attention to typographic details such as leading, line height and choice of font.
Typography
Sketches, hand drawn style and illustrations
Easily noticeable on a page. Stands out from traditional graphics and gives the website a unique, personalized look.
Sketches, hand drawn style and illustrations
Large images/photography
Large Images/Photography
Magazine Layout
With more people going on line who see the web as the source of entertainment and real time information, many sites will be gearing towards this type of look - with short concise articles that are easy to read and concise information.
Magazine Layout
Introduction Blocks The upper-left area of a website is the most important block on the page, because that is the first place your eye goes when you come to a website. This spot grabs most attention from visitors. Therefore, this is the ideal place to get your message out and seen quickly.
You see this done in many types of design, including corporate design, web apps, or portfolios. They take up alot of real estate, but that is ok. the message is key.
Introduction Blocks
Single Page Layouts
People are in a rush, they are online to find the info and go, they dont have time to look around and see everything. This is the solution to get them the info they need.
Single Page Layouts
Social Media Sites and Add-ins/Icons
Of course this has been the big thing of the past two years, and it will only continue to get bigger. Linking to them, using apps from them helps build communities around products, ideas and causes. More and more people are spending time online, looking to connect with like minded people and to share their lives and information. Sometimes too much information
Social Media Sites and Add-ins
White Space Its cleaner, easier on the eyes and easy to find what you are looking for. White is a great color to help something stand out…except if its the carpet under your dining room table. Sometimes simplicity is key.
White Space
Icons and Visuals Not talking about clip art, but stylistically rendered icons that represent in a small image what the entire section is about. Easy for people to recognize and people notice them quicker than text
Icons and Visuals
Modal Boxes (Lightboxes) These guys are great. Open source applications that are, basically the next generation of pop-ups. They are a cleaner, more user-friendly alternative to the basic JavaScript pop up windows that have been around for years. Clean, crisp, and focuses the user on the information you are presenting, whether it is a picture, text or a video. This little tool helps the presentation go a long way.
This is a section dedicated specially to attend all our customer needs in the graphic and web fields.
Contact us at 1305 433 4462 or info@theleaderteam.com to receive further information regarding this special promotion and increase your website traffic and sales!!!
If you are looking to increase your sales please one of our representatives to hear about our Promotional Packages which includes:
1- A Mailing design to communicate a especial offer to your potential customers
2- A Postcard or Flyer to intensify the message we are willing to communicate
3- Google Analytics Incorporating on your site!
10 Cool Things You Can Do With (the New) Google Analytics
1. Email out your reports
Emailing out your reports is such a cool feature, and one that was sorely lacking from the prior version of GA. Each report screen has an Email icon up on the top left. Click on the icon, and then on the Schedule tab, and you get this setup screen:
You can set who you want the report sent to, and how often you want it sent (daily, weekly, monthly, or quarterly). This is a great tool to use when you are dealing with a boss or senior manager who wants information on a regular basis. Send them what they want automatically.
2. A/B Testing
I recently spoke to analytics industry luminary, Eric Peterson, and he said: “If you are not doing controlled experimentation, you are not doing web analytics.” In fact, A/B testing and other forms of controlled experimentation can bring huge gains to your ROI. This can take many forms, but here are three of the most common ones:
1. Trying out different ad copy in your PPC ads. The key here is to tag each version of your URL with a different tracking parameter.
2. Test different types of landing pages.
3. Try out different offers.
3. Geo overlays
Use the Geo Overlay feature to see where your traffic is coming from. If you click on the Visitors menu on the left, one of the expanded choices is Map Overlay. This allows you to quickly see where your traffic is coming from. Here is what it looks like:
In this example, I have set the view to Sub Continent Region. But I can also set it to Continent, Country, or City, to get the data at whichever level I prefer. This is very, very useful if you have a business tied to a particular geography. I have used this feature to help a client detect problems in the targeting of an AdWords campaign.
In AdWords, you can geo target your ads. In the U.S., this can be filtered down to a city and state level, or even within a specific number of miles from a location you specify. Want to see where your AdWords traffic (only) is coming from? Go to Analytics Settings and apply a filter to your profile, to filter only on the people coming in from AdWords (use a tracking parameter on the URL in your AdWords ad to make it easy to setup a filter to do this).
For more information on setting up filters, check out my recent article in Search Engine Watch titled: Using Google Analytics to Manage Content Groups.
4. Finding new referrers
Use the referring sites list to discover new inbound links. Simple and easy. Go to the Referring Sites report (first click on Traffic Sources on the menu on the left side of the screen). Then set your date range to look at yesterday only. This is easy, just click on the gray down arrow to the left of the dates. Now, at the bottom of the referrers report, click on the “Show Rows” drop down, and expand it to 100. If you have more than 100 referrers per day, you can use the arrows to the right of the Show Rows drop down to scroll through pages of referrers.
Now scan the list of referrers for new referrers you haven’t seen before. Better still, if you are a programmer, export this list into a CSV or TSV file (see top left of the screen for Export options) on a daily basis, and then keep a file that cumulatively identifies all your referrers. Once you have a data file that lists all your historical referrerrs, now you can take your daily export of the daily referrers, and compare it to your historical referrers data file, and see first time referrers.
You then update the historical referrers data file, and also output to your screen and/or a separate file, a first time referrers list. Now you have uncovered your new links from yesterday. Note part of what makes this work is that most people click on out bound links that they implement to see if they work.
5. Drilling down referrers
Drilling down and finding all the referring traffic data from one site is a really cool for a variety of reasons. For one thing, you can track your traffic from a social media site in detail. Here is an example using StumbleUpon:
As you can see, we have 3 peaks in the data, and these peaks relate to the days I published 3 specific items of content, the first being an interview with Adam Lasnik, the second being the web analytics report already referenced above, and the third being a post about 17 Poor Quality Signals Your Site May Be Sending.
The cool thing about this is that you can quickly get a strong feeling for what content a particular audience likes best. Mapping your content performance across social media / social news sites is a good way to learn how to better map your social media campaigns.
6. Navigation summaries for individual pages
Use a navigation summary to look at each page on your site, and see where people came from, and where people went to from your page. You can find this report by clicking on Content in the menu on the left, and then Navigation Summary under the Navigation Analysis section on the right. Here is a sample of the report:
As you can see, the report was published on May 7th, 2007, and had an immediate spike upward in traffic, and then the traffic level sloped off over time. Notice the detailed tables below the graph. 82.28% of people entered the site at this report, and 78.58% of people left the site from this report. Other than that, you can look at the details of where users came from when they read this report, and where they went to.
This is really useful when you want to check out traffic flow in and around key pages on your site.
7. Break down your inbound traffic
Want to break down your inbound traffic to a page really quickly? Use the Entrance Sources Report. You can find this report by clicking on Content in the menu on the left, and then Entrance Sources under the Landing Page Optimization section on the right. Here is a sample screen shot:
You get a great fast view as to what referrers bring the most traffic. This page had a bit of a surprise for me. Our analytics report got prominent mention in Search Engine Watch, Search Engine Land, and SEOmoz. Which one brought us the most traffic? SEOmoz. I would bet that no one would have guessed that.
Note that this probably relates to how the particular audience of one site relates to the particular content published. But, as with social media sites, getting insights into the nature of various audiences is a great thing to do.
8. Entrance keyword analysis
Next up on our hit parade is the entrance keywords analysis. You can find this report by clicking on Content in the menu on the left, and then Entrance Keywords under the Landing Page Optimization section on the right. Here is a quick fast view of the keywords that drove traffic to a particular page:
This is cool, because you can see keywords on a page by page level. One thing that struck me on this page was that our analytics report was getting search engine traffic on the search term “stone temple consulting”. So I tried the search at Google, and sure enough I found that we had two listings come up for that search term, and the second, indented, listing was to our analytics report.
You can find various types of problems this way. For example, the report shows that 20 people came to the analytics report page after entering in the term “detect cloaking”, a completely unrelated term. I am still working on why that might be the case!
9. Site goals
Setup goals for your site. What are you trying to accomplish with a user? Even if all you are trying to do is to get someone to fill out a Contact us form, set it up as a goal and track it. To setup a goal, click on the “Analytics Settings” menu item on the far left of the orange nav bar on your screen. Once you have done this, you will get a screen that looks like this:
The configuration of the goal is generally pretty easy. Now, many of your reports will begin to show what actions are leading people to convert.
10. Goals for Ecommerce sites
Simple goals don’t work for you because you have an Ecommerce site? Google Analytics now offers a rich array of information that allows you to drill down into what is happening with your e-commerce. With a little bit of configuration and setup, you can get several different views of your Ecommerce performance, including:
1. Revenue by Source
2. Revenue by Product Category
3. Revenue by Product
4. Conversion Rate Mapped out by Day
5. Average Order Value by Day
6. A Detailed look at the Revenue From Each Individual Transaction
7. A Break Out of how many Visits Users Make Before Purchasing
8. A similar Chart Showing The Time Between a User’s First Visit and their Making a Purchase
If you have an Ecommerce site, there is a lot you can do here to see what is really happening with your transactions.
There will be those who outgrow the capabilities of GA, and move onto other packages. But, there is a lot of new functionality in Google Analytics, and it can be a very effective tool for site owners to use to grow their business.
Google is constantly upgrading and improving itself looking at the future of web with their kinds. In their endeavour of doing so, the latest innovation they showed us on Google Developers’ conference at San Fransisco, is Google Wave. According to them,
Google Wave is a product that helps users communicate and collaborate on the web. A “wave” is equal parts conversation and document, where users can almost instantly communicate and work together with richly formatted text, photos, videos, maps, and more. Google Wave is also a platform with a rich set of open APIs that allow developers to embed waves in other web services and to build extensions that work inside waves.
In other words, its a communication tool that consolidates features from e-mail, instant messaging, blogging, multimedia management, document sharing and wiki. It is indeed, though I shouldn’t sound as a G-fanboy, one of the most ambitious andjust-at-the-edge projects Google has put his hands on, ever. I will try to justify my assumptions below. Let’s get to know the Wave first.
Tell me What exactly Google Wave does
Okay let’s be straight without taking too many confusing technical terms . In Google Wave you create a wave and add people to it. Everyone on your wave can use richly formatted text, photos, gadgets, and even feeds from other sources on the web. They can insert a reply or edit the wave directly. It’s concurrent rich-text editing, where you see on your screen nearly instantly what your fellow collaborators are typing in your wave. How cool is that?
Who made it possible?
Now you have known the technology. Let’s get to know the faces. It is developed by brothers Lars and Jens Rasmussen and Stephanie Hannon out of Google’s Sydney, Australia.
Features
Layout
Wave features a left-hand sidebar Navigation and a list of your contacts, fromGoogle Contacts, below that. But the main part of the screen is your Wave inbox.It looks almost like a Google inbox but the main difference is, you are updated of any new content shared with you and not just messages.
Adding a Friend
Its fairly easy. You can do it by going over to your contact box and dragging their picture into the wave. Now the interesting feature is, upon joining if he wants to understand what’s really happening in this wave, there is a playback button. Click on it and it will rewind all the stuff that you needed to know in last few days that happened inside that wave community.
Read and Reply
As you want to read a new wave, just click on it and on the right pane it will open up in full. Remember Opera feed reader? Its almost like that. If you have read and want to reply, there is a simple way to do so just as have in Gmail too, right under the friend’s message.
What’s new is you can reply to any specific part of your friend’s message just by typing below that portion. Its almost like a single piece of paper you and your friend are sharing.
Instant Messaging
We knew Google wouldn’t leave the success of Twitter unattended. If you were thinking where is my Google way of RTI (real time interaction) service. Here it is.
If two of the people involved in the wave are online at the same time, you can talk to each other in real time. Just type in, enter and the person will be able to see it.
What if you don’t want to show your snippets until you complete it? Just click on theDRAFT mode and it will be public only when you want it to. Just like blogging.
What if you want to have a private conversation with someone and don’t want the whole wave to know about it. Its there too.
Wiki
Real time editing of any document or information or any content for that matter has a problem of being re-edited by more than one people at the same time, making it a mess. Google Wave has worked upon that and though there is a wiki included for collaborative information sharing and editing on any topic, you won’t miss out on edit updates flashing on your screen in a nice UI and you can playback anytime if you need to.
Sharing Pictures, Games, Google Maps and beyond
If you share pictures in a wave thread with several other people, from the moment after you drag the photos into the wave on your end, your friends can see the thumbnails of them on their screen. With Google gears installed, this will be a damn cool job where you can just drag and drop a photo in your wave window and it will get published! HTML 5 is something we all will be trying in future just like Google showcases here.
What else is special? - Web Content Sharing
Right, this question is bound to come to your mind by now because, this looks like a very nice AIO Google app. Where is the revolution that Google expects it to be? Google isn’t just thinking of Wave as another web app that it creates and you use on one site — it wants you to be able to use it across all sites on the web. AsTechcrunch puts it,
Say, for example, you have a blog. As a post, you could share a wave with the public and allow others to see what you and the other people in your wave are doing. And these visitors to your blog could even join in as well right from your blog, and all the information would be placed right into the original wave.
After that, you can try anonymous collaboration or may be in future Google will think of something like Facebook Connect or Google Connect.
Waves can also be published as their own entities on the web. This would make them and their content indexable by Google’s bots.
Google Wave for Developers
Google expects to keep Wave as a developer preview product for at least several more months. For starters, only developers attending I/O will get access to Wave on Thursday. Google will expand access to more developers later.
It’s also important to note that Wave is very much centered around the key fundamentals Google is focusing on with HTML 5: The canvas element, the video element, geolocation, App Cache and Database and Web Workers. You can read more about those on O’Reilly Radar.
Wave API Model
The Google Wave API is an open platform allowing developers to extend the functionality of Google Wave itself, or extend other applications with waves. As a developer, you can think of Google Wave as three pieces:
The Google Wave client application, the interface designed for users
The Google Wave APIs, which are documented throughout this site
The Google Wave Federation Protocol, the underlying network protocol for wave communication
Wave Entities
Let’s look at the common place terms you will encounter while understanding the model above.
A wave is a threaded conversation, consisting of one or more participants
A wavelet is a threaded conversation that is spawned from a wave (including the initial conversation). Wavelets serve as the container for one or more messages, known as blips
A blip is the basic unit of conversation and consists of a single messages which appears on a wavelet. Blips may either be drafts or published
A document is the content attached to a blip. This document consists of XML which can be retrieved, modified or added by the API.
You can answer it very well yourself if you thread all these pieces together. By Google wave, Google is not only trying to get out of reach from its competitors like Yahoo, Microsoft and AOL, but also it means, they will be self-destructing (its too strong a word) their years of apps like Google docs, Gmail, Picassa, blogspot etc, individually.
Again, with all these inter-connected social networking sites and services available, and with individually people having enough of what they need, the main question is, what is the need to come under one roof (esp. when its Google)? We have seen previously too that people are conscious of Google’s gradual growth to invincibility and coming up as a no-alternative image. So, the biggest point for Google will be to convince people enough that its not yet another service but THE new face of web. Will the mass take it as a favor or a surrender, that is to be seen.
We Web designers are a fickle lot. We love to experiment with things. We love to observe how people interact with our work. And we love to try out unusual design approaches that might possibly go mainstream and become a classic approach. As a result, new design approaches come up, and as more and more designers notice them and make use of them, new trends emerge.
Over the last months, we’ve analyzed numerous Web designs, observing emerging trends and weighing the merits of numerous design decisions and coding solutions. In this post, we present Web design trends for 2009: recent developments, new design elements and new graphic approaches. We also discuss situations in which these trends can be used and present some beautiful examples. Did you miss any recent development in this overview? Let us know in the comments!
Web Design Trends For 2009
Let’s first take a closer look at the main trends we identified, discovered and observed over the last months. In this overview, you’ll find a review of each trend and more beautiful examples that can inspire you in your next project.
1-Embossing Letterpress
Have a clear definition of the brand’s audience and the objectives that the brand needs to achieve.
Your brand should communicate the company personality, image, core competencies and characteristics.
Build credibility with a strong brand having more influence on your market.
A brand is a collection of images and ideas representing an economic producer; more specifically, it refers to the descriptive verbal attributes and concrete symbols such as a name, logo, slogan, and design scheme that convey the essence of a company, product or service.
Brand is very important and does not simply refer to a logo. A site’s brand should include logo positioning and color scheme, but it should also tell people something about your company.
Your brand is more than a series of words, it is your Corporate Identity. Your name and your logo should tell people who never been to your establishment something about you.
We see logos everyday and everywhere – on the highways, on consumer goods, on the Web and any marketing material. Learn about the different types of logo designs and techniques used to create them:
Logo done By TheLeaderTeam
A web2.0 logo is now synonymous to a modern and trendy logo.
you will noticed that most Web 2.0 logos are matter of playing with gradients, strokes, have bright colors, color levels, cute, icons, 3D effects, shiny surfaces, shadows with the combination of the right fonts. The fonts are simple and most of them rounded. In some cases the color levels, shines and 3D effects are also applied to the lettering.
Logo done By TheLeaderTeam
Transparency in logo design
Designers often use transparency, in fact to the notion of elegance that it communicates. Transparency enables you to create some unique effects that definitely catch the attention of the viewer, giving perspective and brightness to the design, suggesting the ideas of growth and connection. When trying to combine elements or give the idea of evolution or movement, this is definitely the best way.
Logo done By TheLeaderTeam
Waves of the future
Well used to communicate the idea of movement, the “waves” are becoming the new trend when looking to flexibility and sense of movement and communication.
