Tag: Inspiration

Oh Wow That’s Neat – 18: Morphing Buttons Concept

It used to be that websites and their interactions were much different than those from native software applications. Well this is not so much the case anymore. Mary Lou, a freelance web designer and developer from tympanus.net, wrote an interesting article discussing a few different morphing buttons concepts that showcase some amazing possibilities for web interactions.
Morphing Buttons Concept

She has created a handful of really nice interaction effects that occur when buttons are clicked. They appear as if content or elements are contained from within them and when clicked they transition out from within the button in many different ways.

They are great effects but you will want to keep in mind that they only work in more modern browsers.

More info

You can read the full article here

Demo & Download

You can see a demo here and you can download it here

Oh Wow That’s Neat – 06: www.fontwalk.de

www.fontwalk.de is a site that was created as a marketing tool for www.fontshop.com. I’m not so interested in their fonts, although it looks like they have a nice selection. I am more interested in the great design ideas behind the Font Walk site.

It is a very non-traditional user experience that takes the parallax scrolling trend to another level. It’s a very visually pleasing site though I think the scrolling becomes a bit much after a while. As you continue to scroll through the site you find all sorts of different things happening. I don’t really remember any of the content, maybe that’s because it was in German, but I did find that I wanted to keep scrolling all the way to the bottom.

I’m a fan of sites that push the limits of user experience design and that challenge current design trends with new and original thinking. Font Walk may be a little over the top but it’s certainly one of those sites.

Check it Out

Check out the Font Walk site for yourself here.

Oh Wow, That’s Neat – 01: Snap.svg

For those of you that have read my post “SVGs are Cool & You Should Start Using Them, If You’re Not Already” you know that I am a fan of SVGs. In fact, now that I know a little more about them I feel that they are very under used in modern web development. They are light weight, resolution independent, and they really open up the door to so many possibilities for enhancing user experiences.

It seems as though part of the reason that their use tends to be limited despite decent browser support is the lack of understanding about just what can be achieved when using them. For me, when I used to think of SVGs I immediately thought of an SVG as an asset and never about using JavaScript to modify and generate dynamic embedded SVGs. This is where the new JavaScript library Snap.svg really shines.

Snap.svg for SVG manipulation is compared to jQuery for DOM manipulation. It provides a method for generating SVG content solely with JavaScript. If you don’t have a need for that, it’s ok, Snap.svg still works with SVGs created in other programs such as Adobe Illustrator. It also provides a powerful animation library complete with event handling geared specifically at manipulating SVGs for modern browsers. This library helps to bring SVGs to life by animating with masking, clipping, and patterns among other new SVG features.

Perhaps the most intriguing feature of Snap.svg the ability it provides to pull out pieces of your SVG code for use in SVG sprites. This allows you to save on http requests and allows JavaScript to interact with the components of the SVG sprite to manipulate it as needed.

This video demonstrates exactly how it works

Demos

You can check out some demos here.

Download

You can download Snap.svg here, it’s free and opensource.

My Favorite Web Design & Development Resources

If you want to be a good web designer you’ll need to continually learn, evolve, and update your skill set. This can be challenging, overwhelming, and exhausting or it can be fun. Over the years I’ve collected a list of some pretty handy resources that help make it more fun to keep yourself relevant so I thought I’d share some of my favorite web design & development resources.

Websites

I have a handful of exceptional websites that I visit when trying to learn how to do something, looking for inspiration, or just looking for a geeky web design article to read. These are sites that I visit, not every single day, but when I need them or just when I feel like it.

Smashing Magazine

www.SmashingMagazine.com
Smashing Magazine is one of the best resources for web designers and developers that I am aware of. It is essentially an online magazine with many reputable contributing authors covering topics ranging from the most basic PhotoShop techniques to complex programming and software engineering processes.

Line 25

www.line25.com
Line 25 is a great blog for web design inspiration. It’s written by Chris Spooner a very talented UK based designer. The reason that I like this blog is that Chris has a knack for finding very interesting and well designed websites and then he writes a weekly article highlighting them. It’s a great spot to visit when having designer’s block or just looking for some new design ideas.

Spoon Graphics

blog.spoongraphics.co.uk
Spoon Graphics is another great blog written by written by Chris Spooner. This blog has more of a focus on image editing and design techniques that don’t always have to do with web design. It’s a great spot to learn how to use PhotoShop and Illustrator better.

CSS Tricks

CSS-Tricks.com
CSS Tricks is a very handy resource with tons of code examples. It’s written by the very intelligent Chris Coyier a well known web designer/developer from Milwaukee. I like to use this site whenever I’m trying to implement something new. It’s a great place to go when looking for best practices, browser support info, and cutting edge techniques.

Unmatched Style

Unmatchedstyle.com
Unmatchedstyle is another great design resource. It’s managed by a group of folks who are dedicated to web standards and good usability practices. What is unique about this site is the fact that you can actually submit sites to them to be critiqued. It is also a showcase of well designed web sites and a resource consisting of articles, podcasts, and more.

Awwwards

Awwwards.com
Awwwards is a another great web design inspiration resource. The site is managed by a crew dedicated to discovering and recognizing those who create innovative and beautiful web experiences. I really like to use this site before I begin a new design. The sites featured here are always inspiring and pushing the web to its limits.

HTML 5 Doctor

html5doctor.com
HTML5 Doctor is a great reference when writing HTML5 code. It’s an excellent resource for finding out which tag, attribute, or property to use and exactly how it should be used. If you are ever unsure about anything that has to do with HTML5, I suggest you take a peek here to see if you can find your answer.

24 Ways

24ways.org
24WAYS is a different kind of resource. There are 24 articles published in the month of December each year by some of the most well known experts in the industry. The topics are really in-depth and very applicable to your every day workflow and processes as a web designer. The site has been around since 2005 so it has become quite a repository of interesting information and perspectives.

Logo Design Love

logodesignlove.com
Logodesignlove.com is a great site for logo design inspiration. It is a site created by David Airey a graphic designer from Ireland. Logodesignlove is basically a gallery of logos and David adds a new logo once or twice a week to keep things fresh. I don’t design logos often, but when I do I always feel that it is a good idea to expose myself to as many great logo designs as I can before I begin and this is normally where I start.

Codrops

codrops
Codrops shares a lot of similarities with Smashing Magazine. It is another great resource focusing on a wide variety of web design and development tips, techniques, and strategies. There are a ton of code snippets and examples for all sorts of different things. This is a great resource for evolving web experiences showcasing many unique and useful demos.


On Twitter

Twitter is were I get the most information nowadays. Unless I’m looking for something specific, I rely on the people that I follow to point me to the newest and hottest web design and development stuff. Below are a few of my favorites, these people/organizations seem to continuously share the best content.












Podcasts

For the longest time I didn’t really listen to web design and development podcasts because I never felt like I had time. The only time that I had was when I was working but the sound of people talking seemed to distract me while coding or I would just tune them out so I could focus. But, over the last year or so I’ve given them another shot and realized that I now actually enjoy listening to them while I work and have become addicted to a few. I’ve found that It’s actually a great way for me to get exposure to new web stuff.

Shop Talk Show

Shop Talk Show
Shop Talk Show is a great front-end development and design podcast by Dave Rupert and Chris Coyier. They set up really great guests for most episodes and then they spend the whole podcast answering and discussing listener submitted questions. The episodes where they have no guests they normally call “Rapid Fire” episodes and they try to power through as many questions as possible. They do a great job and are very informative. It’s not just for senior level web designers and developers either, they have listeners at all different levels submitting questions.

The Web Ahead

The Web Ahead
The Web Ahead is another great front-end development and design podcast by Jen Simmons. Similar to Shop Talk Show, The Web Ahead features many great guests. She does an amazing job discussing many emerging technologies and techniques regarding forward thinking web design/development. Jen is an expert in the process of transitioning web development teams to a responsive workflow.

The East Wing

The East Wing
The East Wing, just like Shop Talk Show and The Web Ahead, is a great front-end development and design podcast by Tim Smith. It is formatted as an interview show where many well know web industry folks stop by to chat about modern web design, development, and business topics. Tim is an entrepreneur, designer, speaker and teacher.

Newsletters

I’m not subscribed to many but I do also get a lot of great information through regular email newsletters. They provide a different method where the information can be held in a queue so-to-speak where you can keep them until you have time to read them. You can also archive them so that you can easily scan back through the info that they contain later on.

Smashing Magazine Newsletter

Smashing Magazine Newsletter
So, I have already identified Smashing Magazine as a great web design and development resource, they really are one of the best out there. They provide a newsletter capturing some great stuff every second Tuesday of each month. Every time I see this in my inbox I will usually take 20 minutes or so to thoroughly read and click through all links and then share stuff that I like with the rest of the design team. If you are interested, you can sign up for the newsletter here.

MailChimp UX Newsletter

MailChimp UX Newsletter
I never thought I’d find myself subscribed to a service provider’s email newsletter but in MailChimp’s case, this is different. MailChimp has started to establish itself as a UX leader. They have developed their MailChimp UX pattern library which is a great example and resource on its own. They have also created a really extensive Email Template Reference which is also another great resource on its own. The bi-weekly newsletter is packed with some great stuff. If you are interested, you can sign up for the newsletter here.

Mobify Webdev Blog Newsletter

Mobify Webdev Blog Newsletter
Mobify is a company that aims to provide “delightful” user experiences across all sorts of devices. They write about interesting concepts such as “Perceived Performance” and responsive web design just to name a few. They really focus on performant, device independent tips, techniques, and demos. The newsletter highlights their loads of great content, but I never really find myself visiting their site so the newsletter really helps. If you are interested, you can sign up for the newsletter here.

Brian Treese