View Post
10 Popular Trends in Modern Web Design Elements

10 Popular Trends in Modern Web Design Elements

Trends in web design can change and fade almost as quickly as they become fashionable. But so far in 2013, a handful of trends have really seemed to take web design by storm, and seem to be sticking.

Today, we’re going to examine ten trends in modern web elements and showcase some great examples of each — everything from vintage typography and circles, to vibrant colours and handy vCards. Even better for you is that all of the examples below are available for download (some free, some paid).

1. Vintage Typography

2. Realistic Effects

3. Vibrant Color

4. Ribbons

5. Flat Icons

6. Vintage Logos or Badges

7. Cards

8. Circles

9. Simple Gradients

10. Sliders

For the full article, go to:

View Post
10 Things I Learned About Design From iPad Apps

10 Things I Learned About Design From iPad Apps

Good design is all around us. Not just in printed materials or on websites, but also in everyday items. What’s great is that you often don’t notice it — you just enjoy whatever item, tool or website you are using.

Nowhere is this more true than with mobile apps. Most of us use them every day, but do you ever stop to think how much they are shaping the way you approach design? Apps can be a great source of inspiration and also another reminder of time-tested design concepts. Here are ten of the great lessons I have learned (and re-learned) from iPad apps.

1. Focus on Simplicity


Clean lines and simple user interfaces are common among apps. It is something we are seeing more of in other types of design as well. The branding themes from Apple itself has followed a concept of simplicity for some time, and that has translated well into its products — something app designers seem to have embraced.

Simplicity is also important because of size – too much to look at or choose from on a small screen can be overwhelming. But this also works for the time-strapped user. Keep it simple, easy to use and quick to understand and people will likely embrace your design project.

And while we are talking about basic design principles, remember to make web designs responsive. Nothing is more annoying than an app that does not turn when you rotate the screen. The same is true for a website that does not adjust for browser size.

Examples: Apple iOS, KindleNext Issue

2. Not Everything Has to be Square


Have you ever noticed how much of the iPad (and iPhone) interface has rounded edges? If not, go take another look. The simple curvature reminds us as designers that it is OK to not always be perfectly square.

What’s great about the icon shape is that it is quite simple, a bit unexpected and un-dramatic. Effects do not need to shout at a user to be appreciated. They are often most effective when they just fall into the overall design scheme.

Examples: iBooksHundreds

3. Sleek Design Matters


Things really do have to look polished. And complete. There are just too many choices out there, and people are not going to spend time with things that look bad or are hard to understand.

A few years ago you might have been able to get away with a hint of sloppiness or a beta release of a site with some issues, but no more. In this no-holds-barred-world, everything is critiqued, criticized and analyzed. Make sure your project is completely finished and functioning properly if it is online. And then make sure it looks amazing — people have come to expect good design.

Examples: Weather HDFanhattan

4. Think Big for Calls to Action


Sometimes you have to scream to get your message across. Whether in print or online, calls to action, such as buttons or phone numbers need to carry some weight. Show users where to click online. Don’t make them look for it.

Provide immediate facts such as contact info, pricing or event information in online material so readers don’t give up before understanding what you want. In printed media, also consider a digital component, such as a QR code, to keep people engaged.

Examples: Pimp Your ScreenSkype

5. Engage Users/Readers


The joy of a good app is that you keep going back to it, whether it is a game, a tool or just a daily diversion. Treat your design projects with that in mind – you want people to come back.

But how can you engage them? There are a lot of tricks out there from gamification to contests, but the best way is with a quality product. Think about your projects, what can you do to really make them great and encourage people to come back to them again and again?

Examples: Angry BirdsNike+

6. Stick to a Minimal Color Scheme


This has always been a goal for designers, but apps really brought it back into focus. Sticking to a minimal color scheme is of utmost importance.

What really strikes me about some of the best apps is the use of a single color and tints to create a really distinct design – Food on the Table is a great example. It creates a perfect sense of what app you are looking at from the minute it opens, which can be great for those who often tap the wrong item.

But other apps work great with just a color or two. The balance is lovely. And there is a lot to be said for keeping things like type simple — black and white never goes out of style.

Examples: Food on the TableBusiness Card Designer

7. Flat Design is OK


Apple is often seen at the other end of the spectrum from flat design, but more and more iOS apps are employing a more flat design interface. Forget all the fancy shadows and effects; elements are just displayed on the screen. And it looks good.

This design principle falls very much in line with the theme of simplicity and is a great tool for ways to try something different with design projects.

Examples: FacebookCNN

8. Spacing, No Matter How Small, is Important


In smaller spaces, spacing becomes more and more important. It creates a mood – from open to cramped – and can dictate readability. Moreover space is key to usability when it comes to tapping apps, if you touch too many things, it will not work properly.

Sometimes as designers – especially when dealing with limited spaces in print – we will try to cram too much information in a space. But what we really need to do is work to use that space more efficiently. Design with open, white or negative spaces to create a better feel and make readers more comfortable while processing your information.

Examples: Band of the DayThe TUXedo Builder

9. Clean Navigation Counts


Navigation is paramount in a mobile app — it has to be fast. Apps often use only a few options to direct users – think of a this-or-that model – which can translate well to other types of projects. Too many options can be a bit overwhelming.

So how do you create clean navigation for non-web projects? Use weight to establish a clear hierarchy for the eye. Tell readers where to start, and then how to move through the creative material. Remember that bigger, bolder items will likely be the first things that will cause the eye to stop.

Examples: FlipboardDropbox

10. Every Visual is Important


You can’t get away with a poor visual in an app – ever. Think about the sharpness of the iPad retina display or the zoomability of any object on the screen. Poor images will ruin an otherwise solid design in a minute.

We’ve all done it – snuck in a poor quality image at some point – but apps have really made me remember how bad of an idea this truly is. Every little pixel will jump off the screen. Every person looking at it will question your commitment to quality.

Poor images are poor images. Stay away from them. It is actually better to forego an image than use a bad one just to fill space.

Examples: SnapguideFantastic DinosaursPopsugar


What’s great about apps is they have taught designers (myself included) a whole new appreciation for great design. They’ve also made us much less tolerant of poor design.

The biggest lesson any of us can learn from them is to get back to the basics. Quit decorating and start designing. Think about the principles that make something great and go with it.

Now that we’ve got you thinking, what are some things you have taken away from apps?



30 Quick Ideas To Make Your Website Look Nicer

As we launch newer projects, it is easy to forget about updating older blogs and websites. In this article I want to present 30 solid ideas you can quickly implement to make your website just that much more user-friendly. Not all of them are based solely on front-end design. I will also discuss popular HTML5 coding techniques which can help web parsers and spiders to categorize your data appropriately.

Not every website will need to be updated, and not with every technique available in this post. These ideas are here to get developers thinking in terms of design and how to make websites look prettier. It’s now easier than ever before to build scalable responsive website layouts which look good on any digital screen, so let’s get to down to sprucing up our sites.

1. UX Testing

I am guilty of not always running tests on my website launches, but whenever possible this is one of my favorite activities. You can learn so much about typical user interactions by studying how they play with your website. User experience studies may be conducted solely through tools like Google Analytics, or using other 3rd party resources.

custom UX team design meeting board room

The potential benefits you can find are enormous. User experience testing is helpful for web developers to learn which areas of their website are annoying, broken, or could be improved. Consider using not only digital tools but also your friends and colleagues. Listening to some real human feedback on your website may provide results you couldn’t get through a computer screen.

Read Also: Useful Web Usability Testing Tools

2. Whitespace

We can think of whitespace as the amount of room between elements in your page. Some users will not mind a cramped layout if they are already accustomed to this. But consider your target audience, and consider how many of them are not as computer literate as the younger generation.

You may determine areas which need extra spacing through split A/B Tests and retaining user feedback. Or just wing it and see what you can come up with!

Also Read: 100+ Clean, Simple and Minimalist Website Designs

3. Web Fonts

Dynamic web fonts allow designers to build webpages without being restricted to the typical font families. This trend has become increasingly popular now that most average Internet users are on a decent DSL/T1/Fiber-Optic connection. Including references to 3rd party font stylesheets will no longer produce major lag in your DL speeds.

Google Web Fonts homepage screenshot preview

Quite possibly the best provider of fonts is through Google Webfonts. You can access the application even if you do not have a Google Account, although there are perks to registering. The full setup process takes only 3 steps and you can have custom Google fonts running on your website within minutes.

4. CSS3 Shadows

When I’m talking about using shadows to improve your layout I am actually referencing two distinct properties. The ever popular box-shadow is really cool for divs and boxes within your layout. Appending this effect onto your container, wrapper, or inner page boxes will provide a slimming 3-D effect to your webpage.

Also Read: 10 Creative Techniques Using CSS3 Box Shadow

But it is also worth considering the CSS3 text-shadow property for typography which jumps off the page. Apple is one of the first companies to heavily implement text shadows all around their layout. You can build a daunting effect by adding text shadows which are opposite the color of your fonts (white shadows for dark text, black shadows for light text).

5. Textures & Repeating Patterns

There are plenty of websites which can get by just using standard color schemes. But to have your website really stand out from the crowd you may consider adding textures and repeating tiles into your background. One of the coolest free webapps is Noise Texture Generator which can run on any browser.

Subtle Patterns website design layout thumbnails

Just choose the BG color and amount of noise you want to use, then this app will create a tiled background image dynamically. If you’re looking for patterns and tiles then I would recommendSubtle Patterns. They have a huge collection of usable textures which you can download for free.

6. CSS3 Gradient Backgrounds

While we’re discussing backgrounds I should bring up the ever-popular CSS3 gradients. These provide web developers with an enormous benefit keeping them out of Adobe Photoshop for web backgrounds. And these gradients can work on more than just the body, applied onto navigation bars and footers and other important areas in your layout.

Recommended Reading: CSS3 LinearCircular, Elliptical and Repeating Gradients

7. Boostrap

Twitter’s Bootstrap is quite possibly the greatest frontend UI framework for web developers. This includes buttons, form inputs, links, columns, and tons of other pre-formatted page objects. The most common use for Bootstrap is within landing pages for new applications.

But open source developers also utilize Bootstrap when building demo pages for the libraries, plugins, or mini scripts they publish.

Twitter Bootstrap Github entry screenshot

I feel that Bootstrap has grown to such a massive extent that it may be applied into any website these days. However developers who find the greatest benefit are using Bootstrap as a quick replacement for rolling out their own UI designs. Consider this frontend library the next time you are launching a webpage with a single concrete purpose: landing page, product demo, mobile app website, etc.


8. HTML5 Kickstart

Most web developers have yet to hear about HTML5 Kickstart created by 99Lime. This is another frontend UI library which focuses more on nice design aesthetics than common HTML5 layouts. But there are code samples for generating both in spades. You can choose from sets of predetermined elements like gradient buttons and dropdown menus. I wouldn’t say this has the same popularity as Bootstrap, but then again what does?

HTML5 Kickstart 99Lime homepage open source screenshot

If you have the time and patience I would recommend just giving this library a quick test run. Build a small sandbox layout and see if you enjoy the default feeling off each UI element. Kickstart is certainly not for every project, but it can be a major time-saver when caught in a bind.

9. JQuery UI

Animations and sliders and fading elements are usually running off the jQuery library. This is the most common open source JavaScript library for frontend developers, but it also has a companion library jQuery UI. Developers overlook this, thinking it cannot provide very much in return for the extra KB.

But including the UI library means you can update the easing call for any dynamic page animations. This means you may customize the jQuery animation type for any dropdown menus, fading items, scrolling slideshows, and everything else dynamic.

The jQueryUI website has an easing demo page where you can test out the many variations and see if you like any specific animation types.


10. Extravagant BG Photos

There are countless websites nowadays which have utilized the fullscreen background image effect. If you can find a high-resolution photo sample which would look good as a background image, then this technique may be worth adding into your layout. Large backgrounds do an excellent job of catching your user’s attention while also implying the genre of your website.

jQuery Backstretch plugin homepage screenshot

If you’re looking for a quick solution check out the jQuery Backstretch plugin. This only requires a single line of code for your new backgrounds to scale properly and responsively using any resolution. But for developers who are against JavaScript methods I recommend the CSS3 fullpage image technique posted on CSS-Tricks.

11. Menu Icons

To draw more attention from visitors it may be worthwhile to include a small icon set in your webpage. Standard menu links are often enough to function properly and help users navigate between pages. However I am often impressed to see customized icons designed for each menu link. You can find tons of free icon sets which would look perfect in your top navigation, sidebar, or footer area.

12. Updated Color Scheme

I do not actually mean changing your overall color scheme design, but more like appending new colors into it. After running the same layout for months after months it is nice to update smaller areas and catch repeat visitors by surprise. Some items of interest may include anchor links, headers, backgrounds, and toolbars. Consider using online tools such as Color Scheme Designer to improve your trajectory.

updated fresh looking color wheel scheme picker webapp

Recommended Reading: Basics Behind Color Theory for Web Designer

13. Enhanced Browser Support

It is difficult to build a website which is fully supported by all the major legacy browsers. Although very few people are running Internet Explorer 6 it still shows up in a few of my Google Analytics reports. Developers who are looking for ideas may consider doing a small trial of browser tests.

IETester program software debugging Internet Explorer layouts

The more important mainstream browsers include the latest release of IE9, Mozilla Firefox, Opera, Chrome, Safari, and possibly Camino/SeaMonkey. But Internet Explorer 6-8 are also still widely used among businesses and older computer labs. You may run quick rendering tests using the IETester software. Similarly IE8 has a developers tool mode where you can switch into older rendering engines for debugging.

14. Fitted Typography

You may find that your old layouts are still utilizing text styles efficiently, but this isn’t always the case. I feel that large typography will fit into layouts a lot easier. Not to mention it is easier to read and will take up more space on larger screen resolutions.

The idea of “fitted typography” is styling text so that it fits snug in your website. You can go through a few pages and update these styles in 10-15 minutes.

Recommended Reading: Showcase of Web Designs with Beautiful Typography

15. Social Media Sharing

By now I am sure most developers are familiar with the sharing badges used in popular social networking websites. Facebook, Twitter, Reddit, Pinterest, Dzone, and many other external networks provide codes you can embed into your website. Then visitors may share your link onto these networks without needing to leave your website.

On some blogs or web magazines you’ll notice these badges will follow you scrolling down the page. This is an excellent technique since you can often have them hovering just outside the body area where they are not blocking any important content. I also recommend browsing our post on social media toolbars which can have a similar effect.

16. User Discussion

If you are running a CMS like WordPress or Drupal then you have the ability to include comment forms by default. However when creating static webpages you would need to setup your own database system to mimic this functionality. But with the rise in open source technology developers may now implement better solutions such as Disqus.

Disqus comments system homepage screenshot

Using this method you are not constantly dealing with cleaning up spam and junk from the discussion area. Users who do not already have a Disqus account may quickly connect using popular social networking profiles, or signup right from your page. Even WordPress users who are sick of Akismet may switch using the Disqus Comment System plugin.

Recommended Reading: Top 3rd Party Commenting Systems – Reviewed

17. Widen The Footer Area

Most smaller website layouts will be very conservative with the bottom footer section. This may include some basic copyright info and a few main page links. But modern web design trends support the idea of big footers with lots of meta links.

These are commonly seen in startups and big company websites with lots of additional information. Certainly don’t try forcing this into a layout where it doesn’t belong, however it is worth some contemplation if opening up a bigger footer area may improve your website experience.

18. Responsify Images

Dynamic fluid and responsive webpage images have become a trend in themselves. It’s now almost ludicrous to still have your images set at fixed widths, breaking out of the container wrapper as windows are resized. The most common technique is to apply width: 100% using CSS on all img elements.

Responsive Image Plugin jQuery open source download

But you may also consider some other open source methods which may prove useful in a bind.ResponsiveImg is one such jQuery plugin with a very small file size. Just include this into your page and run the single-line code targeting all images on the page. This is an excellent addition to mobile layouts which are still using desktop-based content.

19. Menu Accessibility

I wouldn’t say this is something you should constantly be trying to update in your layouts but it is something that developers and designers do not get right the first time around. I feel it is worth looking back at your navigation systems and brainstorming if there are any better ways to implement sub-menu links.

Sidebars and content areas will often hold accordion menus since there is enough room vertically. But think about horizontal navigation bars with dropdown menus or sliding sub-menus. As long as your menu links are quick and easy to access, there shouldn’t be any problems among your userbase.

Recommended Reading: Coding A Graceful Breadcrumb Navigation Menu In CSS3

20. Semantic Microformats/Microdata

Microformats and the newer Microdata specification are used to extend metadata inside your HTML code. These attributes provide extra information about your content and how it relates to other content on the page. And ultimately these results help Google determine your website’s rank for individual keywords, and within other engines such as Image and Video search.

Microformats homepage documentation website layout

The most notably supported documented version of Microdata is called Their website provides all the information you will need to go back and edit your HTML content with semantic schema markup. This Schema syntax is backed and supported by all the major search engines, and will likely evolve into the future of semantic metadata design.

21. Rearranging Nav Links

For some websites, running on fixed content navigation may not be a real problem. But I have found in some larger business websites or portfolios that certain navigation links are given too much precedence. And similarly there are some items which can rarely be found! Take the time to browse your website and behave as if you were any other visitor.

Consider which links you are most interested in, and possibly any links which you’d like to see added. These may include a brief history of your website, information about the team, contact details, privacy concerns, press releases, etc. It may also help to gather user feedback and see if there arecorrelations between their wishes and demand for new or updated pages.

22. Back To Top Link

If your website publishes very long pages of content then this is a must-have element in your layout. The scrolling Back to Top links can be found almost everywhere these days. Users don’t think to hit the Home key and it can be annoying scrolling all the way back up. The best location for this link is floating alongside your container, or seated right in the footer as we have implemented on Hongkiat.

Hongkiat webpage layout footer back to top link

23. Customize Code/Pre Tags

When first creating a website stylesheet many developers will overlook the typical page elements. Headers and paragraphs are very common, but what about pre tags or inline code tags? These are used to encapsulate preformatted source code syntax like you would see in a text/NFO file. Some websites have no need for these elements, but it is still considered good practice to have them styled just in case.

24. Adding Image Width/Height Attributes

Now this task could easily take a while, depending on how many images you would have to go through. But if you find images in your website without a defined width/height it may be worth updating them.

Typically images lacking these attributes will display as a 1×1 px square before loading in full. This will cause your webpages and scrollbar to jump as new images are loaded. Again this won’t be helpful for everybody, but it is worth noting as a quick fixer in some cases. And there are still CSS techniques for responsive images using fixed attributes.

25. JavaScript Notifications

Any developer who has worked in JavaScript knows about the typical dialog boxes. You can setup an alert box which offers the user an OK button, just displaying information. But there are also confirmation alerts with yes/no buttons along with the prompt box which asks for user input.

open source js JavaScript library codes

All of these may be customized using alertify.js. This is a very small open source library for designing your own frontend alert boxes. It is very quick to setup and easy to customize if you need to match your own CSS styles.

26. Responsive Media Queries

This may not seem like a quick bit of code to add, however it really doesn’t take much time at all. Responsive queries can be added into your existing stylesheet or added into a new responsive.cssdocument. Either way you can quickly setup recurring styles to handle various display sizes from monitors, tablets, and smartphones.

dark iPhone 4S mobile safari responsive website layout

Responsive queries do not always need to fully responsify your layout. Sometimes these may just hide bits of content, such as your elongated sidebar or larger footer. You could then display a fully responsive mini footer which is originally hidden in the desktop layout. You can learn more about media queries in our collection of responsive web tutorials.

27. Affiliate Links

There will always be similar websites online building content related to your field. There are very rarely new ideas being created; most of them are offshoots and parodies from existing content. But instead of turning the web into a competition why not create a friendly atmosphere? If you have the extra space in your layout send out a few e-mails to related websites in your niche (search Google) asking to affiliate.

You can exchange links and help bring each other traffic. This opens doors for new users to find your website a lot quicker, and to see that you are included within the community of other websites as well. Plus gaining backlinks from websites with authority in Google can only help your domain’s credibility.

28. Icon-Based Fonts

Recently I was reading an article on 24ways which discussed icon fonts and data attributes. This got me thinking about the future of web design and how HTML/CSS has dramatically affected frontend coding. Icon-based fonts are perfect for a number of reasons including navigation menus, ordered/unordered lists, and even basic page content.

Icon Fonts are Awesome article CSS-Tricks website

Many of these fonts can be quickly added into your website using @font-face. This means you don’t need to rely on a 3rd party service like Typekit for hosting your fonts. It also means a more semantic design style rather than just using PNG icons.

29. Image Box Shadows

If you want to keep visitors on your page longer then you need to offer some real quality content. This may already be the case for your website, however if your styles are bland then people will look elsewhere. Atmosphere and aesthetics are huge in good web design.

I recommend building a quick image class which wraps a border around your page images. This may include a small box shadow along with borders and padding, too. Anything to help your images jump off the screen and stand out in the paragraphs of text.

Recommended Reading: 10 Creative Techniques Using CSS3 Box Shadow

30. Alternate Stylesheets

Consider all the various media styles you have to include when building a single website layout. This would have to look good on desktop monitors, laptops, tablets and possibly even smartphones. And don’t forget projection and print media, which is not always supported.

If you have a large audience who uses these obscure types of media, I recommend styling your own alternate stylesheets. These can be labeled based on the media type such as print.css, or added into your existing stylesheets. If there is enough demand then your visitors will be eternally grateful. And it honestly doesn’t take a whole lot of time to edit your default website layout for common printers.

Final Thoughts

Creative designers and especially frontend web developers will hopefully find some useful techniques among this list. Most of these ideas shouldn’t take more than 1-2 hours to implement, while many can be be accomplished in as little as 15-30 minutes.

Reevaluating your website layouts and updating with new trends from time-to-time is often a good idea especially with newer releases of CSS3 properties which allow native browser shadows, animations, and rounded corners. This is an excellent collection of ideas worth a glance if you are in need of some quick updates.