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.
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.
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.
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.
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 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 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 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 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.
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 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.
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.
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.
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 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.
Paul Andrew is the editor at Speckyboy Design Magazine and is one of the best at sharing information. He is constantly posting new stuff, so much so that it can be difficult to keep up, but it’s all worthwhile.
Luke Wroblewski is one of the most prominent advocates for a “mobile first” design methodology. He focuses on informing about the many different considerations with modern devices, resolutions, network connections, data usage, an the accessibility/usability considerations involved.
Chris Coyier is one heck of a busy guy. His ability to accomplish so much with his time is inspiration alone. He runs css-tricks.com, he is a co-founder and designer at codepen, he has a weekly podcast Shop Talk Show, and he speaks at all kinds of development conferences all over the globe.
Brad Frost is probably best known for his work in multi-device design best practices. He too is a mobile-first advocate and he’s been an innovator in the designer workflow for such design methodologies by creating stuff like http://pattern-lab.info.
Eric Meyer is a web standards and CSS guru. He writes books and speaks about both. He is a regular speaker at the “An Event Apart” conferences. Eric has has created a lot of cool tools that you can see and use here: http://meyerweb.com/eric/tools.
Abduzeedo is a great design blog for inspiration and tutorials. It was created by Fabio Sasso who is now a Visual Designer for Google. Abduzeedo constantly shares great examples of design that will continue to inspire you and push your creativity.
Nicolas Gallagher is an awesome front-end developer at Twitter. He also works on some great open source projects and speaks as well. He is really great at sharing info on the latest and most innovative front-end development tips and techniques. I especially enjoyed his talk on CSS Application Architecture at SmashingConf 2013.
Creative Bloq is another all-in-one sort of resource sharing everything from inspirational designs to in-depth code examples and tutorials. I like them specifically for the wide variety of info that they share. The also have a great site www.creativebloq.com.
Unmatchedstyle, well their mission says it all: “Our mission is to provide inspiration, motivation & insight into how you design the web. We share a lot of resources, put on online and in-person events.” They do a great job of sharing those resources and most of the time the content that they share on Twitter is different than the content on their site.
@smashingmag is the twitter account for Smashing Magazine which I mentioned above as a great resource. What I like about their Twitter account is that they share a wide variety of inspiration, tips, techniques, demos, and articles that aren’t featured on their site.
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 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 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, 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.
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.
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 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.
