Web Search Engine Optimization | SEO Services Sri Lanka: 2013

Monday, December 30, 2013

SVG DRAWING ANIMATION

A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them.

VIEW DEMO DOWNLOAD SOURCE

SVG is finally becoming a more utilized and fun website component. It's really powerful and there are many creative possibilities for fun effects on a website using SVG. Today we'd like to share two experimental concepts with you that make use of stroke animations, made popular by the animations on the PlayStation 4 and Xbox One review sites. This technique was introduced and explained by Jake Archibald in his article Animated line drawing in SVG and also explored by Brian Suda in his articleAnimating Vectors with SVG for 24Ways. For our experiments we are using his code to animate the strokes of the paths.

So, what concepts did we explore? The first one is a line drawing animation that fades into a "real" image or illustration once the respective figure is in the viewport. This can be a fun effect for any kind of illustration on a website. The second concept explores using SVG line drawing animations for simulating the loading of a website: website parts are represented by flat drawings with a stroke that gets animated and once finished, the "real" elements are shown. The technique itself is implemented in a static way where we use an SVG for every bunch of elements that fade in. The idea for the schematic representation of the website come from this awesome Dribbble shot by Chris Bannister.

The beautiful illustrations of the devices are by Pixeden and you can find the PSD files here:

The traced SVG line drawings of these illustrations were carefully crafted by talented Emanuel Serbanoiu. Check out his Dribbble profile or visit his website.

The first demo is the line drawing animation with the illustration fade-in:

The second demo is the line drawing animation with the website fade in:

And the third demo is similar to demo 2, just that the animation and the fading in of the elements happens sequentially but with a random timing:

We hope you like the effects and find them inspiring!

VIEW DEMO DOWNLOAD SOURCE

Tagged with: ANIMATION PRELOADER SVG

MARY LOU

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by Mary Lou

Website: http://tympanus.net/

Flatilicious - 48 Free Flat Icons

Use for pretty much everything - websites, apps, infographics, whatever you want. Icons are in psd vector shapes so you can resize whatever you want.

So hope you will like it and enjoi it.

Download Free!

Web Design Trends That Will Disappear in 2014

If you're looking forward to changes that come with starting a new year, you may also be excited to learn what sorts of trends are emerging in the web design world. What most people aren't talking about, but should be, are the types of design trends that are on their way out, which ones should be left out and those that are unlikely to be seen again after the frosty morning of January 2nd. Here are a number of styles that are dying out fast. Some are bad design, but many of the following have merely fallen in favor because they shined a little too brightly in 2013.

Homepage Sliding Banners

These eye-catching banners seemed like a great idea once upon a time. They're brightly colored, show visitors a wealth of information and have the appearance of being interactive. Most people, however, find them more distracting and annoying than anything else, so they're falling quickly in favor of more truly interactive and less gaudy design, like single-page scrolling and simple drop-down menus.

slider

Extensive Fill-Out Forms

Getting a user's information is essential for certain aspects of running an online business, whether it's an e-commerce site or a simple blog that has a contact form. But the days of seeing a full page of questions, extending into optional areas that visitors now intentionally skip for fear of offering information that is used purely for marketing is on the wane. Asking tons of questions only serves to alienate possible customers, and fortunately websites seem to be realizing that.

form

Circular Script Logos

Using a script font within a circle, either outlined or filled in, monogram or full title, used to be the height of cool logo design, but so many people used this look, including individuals on their personal websites as well as professional companies, people became completely burned out by it. There may be a resurgence of this style some day, but it's safe to say most are steering clear of this overused badge.

cirlcelogo

Flash Intros

Remember these attention grabbers? Flash intros can still be found here and there on ostentatious and out of touch websites that haven't updated their look, but for the most part people have moved on to simple design and limited features. Videos are great, and flash paved the way for them, but the music and animation just seem to annoy visitors now, who want more control when they're surfing and fewer surprises.

Too Many Fonts

Everyone knows typography is important, and it's a lot of fun to play with, but it's essential that you show restraint when using typefaces on logos, websites and business cards. It's particularly obvious when someone without graphic design experience develops a site, as they tend to complicate the look with a stunning array of various fonts. Fortunately, even amateurs are learning to scale back and use no more than two, maybe three fonts at the most.

fonts

Complicated Design

If you thought having lots of icons, design elements, fonts and features means you have an exciting and interactive site, you might be right, but the overall look is overwrought and overwhelming. As design trends move forward, they're moving away from complex to simple for a more enjoyable browsing experience. You don't want visitors confused or lost; you just want them to think your work is beautiful. You're unlikely to see complicated successful websites in 2014.

Discovering the highly anticipated trends of the New Year has everyone buzzing, but it's just as important to see from where the styles are moving. Though some of these features were once incredibly popular, they've suffered the ultimate fate of rising to the top: total saturation. And that means fatigue. Watch out for overly popular and overly hyped designs in 2014, or they may end up in a list just like this a year from now.

Here's some other articles that you will definitely find useful.

13 Inspiring Service & App Websites

13 Minimalist Web Designs for your Inspiration

11 Great Examples of Video Backgrounds in Web Design

13 Colorful & Inspiring Websites

13 Inspiring Single Page Websites

Best Free PSDs of 2013

We started our "Best of 2013″ series with the Best Free Fonts of 2013. For this week, we've went back through all the UI PSDs that we've covered over the past year and picked the ones that really stand out. Because there are so many very good ones to sift through, it's always a difficult choice, but here are the ones we think are the best of the best.

iGravertical Screen Layers + iOS 7 Screen Converter (PSD)

Perspective App Screen Mock-Up 5

Perspective Tablet Mock-Up 2

Silver Stamping Logo MockUp

Responsive Showcase Psd Vol2

Flat UI Kit

Weather Pop-up

iPhone 5-4S flat PSD

Responsive Menu

Login Free PSD

UI Kit – Free download

24 Free Skinny Icons by Riley Tippetts

Modern Touch UI Kit

Flat Design UI Components

Best Web Designs of 2013

Best jQuery Plugins of 2013

Free Christmas Related PSDs

Best Free Fonts of 2013

6 Free Fonts for your Projects

Courtesy: http://webdesignledger.com/freebies/best-free-psds-of-2013

Sunday, December 22, 2013

Perspective App Screens Mock-Up 8

Pantone, an X-Rite company and the global authority, today announced PANTONE® 18-3224 Radiant Orchid, a captivating, magical, enigmatic purple, as the color of the year for 2014. "While the 2013 color of the year, PANTONE 17-5641 Emerald, served as a symbol of growth, renewal and prosperity, Radiant Orchid reaches across the color wheel to intrigue the eye and spark the imagination," said Leatrice Eiseman, executive director of the Pantone Color Institute®. "An invitation to innovation, Radiant Orchid encourages expanded creativity and originality, which is increasingly valued in today's society." "An enchanting harmony of fuchsia, purple and pink undertones, Radiant Orchid inspires confidence and emanates great joy, love and health. It is a captivating purple, one that draws you in with its beguiling charm."

SOURCE

Thursday, December 19, 2013

22 Experimental WebGL Demo Examples

WebGL is a web standard created to display 3D graphics in any platform that supports OpenGL. It makes use of the HTML5 Canvas element to generate graphics dynamically from script code, so there's no need to install plug-ins in the web browser. It includes some libraries that are currently in development, such as C3DL and WebGLU.
This javascript API is managed by the consortium of nonprofit technology Khronos Group since early 2009 which together with the Mozilla Foundation created a workgroup in which they could experimentally develop prototypes and deployed applications using this technology. Currently the workgroup is also composed by Apple, Google and Opera, among others, and all these companies have implemented it in their latest versions of browsers like Apple Safari, Google Chrome, Mozilla Firefox and Opera.
WebGL is bringing a revolution to the web world by the new possibilities that this specification provides:the visualization of 3D animation and interactivity with the user, it's cross-platform and it's open source.
The research and experimentation of new ideas being carried out shows us how new applications and functionalities for the web and the digital world are being achieved. There are lots of examples which are simply spectacular, and we present some of the best here.
Try playing! Enjoy this new user experience!