The making of the Octicons icon font
Reply
You hear a lot about icon fonts. This post takes you into the nitty-gritty details of actually creating an icon font. Along the way you might also pick up a few tips on Photoshop 6.
Tag Archives: webdesign
"Sign up in seconds" … and then what? by 37signals
Ryan over at 37signals addresses the "sign up in seconds" messaging that has begun to proliferate on sign-up forms around the web. The message addresses a non-existent anxiety. Click through to read his suggestion on what fear we should be addressing and how.
Collection: Design Patterns
Pretty big collection of UI samples, grouped by function.
Page Structure for Thematic WordPress Framework
I don't plan to use Thematic. The default 2011 theme is responsive and looks to suit my needs much better. But this is useful for digging into how Thematic is structured.
Ui Parade – User Interface Inspiration
Talk about getting out of the way and putting the content first. This site is just a big grid of UI samples. Click on any thumbnail to view a larger screenshot and project details.
kuler
Can't believe I didn't already have this bookmarked.
HTML Email Boilerplate v0.5
Sweet. I wanted to do this three years ago when I was slogging through HTML email land. I was too busy and hated HTML email too much to ever actually do it, and I wouldn't have done anything nearly as pretty or complete as this. This is a must-save!
How To Build a Modern Website in 2011 – Tom Milway – Blog
I don't agree with everything the author says. Particularly where he ignores all business cases to the exclusivity of the user. To be sure, the best business plans align the two as closely as possible, but he ignores things like branding altogether. That's not really the relevant part of his post though. Instead, his post is another piece in support of mobile first, responsive design and why people need to be developing sites that way. And for that it's a worthwhile read.
320 and up
Prevents downloading of desktop assets on mobile devices. Warrants further investigation.
WordPress › Infinite Scroll « WordPress Plugins
This Wordpress plugin automatically loads another batch of articles when you reach the end of the page. In general I'm not a fan of the infinite scroll, but it is appropriate in some circumstances.
Tutorial: Using jQuery Masonry with WordPress | WPLover
JQuery plugin for WordPress. It reflows content into columns based on the width of the browser. Makes responsive, balanced columns.
Reduce Noise to Encourage Flow | UX Booth
good article on designing you app so that it maximizes productivity of its users.
Small Studio – Graphic design for print and digital in Melbourne, Australia
Nice side scrolling site that looks more like magazine layouts than web pages.
Web Design Surrey | Kyan
Beautiful use of whitespace. I want to find the person who doesn't scroll on this site. I also want to send this site to every person who has ever wanted to me cram an entire website above the 'fold'.
Sony Tablet S – An Android Tablet Like No Other | Sony Electronics
One page parallax sites like this were all the rage a year ago. They're still really cool, it's just hard to come up with a practical implementation. This is Sony's Tablet S experience site and the technique works here to promote and market their tablet as a cool and modern experience.
Soulwire » Experiments in Code
Justin's portfolio site is very impressive. Because he's showing ways in which he can push envelopes, the site unfortunately requires the latest and greatest browsers. Given his target audience and what he's demonstrating, that's probably okay. You should check it out (using Safari or Chrome of course).
Responsive embeds – Anders M. Andersen
A technique for embedding scalable multimedia for responsive designs.
10 LESS CSS Examples You Should Steal for Your Projects | Design Shack
There wasn't really anything new here until I got to the spin() function. That was new (to me) and very cool.
“Mobile first” CSS and getting Sass to help with legacy IE – Nicolas Gallagher
An approach to building responsive websites that also work in IE using SASS to output a separate stylesheet. This technique avoids any JS dependencies. I hadn't really considered the single stylesheet drawback of using LESS/SASS. I would normally just hand roll the separate stylesheet, which defeats the purpose of using LESS or SASS.
Veerle’s inspiration stream
Nice collection of inspiration and a nice implementation of her own inspiration gallery, rather than linking to an aggregator site.