This year has brought powerful new UI concepts, open source projects, and new hacks/tricks for web designers and developers. Those who are interested in what makes good web design have probably noticed the steady improvements. Looking back even one decade to 2003 you’ll find the Internet and the WWW have come a long way.
In this article I want to reflect back back over 2013 at some of the more popular web design trends. Some have been going on for years, but I noticed a peak this year with more designers accepting and even improving upon these techniques.
Dynamic Web Forms
This has been one of my favorite topics worth discussing because of the incredible advancements with jQuery plugins. I like to demo many JS libraries, yet jQuery is still my personal choice for any new project.
I recently found a very handy resource which collects jQuery form plugins to improve user experience. There are other plugins on there too, but the growing category has me giddy every time I visit. You’ll find things like floating labels, input validation, custom radio buttons, checkboxes, even select dropdown menus. There has never been more opportunity to scrap the generic inputs and create your own beautiful interactive web form.
Single-Page Layouts
Websites that don’t have a lot of contextual information will often structure around a single page. This trend has been going on for years, but it has also been evolving to encapsulate newer design trends.
Fixed navigation menus that scroll along with the visitor have grown to be commonplace. This allows the designer to split content into section on the page, where the navigation is more like a scrolling bar to quickly jump around these sections. Parallax single-page websites utilize this same feature with dynamic background elements.
Designers or creative artists with an online portfolio sometimes gravitate towards these layouts. You can present your work and some details about yourself, greatly reducing HTTP requests over long periods of time. Just contemplate all the ideas surrounding single page websites and you’ll find yourself brainstorming other potential avenues for a success interface.
Animated Page Elements
I would argue this is still an emerging trend with some curious developers leading the way. Notably I find page animations in many ThemeForest WordPress Portfolio themes. Check outBluap to understand what I’m talking about.
These page animations can be made with CSS3 keyframes, along with JavaScript for element detection in the browser window. This trend is entirely aesthetic because it doesn’t create any new content or add to the UI except for neat visuals. Plus not everyone can support this feature on older computers or mobile devices.
More detailed page animations can be often found in mobile Android/iOS app websites. Since these are usually single-paged layouts the goal is to captivate visitors into downloading a copy. I have a feeling we will see more of these animated effects in the future.
Infinite Scrolling
This was a tough cookie to crack when I first got into it. There are some free open source plugins to get started even in CMS projects like WordPress. But customizing the loader, the animation, how many items are loaded, and the experience for visitors without JavaScript will take some time.
That said, I feel Internet users are slowly growing accustomed to this infinite scroll technique. The Reddit Enhancement Suite has an option to automatically use infinite scrolling at the bottom of every page. This is also true on Tumblr and some eCommerce sites. Ajax for paginated items will be quicker than waiting for each new page to finish loading.
It should be noted that you will want a fallback mechanism in circumstances where this doesn’t load properly. It helps to setup a pagination div with links to each new page, and once that div comes into view trigger an Ajax call(if possible). Infinite pagination can be extended to more formal blogs and even other social networking/social media projects.
Detailed Typography
Although this trend has been growing for a few years I’m still blown away to see all the websites utilizing custom font families. The CSS3 @font-face declaration can provide access to any web-safe fonts you have stored on the server.
Google also provides an exceptional font service through Google Web Fonts. The team is infrequently updating with new stuff while keeping all the older fonts, too. The best part of using Google is that their hosting never costs you a dime no matter how much traffic you pull. Premium font services like Typekit have a much more inclusive library to choose from – but this comes with a price tag.
Putting these custom fonts aside, modern laptops and PCs have been prepackaged with a load of great fonts. As more computer users upgrade to better systems we can expect this trend to improve. Try playing with an online webapp such as CSS Font Stack to organize different styles for your website based around the Operating System defaults.
Vector Icons
My first thought with icons always comes back to CSS3 web fonts. Font Awesome is a tremendously popular library which includes hundreds of unique icons. These can be displayed as feature icons, or even as glyphs on buttons for a user interface. You may also enjoy the selection on Flaticon.
But vector icons are extending far beyond this general font-based solution. Take a look at thisphoto icon and this currency icon, both styled as iOS 7 apps. These are built using pure CSS code and may be resized at will. There are plenty of other examples out there much like these buttons – I can only imagine how quickly this trend will grow in time.
One other point to make about vector icons is the use of SVG file types. These are natural vectors that do not contain pixels, but mathematical coordinates explaining how to draw the image for any resolution. You can read more at this article which delves deeper into scalable SVG images. Many of these ideas are still new but definitely cultivating support.
Going into 2014
Each year I think of all the growing trends I’ve seen in typical websites. I don’t think of these trends as predictions, but more like patterns I have noticed over time. Web designers are very creative and the most talented artists will push boundaries to see what can be achieved. Here are some alternative trends gaining attention that may span over into 2014.
Customized Digital Media
Back when I first got into building websites MP3 players were created using Adobe Flash. JavaScript was actually less supported because many browsers left it disabled, and there were no powerful open source libraries(ex: MediaElement.js).
Video players like you would find on YouTube were also created in Adobe Flash + ActionScript. Thankfully years of progress have offered a better solution integrating HTML5 video with JavaScript/Flash fallbacks. The MediaElement.js script can be styled to mirror the classic YouTube video player, among many other skins.
This player will be constructed with HTML5/CSS3/JS in supporting browsers. Since HTML5 isn’t supported everywhere, older browsers fallback to a Flash/Silverlight alternative which can also be styled in a similar fashion. Overall support varies, but as time goes on I hope these new media solutions will become a standard solution for audio/video playback.
Interactive Webapps
Web 2.0 started this trend of accepting data from users en-masse. Databases and server farms have kept up with capacity so we can see these websites becoming more prominent. I could imagine a phase in the near future where basic HTML5/CSS3/JS web applications are built to serve various occupations.
Web enthusiasts are often the first to attempt these mini webapps. I think of projects likeInstantName or GenerateWP. But imagine these applications branching into real estate, stocks & bonds, cooking, manufacturing, etc. If these ideas catch on we may see a rise in designers building HTML5 websites to look like native Android or iOS applications.
Lively Page Backgrounds
How cool would it be to generate on-the-fly CSS3 patterns for a repeating background? What about parallax-style elements built using dynamic vectors or PNG images? We can already find plenty of websites using fullscreen images or videos – and this may be only the start of something much greater.
If designers are truly curious over unique backgrounds we may stumble onto a vast new realm of possibilities. Global support is always going to be a problem, but the more centralized W3C standards become the easier it will be to experiment.
Closing
Keep yourself busy practicing your ideas and even learning some new ones. If you just keep practicing then you will inevitably run into challenges, solve them, and grow as a designer. 2013 has been a shocking and joyous year for design enthusiasts. I hope to see even more creative energy as we push onward into 2014.
0 comments:
Post a Comment