Modern design - What's that?

Question

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:

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)

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.

Answer 1

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.

Answer 2

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

see bigger version

Answer 3

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.

Answer 4

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 ;)

Answer 5

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://quelleworks.com/quelle-works-the-content-and-translation-company-in-hinejwadi-pune/

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

http://www.englishtospanishraleigh.com/

Thanks

Answer 6

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.

Answer 7

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

• For some cool ideas of what this or a similar layout scheme can be tailored into see here.
• See this for some more inspiration

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.