Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 22 2012

10:00

What is the Trend for Web Design in 2012?

Just a month and a half has passed in 2012 and there are some patterns which are quite easy to notice in how people design. Sure, most of them are similar to the ones of 2011 – it seems 2011 and 2012 will not be too different, however there might be some small changes which I will talk about soon. There is no doubt that screen size is not an issue anymore and designing for all sizes is crucial – this is the stand point of web design trends in 2012.

Why is responsive web design crucial? Because there are so many screen sizes out there, that designing a solution for each one of them is too costly and there is no real reason to do this. Responsive web design offers us the solution to designing for all screen sizes in the same time back in 2010 and since then it became a trend. Responsive web design is brilliant and the results are more than satisfying.

Back in 2011 many websites started to be coded responsively and while the concept is still young, it is already well known and popular. Media queries are a great invention and only show how web designs keeps running just behind technology evolution. Having a version of your website for a mobile phone is something everybody needs to have today, because let’s face it, who doesn’t (or will not) have a smartphone or a tablet?. Now we have internet wherever we go, 24 hours a day, 7 days per week.

Images courtesy of mediaqueri.es.

Besides making websites work on all screen sizes, building websites responsively taught us something else as well: that content is as important as ever. Content is also in focus when designing responsively, because we need to cut back on too many design elements and make the content easy to read and clear; fonts have a very important role here as well.

If you thought 2011 was the year of responsive web design, I think you are wrong. Buckle up, 2012 will bring even more exciting things.

Grid systems are also partially involved in responsive web design. More and more of them appear on the web and people have started using them more frequently. Now that they’ve been out for a long time designers are starting to trust them and this only makes the web better. Frameworks were very popular in 2011 and will continue being so in the following years. They offer fluidity and give a sense of discipline to every design built on them.

designinfluences.com/fluid960gs/

cssgrid.net/

960.gs/

Typography is not something that just appeared last year, it’s been out for a long time. Steve Jobs said himself that he studied calligraphy back in college. That was more than 30 years ago. Typography started as a discipline on the web around 5 years ago, when people realized how powerful it can be and the effects it has over how people perceive content. Typography continues to grow, people continue (or start) to read books about it and get better at combining typefaces and using them properly in order to create the desired effect.

However, for the last year something is worthy to note – people started realizing fonts are made to be read and likewise the content. Using too many fancy fonts that were difficult to read disappeared and this will continue in 2012. Education happens really fast on the internet nowadays and people tend to learn about common sense in design more than everything else. Emphasizing content is still something people have to learn more about, but this is exactly what is going to happen in 2012.

englishworkshop.eu/

kantt.dk/

The fold’s importance has been played down a lot in the past couple of years since smartphones emerged. People now think it is OK to scroll. I debated this topic one month ago here. People can have their own opinions and this made some of them start realizing scrolling isn’t a problem for users. And let’s face it, nothing is a problem until you make it a problem. If scrolling is not an issue for you, then the fold’s importance is minimal.

Now that smaller screens have become popular, scrolling is something that people just can’t avoid, so we will have to embrace it. The ones trying to play down the fold’s importance managed to do it thanks to the technology and gadgets which emerged on the market in the last years. With this trend set to continue, it’s clear “the fold” will be history by the end of this year – or at most by the end of the next one.

However, if there is something we will see a lot of during the next years, then this is the parallax effect. It is at its bottom scrolling, but not by using the wheel or the trackpad. You simply scroll to another area of the page by clicking the buttons in the menu. The parallax effect is something I simply love and I can’t wait to see more of it – it is just such a great way to make peace between the fold-lovers and the other people. The only issue is that it doesn’t fit with the responsive web design at all, so this is something that developers will try to sort out during 2012.

Using modular interfaces is also something that has become quite popular lately, although it is still a debatable practice. There is not much research behind it and we are still not sure how well it works – but this is why we have 2012. This year we will see how successful the modular interfaces will get.

Google Web Fonts

People will also keep it minimal. Minimalistic design has been the most popular throughout 2011 and this style will continue dominating the industry – although not very easy to design because of its multiple theories, it is quite easy to code and is very pleasant to the eye. It is simple, gets right down to the point and doesn’t waste anybody’s time – just what everybody looks for – information given as fast as possible.

Simple, eye-catching and elegant designs will emerge even more and will continue to stand out in 2012. People with inspiration and imagination will turn their designs into huge hits. With minimalistic web design being very simple, there are not too many ways of finding something new that nobody thought of before. The designers that manage to do it this year will definitely be the key people of 2013.

wearepropeople.com/

freshness.hu/

Otherwise I don’t see too much new stuff coming in 2012. I see designers and developers continuing on the same track and improving the concepts and tools they use right now. I also see web designers digging motivational articles even more, because this is something that keeps them running.

Until next time… what do you think I missed? Is there something else you consider important enough to mention? Do you have a prediction for this year?

November 30 2010

21:00

Modern Element Trends in Magazine-Styled Webdeign of 2010

Magazine-style-website-designMany web designers today are moving away from the traditional layout of a website. One of the layouts that are in trend today is magazine or news style of website. Magazine-styled website offer good usability, clean typography, and professional interface. Adding on to that is that even if you put many elements on a page, it will still look organized and not overcrowded. Usually, magazine style is used for online periodicals, lifestyle, and fashion websites.

Common Features of a Magazine-styled Website

Generally, these are the things you will see on a magazine-styled website.

1. Horizontal Navigation

It is common on any website to have a horizontal navigation, and that also goes with magazine-styled websites.

Horizontal navigation limits the space used because navigations always go from left to right. Also, you don’t have to scroll down to find the last navigation. Adding on to that is the easy to understand drop down sub menus.

As I am searching for magazine-styled websites, I have seen one website with vertical navigation.

The good thing about vertical navigation is you can group sub categories without using a drop down menu. But, seldom web designers use vertical navigations for users quickly notice the menus if they are put at the top, horizontally.

2. Drop Down for Sub Menus

Since there are various menus and sub menus for a magazine-styled website, drop down menus make it easier for visitors to find what they are looking for.

Take a look at the website Slate. Instead of using sub menus under the main menus, you will see the articles listed on that menu.

3. Categories

Because magazine-styled websites have lots of contents, most of the articles are categorized to let visitors find what they are searching for based on categories.

4. Search Bar

The same goes with Search Bar. Websites with magazine style of layout have many contents to put on, and that is why most of them have search bars. In this case, visitors can find the specific topics they are searching for easily and quickly.

5. Popular News/Stories Section

Articles listed on the Popular News or Stories section are the most read by visitors of a website. Listing these kinds of articles is a great way to inform your readers on which are the most clicked.

6. Latest News/Headlines

With many contents posted on websites, putting Latest News or Headlines section on a website is recommended. This informs visitors and users on what the newly published articles on the website are.

Look at this website, not only that headlines are listed, there is also a mark saying “Most Read” for the most clicked link in an article. This informs users which are the popular ones.

7. Images and Videos

Putting images and videos on your website is one way to capture the attention of your visitors. Images are one way of letting your visitors understand the message you convey. And based on research, people like to view images rather than reading pure texts only.

Videos have become more common for online websites today, especially with online news sites. If viewers missed something on TV, they can watch it online. And instead of reading what seems boring to some viewers, they can just watch a video relating to that article.

8. Light-colored Background

Magazine-styled websites have light-colored background and the commonly used color is white. Light-colored background is better for it makes the content readable.

9. Columned or Grid-based Contents

Like what we see on magazines, contents are grouped into columns or sometimes into grids. The same goes with magazine-styled websites, grids are effective to use for they keep the contents well-spaced and noticeable.

10. Clean Typography

For magazine-styled websites, it is important to consider the typography for it puts a lot of content on a page.

Take a look at The New Yorker website. Even though it has a lot of content on its homepage, it still looks organized because of the neat-looking typography, grid-based contents and also the white background it has.

In this article, I collected different kinds of well-designed websites with magazine style. I hope you will be inspired like how I was with this compilation.

1. Azure

2. InStyle

Instyle

3. InStyle UK

InstyleUK

4. Giant Magazine

5. People

People

6. UGS Magazine

Ugsmag

7. Clutch Magazine

Clutch

8. Typographica

Typographica

9. Vogue

Vogue

10. Dazed Digital

11. WWD

Wwd

12. Justine Timberlake Website

Justin

13. GQ Magazine

Gqmag

14. Macalicious

15. Vanity Fair

Vanityfair

16. Spin

Spin

17. WMagazine

Wmagazine

18. Rua De Baixo

19. Black Book

Blackbook

20. NFL UK

Nfluk

21. Wired News

Wired

22. Zaum & Brown Website

Zaumandbrown

23. Details

Details

24. More

More

25. UX Magazine

Uxmag

26. New York Magazine

Newyorkmag

27. One Nation Magazine

OneNation

28. Frieze

Frieze

29. INC

Inc

30. San Francisco

Sanfrancisco

31. Creative & Live

Creativeandlive

32. IndiePit

Indiepit

33. Portfolio

Portfolio

34. BMI Voyager

Voyager

35. TIME

Time

36. The Christian Science Monitor

Christiansciencemonitor

37. CNN

Cnn

38. BBC

Bbc

39. Economist

Economist

40. FILE Magazine

Filemagazine

Before I finish, let me give you some advantages of a website with magazine style of layout.

Advantages of Magazine-styled Layout

1. It gives a professional look of a website.

A light-colored background with a clean typography where contents are put into columns or grids are some of the ingredients to make a website look professional.

2. Good choice of style for websites with a lot of contents to put on.

With a magazine-styled website, you can put several contents on a page without cluttering them.

3. It is easier and quicker to search for topics.

It is easier and quicker for users to search a certain topic for they are categorized. For instance, most read articles are found on the Most Popular section. While, newly posted articles are to be found on the Latest News or Headlines section.

To be fair, let me also give you the disadvantages of a magazine-styled layout.

Disadvantages of Magazine-styled Layout

1. Confusion on what to click.

Viewers might be confused on what to click because many things are posted on a page.

2. Contents may look cluttered or disorganized.

If magazine-styled website is not well designed, contents may look cluttered or disorganized. To help you with this, always stick on a light-colored background, columned or grid-based contents and clean looking typography.

3. More maintenance and updates.

A magazine-styled website entails more maintenance and updates on the part of the web administrator. But it still depends on how often the website is updated. The more articles published, the more work for the administrator.

Share your Thoughts

What about you? What do you think about magazine-styled websites? Let us know your thoughts on the Comment section.

June 04 2010

21:00

45 Mobile Web Designs To Show You One Of Future Trends

Even if now not many visitors come to the website through his mobile phone, but be sure it’s the future, where people will use their smart phones everywhere to access their favorite websites when they are on the road and want to fill their free time with useful reading.

We are designers and we need to think how to create more usable sites for such needs and today we showcased 45 great mobile webdesigns to get you inspired!

If you do not know you can check other website designs here – this is iPhone simulator, but there are plenty of other ones to check on Android,Windows Mobile etc. –   just input there website you want to check and hit enter. Also thing to remember, if site has mobile design version and you don’t get it automatically, you can access it by putting “m” before website address –  “m.example.com” –  from smartphones and iPhones you need to use this mobile address as well to access it.

1. Victoria’s Secret Pink

Victoria-secret-pink-mobile-web-design-showcase

2. Alex Buga

Alex-buga-mobile-web-design-showcase

3. Vondi

Vondi-mobile-web-design-showcase

4. University of Alabama

University-of-alabama-mobile-web-design-showcase

5. Virgin Blue

Virgin-blue-mobile-web-design-showcase

6. Toy Soldier

Toy-soldier-mobile-web-design-showcase

7. Wegmans

Wegmans-mobile-web-design-showcase

8. Design Quest

Design-quest-mobile-web-design-showcase

9. iWeathr

I-weathr-mobile-web-design-showcase

10. Marina Yachting

Marina-yachting-mobile-web-design-showcase

11. Dolce & Gabbana

Dolce-gabbana-mobile-web-design-showcase

12. Vimeo

Vimeo-mobile-web-design-showcase

13. WVU Today

Wvu-today-mobile-web-design-showcase

14. Burger King

Burger-king-mobile-web-design-showcase

15. Sony

Sony-mobile-web-design-showcase

16. YellowPages

Yellow-pages-mobile-web-design-showcase

17. Singlehop

Singlehop-mobile-web-design-showcase

18. McDonald’s

Mcdonalds-mobile-web-design-showcase

19. AOL Money & Finance

Aol-money-finance-mobile-web-design-showcase

20. Nclud

Nclud-mobile-web-design-showcase

21. Procab Studio

Procab-studio-mobile-web-design-showcase

22. Marcel Muller

Marcel-muller-mobile-web-design-showcase

23. Pixanimal Studio

Pixanimal-mobile-web-design-showcase

24. Android and Me

Android-me-mobile-web-design-showcase

25. Erskine

Erskine-mobile-web-design-showcase

26. Mashable

Mashable-mobile-web-design-showcase

27. Productive Dreams

Productive-dreams-mobile-web-design-showcase

28. Far From Fearless

Far-from-fearless-mobile-web-design-showcase

29. Twitter

Twitter-mobile-web-design-showcase

30. Just Creative Design

Just-creative-design-mobile-web-design-showcase

31. Nike Lab

Nike-lab-mobile-web-design-showcase

32. Print Fancy

Print-fancy-mobile-web-design-showcase

33. Ammy Stoddard

Ammy-stoddard-mobile-web-design-showcase

34. Plaveb

Plaveb-mobile-web-design-showcase

35. Coosh

Coosh-mobile-web-design-showcase

36. HTC

Htc-mobile-web-design-showcase

37. Lexus IS F

Lexus-isf-mobile-web-design-showcase

38. CWTV

Cwtv-mobile-web-design-showcase

39. Deviant Art

Deviant-art-mobile-web-design-showcase

40. MySpace

Myspace-mobile-web-design-showcase

41. Smashing Magazine

Smashing-magazine-mobile-web-design-showcase

42. Wacom Bamboo

Wacom-bamboo-mobile-web-design-showcase

43. Flickr

Flickr-mobile-web-design-showcase

44. Digg

Digg-mobile-web-design-showcase

45. Mobilize Media

Mobilize-media-mobile-web-design-showcase

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...