I am working on redesigning my website and iterating through fivesecondtests.

The overall feedback is improving but no matter what I change, several people have mentionned that my designs look "dated". "Not modern". "Use modern fonts".

What are "modern fonts"? Technically, Calibri, Cambria, etc. are "modern fonts", but I hardly ever see those online. What fonts are considered "modern" in the context of web design?

What are the characteristics of a "modern design"? Conversely what are the tell tale signs of a "dated" design?

For reference, here is the latest iteration of my design. Does it still look "dated"? If so, what elements give that impression?

Latest version

I think I am starting to get a better idea of what "modern web design" is:

  1. No or light gradients
  2. Sans serif typefaces
  3. Light drop shadows
  4. Good page hierarchy / directing visitor's attention

Is there anything else that makes a design look "modern"?

I have implemented the most of the recommendations in the answers, and I feel it has improved the design a lot. (Never mind the logo - will figure that one out later)

"Modernized" version

Am I still stuck in the past? Or am I finally getting somewhere?

Implementing all recommendations, this is what I get: All recommendations implemented

It's obviously much better, but is it up to modern standards yet? If not, can it get there without changing massively the layout?

The learning process never ends, does it? Assume that the central menu has a lava effect and that hopefully I can get a decent photo of myself shot to replace that one.

Newest iteration

Looking at the various versions, I can see the design improving by leaps and bounds. Not sure how much further it needs to improve to reach professional standards, but it's certainly moving in the right direction.

Thanks a lot to all of you. I am impressed by the quality of the advice and how specific and actionable most recommendations have been so far.

  • 9
    It does feel a bit dated circa early 2000's. I'd tone down the 3-D effects, drop shadows, large gradients, 3-D logo etc.
    – DA01
    Commented Oct 22, 2012 at 15:59
  • 2
    I second removing the gradient and 3D effects. I like subtle drop shadows so that the site doesn't feel flat, but not huge towering ones. Commented Oct 22, 2012 at 16:49
  • I am about 50% sure this is a joke - or at least, that this doesn't represent an actual design attempt, and you're deliberately showing a bad design in order to challenge the community to examine what makes it bad. If the latter, then well done - it's been a good exercise. Commented Oct 23, 2012 at 3:18
  • @thomasrutter No, that was a genuine design attempt, and not even a first attempt (if you think this one was bad, you ought to see the earlier ones). I glad you found it an interesting exercise nevertheless. One thing I noticed however is that when shown to average people, reactions are somewhat positive (they rate it 6-7 out 10), whereas some designers tend to respond as if this was the worst design they have ever seen (1-3 out of 10). Sure it isn't great, but aren't you exagerating a bit?
    – Sylver
    Commented Oct 23, 2012 at 7:30
  • 1
    It's not bad but it looks very very 2001 which, to a designer, looks bad. Back then, "modern" meant flashy with glass-like effects, in 2012, "modern" means clean, simple, understated, occasionally slightly tactile. To add some "dated"-looking specifics - the curves around 'login' and the links bar are noise, and the padding around those links is very tight, feels busy not airy. Both logos are over-complicated, the new version's heavy black lines weigh it down. The styling of the buttons is louder than what they do. 'Modern web fonts' prob means more open, higher x height. Commented Oct 23, 2012 at 7:43

7 Answers 7


Your button styles are very old school. Try a CSS-only button to streamline maintenance for you and avoid unnecessary effects on the presentation side.

The logo has an early Y2K clip art look to it. Unless you've put a lot of effort into branding it, I'd just drop the graphics and go with the type if you aren't going to pay a pro to draw up something unique.

The 3D arrows you're using for bullets are bizarre. Try just using a plain old <ul> and avoid the graphics here as well.

In general, the page seems to lack a clear vision of what you want your visitor to look at.

  • The left and right sides of the feature area are competing against each other. Decide which is more important to the biggest/most profitable group of visitors and give it center stage.
  • The headline below the feature area ("Languages of ...") uses a larger font than the ones above, which makes me think it might really be the most important thing to view.
  • You have equally weighted navigation/links in two places: at the top and in the mid-line of the page. Which set of links am I supposed to care about?

The level of sophistication on the web these days makes anything without an efficient UI look dated.

  • Separate note on the branding. If you want something more than plain type for your mark but you have a tiny budget, there are plenty of bargain freelance design sites out there. You aren't going to get the best work available. On the other hand, those communities of mediocre designers, struggling students, and designers who just have some time to spare will probably create a better design than your best efforts. Put an offer out there and see what you get. Here are a few low-ball sites to consider: 99designs.com / guru.com / elance.com / sortfolio.com Commented Oct 22, 2012 at 19:50
  • 2
    Don't use crap like 99designs. It's bad for the customer, and it's bad for the designer.
    – DA01
    Commented Oct 22, 2012 at 21:33
  • @plainclothes Thanks for these very actionable comments.
    – Sylver
    Commented Oct 23, 2012 at 7:45
  • 2
    99 Designs is a really bad compromise. I argue that a DIY logo, though perhaps ugly, is going to have more personality than any of the generic crap one would get from 99Designs.
    – DA01
    Commented Oct 23, 2012 at 17:54
  • 1
    And I also argue it is not a legitimate way to get professional work. The people on 99 designs are not professionals. They are working for pennies and, as such, are obviously not investing in legitimate software, typefaces or pragmatic working methods.
    – DA01
    Commented Oct 23, 2012 at 17:55

I think the use of the word "modern" here is very broad, and usually means - minimalistic, clean, geometrical, efficient

basically it means remove all unnecessary decorations and put the content in the center

some tips to achieve modern look for your UI

  • typography - prefer sans-serif fonts
  • fonts - google fonts is a good source
  • colors - colorhunt is a good source, also dribbble.com/colors/
  • imagery - edge-to-edge
  • images - unsplash / pexels are a good source
  • illustrations - undraw is a good source
  • spacing - generous negative space, avoid boxes / separators

I attached a comparison to what i consider to be a more "modern" UI design - notice how a lot of the elements are REMOVED and stripped to their essence

comparison see bigger version

  • Thanks, this is an awesome answer. Very appreciated.
    – Sylver
    Commented Apr 11, 2020 at 19:57

You're basically asking how to design, which is an incredibly broad question.

Basically, there are two types of people who design websites:

  • Those who have an eye for design and can both notice what others are doing and come up with their own new styles.
  • Those who design by following procedures they've been taught.

Unfortunately, it looks like you are the second one, and the design procedures you've been taught (or taught yourself) are about 10 years old - design procedures and conventions that virtually nobody uses anymore.

Just 3 of the things which look "dated" and "old-fashioned" in your example are:

  • The shiny, reflective, curved buttons with drop shadow. Seriously, nobody has designed like this for something like 10 years. Here is one example of how buttons are done these days.
  • Those gradients. People don't do gradients like that anymore, and haven't for some time. People are either not using gradients, or sparingly using very subtle ones, or subtle shadow effects instead.
  • Menus like that across the top are nice, but people tend to try harder to make menus menu-like rather than the older "Text links | Separated | With | Vertical bars" method.

You need to somehow be able to "open your eyes" to the design of web sites as you view them. Notice how websites these days do buttons, menus, and the like. When you design, don't follow any of your old design procedures or methods, but instead take notice of what others are doing.

  • Thanks for the suggestions. What's a "menu-like menu"? (Your Evernote example also uses one of these older "Text links | Separated | With | Vertical bars")
    – Sylver
    Commented Oct 23, 2012 at 7:44
  • See the down arrow on the Evernote example menu. That indicates when I mouseover it there's going to be a drop down menu. See my answer below which elaborates on this very point.
    – Ryan
    Commented Oct 24, 2012 at 20:41

The third version is looking much better. Here's a few additional changes I would make.

Drop the little flying arrows and dotted rules in the background. They're just a distraction from in an increasingly focused layout.

Don't stretch the type in your buttons.

Make up your mind in the top half of the page. You still have two competing blocks of info. Here's what I would do:

  • Make "Professional translation services" the headline over the whole thing.

  • Move the bullet list to the left side.

  • Remove the "Need translations?" headline.

  • Shrink the box with the call center lady down to about the height of your bullet list (cut the padding about in half).

  • Put the buttons in the center of the page under all of that info.

With all that, I'd say you're ready for prime time. After you make your first $100k on this, go hire a UI designer to take it to the next level ;)

  • Thanks a lot. You're right, it's a lot more focused that way.
    – Sylver
    Commented Oct 26, 2012 at 7:35

from my point of view Modern design is a new direction to make the users achieve their goals fast with no extra effort from their side and with no extra work from the designer side, whatever what the users need (Entertainment , Buy a product, Promotional or even to submit a form...ect)

take in your consideration the following when you design:

  • fonts : using Html fonts with different sizes to the Titles and text content (almost with big Fonts) too make the performance of your website more fast. there is a lot of designs this days depending on text only with a limited graphic items.

  • Images: choose images wisely; for example it’s not preferable to use an image just to fill a space and brought you a nice look, but you use it to complete a message, so you have to choose it carefully at the context of design . Some of the new designs technics using Illustrator shapes and Icon instead of images cause it make the same result by delivering the message and make the performance more fast also it help you makes a clean and a professional design

  • You will get the Modern design sprite from looking to others designs at the same service you work on. I have some links I think it's matching with the same goals for your Design with different technics:






Without getting into specifics because that won't benefit anyone else so much:

Modern Design in general means making use of the tools available currently in an efficient manner. Such as others have said and you eventually changed the logo to text and the price list / get started to text. In the past everything would be done with images and complex tables because that was the only available technology. Now CSS3/HTML5 and tools like JQuery and Ajax allow a lot more to be done without superfluous graphics everywhere. Even drop shadows can now be added through CSS which would probably help your design.

Other things are for example on the mid-screen menu thanks to modern tools you could easily add a nice hover effect. I obviously don't know if there is one already but I doubt it based on the design.

Likewise backgrounds have predominately been simplified because they take up bandwidth, don't function very well on different size displays such as smart phones, and in general don't serve much function.

You also don't usually see the "Headphone Stock Image" anymore as studies have shown they're ineffective.

Another thing that dictates modern design is SEO and Social Media. That's why content and descriptions are more important than stock graphics or bubble-buttons. Your design also seems to lack any consideration of sharing features (G+, FB, Twitter, etc...) which in itself would give the illusion of the design being more modern.

  • I am just working on the general look and feel in Inkscape. Interactivity and effects will come later. CSS3 is not fully supported (not even close) and I don't want to get into the whole hassle of fallbacks and polyfills when a small picture can provide the same effect accross all browsers (or am I missing an advantage of having a CSS drop shadow?). For the headphone girl, can you provide a link to some of the studies? I remember reading the opposite, but can't find it.
    – Sylver
    Commented Oct 25, 2012 at 5:28
  • The advantage of CSS is that its responsive so a viewer on a smartphone and a viewer on a Windows XP computer or iPad all have positive experiences. It also allows for much easier changes across the entire website. As for the headphone girl and generic images in general: (1) useit.com/alertbox/photo-content.html (2) inboundmarketingagents.com/inbound-marketing-agents-blog/bid/…
    – Ryan
    Commented Oct 25, 2012 at 19:30

From my understanding of what you are asking it is very subjective to quantify a design as " modern". However many website design maybe considered "modern" because of their presentation, look and feel, inclusions of interactive graphics (html 5, JavaScript, flash) and beautiful illustrations on the website. Some may consider your website old because it visually looks like ... well old website :( (pre-drupal,wordpress even pre-flash)
Your website looks very plainly a very simplistic design (which is good thing) but is not appealing visually. You should try and change your layout, integrate your logo better into your site and also try to add an animated banner. Also the "thanks a lot" is a little old fashioned.
You really don't have to look very hard to find cool and inspirational designs on the internet :)

Most of today's websites which maybe considered modern are made using Drupal, Wordpress, Joomla or another CMS (but these 3 are very well known. open source and you can download them for free)

Here's the basic layout for Drupal and what you can do:
Valid Xhtml

  • For some cool buttons see here
  • For a menu bar that moves with the page scroll you can see this
  • For a drop down menu you can see this
  • You can make a slider/slideshow on your own or use software for it like SlideShowPro or a free one - WOW Slider.You can do all sorts of things with this - make it scrollable and in many cases its a good idea to link it to your menu bar. (See here for some inspiration)
  • For smooth scrolling see this

The rest really is upto you. Make good use of the Triptych part ... it can make your site go from cool to awesome (again see smooth scrolling - this is extremely handy). Use AJAX to make your site more dynamic (because modern designs won't just relate to the visual appeal of your website but also the interaction of your site with the viewer) (jQuery makes life simple here).

Here's the thing mate: You can skip all of this and just do your own thing. How you design essentially comes from you. Its your way of looking at things. Wordpress, Joomla and Drupal are used extensively in modern websites - from big corporate names to everyday users. Now to go back to your title question of "modern" design - pardon me here, but I don't know what is the purpose of your website, your deadlines or client - But the latest in web design is HTML5. Check out the Chrome Experiments, which really are making these designs look outdated, and some cool sites built using HTML5 and JavaScript.

  • 2
    Could you edit this down to the actual recommendation?
    – e100
    Commented Oct 22, 2012 at 16:27
  • So basically you're saying, make the logo more prominent and add an animated banner? Commented Oct 23, 2012 at 3:27
  • @thomasrutter not really. i'm asking him to use css,javaScript and flash to make the site more interactive and visually appealing for a visitor
    – user806168
    Commented Oct 23, 2012 at 5:18
  • 1
    Should he add some blinking text and marquees too? Advising him to improve his website design by adding Flash or other things that animate or move seems a bit misguided and a bit ten-years-ago too... Commented Oct 24, 2012 at 0:46
  • @thomasrutter I was asking him to use Flash but not limit himself to it. I also asked him to use HTML5 and javaScript (which you consider "other things") to create cool interactive site elements . And some of the best sites on the web today are made using these "other things". I asked him to add cool illustrations and animations - not blinking text and marquees. Take a look at the chrome projects or just google HTML5 sites - I think they just maybe changing people's perception of what "modern" design is, which is what he asked to begin with .. that's all I was saying mate
    – user806168
    Commented Oct 24, 2012 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.