# Modern design - What's that?

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?

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

2. Sans serif typefaces
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)

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

Implementing all recommendations, this is what I get:

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.

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.

• 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 Oct 22 '12 at 15:59
• 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. – Lauren Ipsum Oct 22 '12 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. – thomasrutter Oct 23 '12 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? – Sylverdrag Oct 23 '12 at 7:30
• 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. – user568458 Oct 23 '12 at 7:43

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 – plainclothes Oct 22 '12 at 19:50
• Don't use crap like 99designs. It's bad for the customer, and it's bad for the designer. – DA01 Oct 22 '12 at 21:33
• @plainclothes Thanks for these very actionable comments. – Sylverdrag Oct 23 '12 at 7:45
• @DA01 99Designs is not going to give you stellar results. Entrepreneurs, developers, and other non-designers who develop a visual identity or UI themselves are also taking a less than optimal route. If you simply don't have a budget to do it the right way, then you make compromises. 99Designs is a compromise. It's still a legitimate way to get work cheap -- no one is forcing those designers to work for peanuts. – plainclothes Oct 23 '12 at 17:48
• 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 Oct 23 '12 at 17:54

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") – Sylverdrag Oct 23 '12 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 Oct 24 '12 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.

• 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. – Sylverdrag Oct 26 '12 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:

http://www.easyling.com/website-owners/

http://www.englishtospanishraleigh.com/

Thanks

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. – Sylverdrag Oct 25 '12 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 Oct 25 '12 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:

• 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.

• Could you edit this down to the actual recommendation? – e100 Oct 22 '12 at 16:27
• So basically you're saying, make the logo more prominent and add an animated banner? – thomasrutter Oct 23 '12 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 Oct 23 '12 at 5:18
• 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... – thomasrutter Oct 24 '12 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 Oct 24 '12 at 5:39