Archive for the ‘Web Design Trends’ Category
I’m sure that web community is grateful to all those people who have devoted plenty of their precious time to creating infographics, you really can’t find a better way to visualize a huge amount of data in a way more efficient and comprehensive. Without a doubt 2010 was a year of informational graphics and this design technique has become one of the main trends of the last year, creating both positive and negative factors in a further development of this practice within the bounds of web design industry.
Creating a really interesting, communicating and useful informational graphic is a really complicated task, which requires skills and tons and tons of patience. I have been a witness to when unwise usage of this design technique had caused a splash of negative reactions on giant social media networks such as Digg.com or Reddit.com – which is obviously not what the authors have designed these infographics for. There was a period when anyone thought he could design an infographic, promote it and gain certain benefits. But in fact there’s a lot to think about before actually starting to work on it. First thing whether a web community actually needs the information you’re about to provide. The second problem is about the visual appeal of your graphic. The right correlation between the quantity of information and visual techniques used to present it is an extremely important thing. So if you don’t want to confuse – or even irritate – your visitors please be careful while creating next informational graphic, otherwise it may harm the reputation of your website.
Types of Data
There are three basic types of what is best presented in a form of an infographic. Knowing all about your info will help you from the very outset of creating infographic. Of course you can mix these types/approaches but it would be better to use one of them, besides it easier for the audience to perceive. Believe me – in most cases infographics have enough “heavy” facts within just one type of info, don’t make it all even harder. So, here are the three types we’re talking about:
- Time – it is the most popular one because timeline perfectly illustrates dynamical changes of any process, and you shouldn’t worry about the structure – just choose whether it will be a horizontal or a vertical timeline. It is much easier to collect information simply by checking time period and looking for interesting, useful and significant data concerning the topic.
- Quantity – you can set this type as the directing vector of general data presenting in your project. Of course you have seen many examples containing various quantitative analysis, however you should never forget that mostly people can’t accept and remember many numbers so, don’t go too far with them.
- Space - this type describes physical relations between some objects or conceptual locations. To be more precise, infographics of this type describe some physical processes or they are geolocation-oriented.
What is also important is the communication approach in creating informational graphics. Our article is devoted to the static infographics which are the most widely spread ones around the web, basically when someone says “infographic” the static infographics are what you think of the first. In addition to this approach there are also two other major types used. Here’s more on each of them:
Clean and minimal style is implemented widely throughout the internet. As one of the most prominent design trends, it deserves a decent tribute. Currently, we’ll bring together a showcase of 77 WordPress web designs that feel stark and minimal with their simple forefronts. Making use of plenty of white-space, these minimal WordPress sites show the content for a high impact and clean communication. With just enough contrast in tone and colors, they are very strong to properly transmit important concepts. Still where it is highly important to draw a specific users’ attention, designers resort to using the bigger, bolder, and more contrasting design choices which however do not make the layout feel any cluttered. It seems that page elements are plunged into rather plain and fresh environment where there is no graphical overload or eye-itching visual saturation. Here it is exactly the content that screams for attention! Just take a look:
Elacorte.com
* * *
Thinkminimal.net
* * *
The iPad. The killer word coming off everyone’s lips lately… This is the newest mobile computing device (a.k.a. Apple Tablet) that claims to revolutionize how we consume web content. We must admit that this tablet has huge potential, so many people already want their website to be perfectly optimized for this recently unveiled gadget.
What do they need to do when designing pages to perform on this interesting Apple invention? For general design principles, we’ve rounded up a few options below that will give a little guidance. Now’s the time to keep your eyes open for the iPad-optimized design tips:
Specific Features of iPad Display
iPad has the high-resolution, 9.7-inch (screen resolution of 1024×768 pixels) LED-backlit IPS touch-sensitive screen which is remarkably vivid for web browsing, media consumption, gaming etc. Its tactile and luscious interface invites amazing close-ups putting the objects almost literally in the hands of the gadget user.
- Landscape and Portrait Mode Styling
The iPad allows for both horizontal and vertical style viewing. This will pose some interesting possibilities for web designers to incorporate features that wouldn’t have worked before. The point is that the styling has completely changed when the orientation changes, and for the designers this means two completely different layouts for which to design.
The fact is that the iPad marks the return to magazine formats introducing the web’s first truly vertical screen orientation. While computer monitors have always had a landscape styling, now we can see a lot of web content consumption in a vertical mode which will result in new web designs and web information architecture.
Since the portrait mode encourages vertical scanning and the user can now see the entire page without having to scroll, web pages will no longer be viewed one half at a time and the designers can finally design pages that are meant to be scanned and read all at one time. This vertically-inclined resolution means that versions of the websites for the iPad will get narrower and taller. The landscape mode in its own way makes it very easy to browse sites that display content horizontally. It’s for this specific reason that more of an emphasis is placed on smart and fluid layouts that can easily work both ways adapting the content according to the screen resolution.
Accessing the web through mobile handheld devices is a usual practice these days. It’s apparent that people hooked to the Internet via their phones are on the huge rise. Furthermore, lots of consumer-focused companies have already realized how promising the mobile platform is and have by now equipped themselves with a mobile-friendly alternatives to their primary websites so that they will as well provide an accessible user experience on mobile devices.
In fact mobile web browsing is not a passing fad, it has actually become an absolute necessity, even the new Internet standard. So if you haven’t yet set up your own mobile site, we’ll today focus on how you can create a mobile version of your site running through various important options and basic techniques you can employ to make your mobile site work successfully. Besides, you might be interested to explore the most conspicuous mobile web design trends for 2011 and find some graphic approaches to consider for your custom mobile designs.
Now having got some of the theory out of the way, let’s turn our attention to more practical matters. There is a special procedure involved in designing a mobile website. The easiest way to build your mobile site is to modify your existing website to make it compatible for mobile handsets. If you decide to do so, expect that there will be big changes in terms of layout, design and construction. Here are some principles you should take note of before proceeding to build one of your own:
1. Layout
It can be time consuming to browse through a mobile site, so remember to put all of the most important information you want mobile users to see on the top of the page. And don’t forget to include your company logo being customized for a mobile site. Make sure to minimize left/right navigation, which is difficult on a phone, and instead arrange your content in a single column layout. Also you should minimize the use of tables, but if you do need to incorporate them, use no more than 2 columns, and avoid row and column merging.
2. Content
You should make sure that the information on your website is easy to read and navigate, and doesn’t take the visitors much to figure out, since they’re probably on the go while looking at your mobile site. Having finally selected what part of the content should be displayed on mobile, tailor your site menu adjusting text to avoid zooming. As for the typography used to render the content, consider using headings to control font sizing.
3. Coding
Read the rest of this entry »
So, guys, you’ve either used or actually missed the chance to share your personal weighty argument and cast your votes for the best web design trends in the year 2010. We are now closing all conversations on this topic to strike the overall balance and make final conclusions.
Having in mind all the aforesaid thoughts and opinions let us outline those web design trends that, according to your opinions, will be on the top this year – here they are actually:
- white space;
- huge images;
- huge typography;
- minimalism;
- intuitive flash design;
- out-of-the-box layouts;
- change of perspective;
- mobile design;
- elements transparency;
- social elements;
- icons;
- retro;
- dynamic tabs;
- and finally magazine layouts.
Now you might want to take a look at what the winning trends look like. Plus, there’s an info about the winners of our voting lottery, find it in the end of this post. Here go the trends:
- white space:
72rivingtonstreet.com
* * *
- huge images:
Austin Harp
* * *
Today is the high time to complete the first part of community-based choice of the best web design trends for 2010. And the following information demands you to take notice, for we’ll announce those trends which appeared to be the most popular among TemplateMonster audience.
Having analyzed the solid number of comments, we’ve revealed the most popular web design trends according to our devoted audience. They are:
- white space;
- huge typography;
- huge images;
- minimalism;
- out-of-the-box layouts;
- change of perspective;
- and finally elements transparency.
These web design trends appear to be that important key of users’ attention, carrying on an intrigue feeling to click in. The ones to lose in trends voting are one-page layouts, slideshows, hand-drawn designs, oversized headers and footers, speaking navigation and multi-column layout. They numbered far less visitors’ votes.
Right now let us announce the winners of the previous “Help Us Choose the Best Web Design Trends for 2010 – Everyone’s an Expert!” voting. Having randomly chosen from the persons who commented on the post, we present a free template to a man who in our comments has called himself Ktevlin, 50% discount goes to Lisa Chestnut, and the last 30% will be fortunately delivered to Pavel K. Our congratulations and many thanks for participation! Following the results of the second part voting, the winners will be as well chosen to receive pleasant freebies from the kind TemplateMonster (also a free template, 50% discount and a 30% discount).
Now coming back to the rest of web design trends. For this once we’ll outline the remaining fourteen trends, so please vote for your favorites to make them best and foremost!
1. Magazine Layouts
Another big trend is magazine style layout for websites. Like in traditional print media, such designs have the specific use of text, illustrations, and content arrangement. Many heavy sites can benefit from this approach to guarantee concise and carefully organized structural balance in terms of informational stuff.
Mica.edu
* * *
City Portal
* * *
In this blog entry we’ll introduce you the first part of what we think are the widespread web design trends so far. This actually comes down to everything that is currently of any significant design relevance. Thus we ask you, our friends, to help us define the top web design trends for the year of 2010 by choosing what you consider to be the most important ones and voting for them in the comments section of this post. You know we always appreciate communication and for this little help you will be able to win a free template (either a template containing your favorite trend or any other item) and one of two discounts – one for 50% and another for 30%. The voting will last for one week (until Feb 2nd 2010) and the winners will be randomly chosen from the ones who comment on this post so make sure you type in the valid email address.
In the long run, many blogs and publications individually define what trends will eventually become the most prominent ones. As for us – we’re sure that our numerous audiences have their personal thoughts on this issue to share. After all, the whole situation could be observed only on conditions of the maximum number of people having there opinions expressed. So feel free to bring your own unique ideas to the discussion:
1. More Whitespace:
The increasing prominence of white space has now become a conspicuous tendency. Being the key for simplicity, white in web design is extremely beneficial to build a page structure with an intelligible flow of content. This helps to focus users’ attention on the most important areas of the website.
Nest-living.com
* * *
Flash template #27378
* * *
2. Change of Perspective:
If we take a close look at the image perspective on websites of this web design trend, we’ll be able to spot the shift to a more realistic view since lots of web designers now play around with different image proportions, slants, and standpoints.
Kusoyama.com
* * *
Web design has a lot of trends that are constantly changing, the old ones get away, the new ones emerge in an endless process of design evolution. So no wonder that there are endless discussions of web design trends going on and on all over the Internet – even we have published the web design of 2009 trends review. So now we’re after something that’s currently popular. We have even managed to find a couple or reviews of top trends for 2010 done by WebDesignLedger and DesignTutorials4U. These guys have done a great job but we feel like we have a couple of ideas to add.
By the way, all of the trends are illustrated with our own templates’ designs. After all, we do not only talk about trends, we actually follow them. Enjoy!
1. Social Icons
- – -
Trend description: Social network icons are getting bigger and bigger (just as their value grows). Besides, they often get customized according to the general website style.
* * *
Featured Templates
Follow TemplateMonster Updates
Rss Feed: