はてなブックマーク

CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS? I’ve been thinking a lot about my CSS authoring, its current state and how it has changed over the years. Typically when I start a new project I’ll use my own framework Motherplate. It uses SCSS and Compass. Most of the class names were’t originally based on any other framework. Not deliberately anyway. Most developers I know n

After attending The Email Design Conference last week, it was interesting to see that pretty much every designer has a different workflow when it comes to designing emails. Inspired by Brian, Fabio and Kevin who shared their email design processes, I thought I’d share my own. In particular, designing these transactional emails (as I rarely design promotional emails these days). For this post I’m g

I’ve been using icon fonts for a few projects lately instead of graphical icons. There are several advantages to using icon fonts. Scale them with CSS Color them with CSS Add shadows with CSS Change opacity with CSS Rotate with CSS Basically make any changes without opening Photoshop and editing a sprite They automatically scale for retina displays See for yourself. Chris Coyier put together a fan

I’m working on a project that requires a bit of Javascript loading time before displaying the UI, so instead of doing what I usually do and downloading an animated gif from ajaxload I thought it would be a good opportunity to try out a CSS3 animation. Inspired by 37 Signals loading bar (pictured above) and making good use of Chris Coyier’s tutorial on CSS3 Progress Bars I set to work designing a b

Last week I launched a holding page for Ecliptic Labs, an iPhone development company based in Belfast (keep an eye on them, there’s going to be some great stuff from them this year). Here is the holding page in all it’s glory. One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS. Advantages of usin

Call to action buttons are the buttons that you, as a web designer, want all your users to click on when they land on your page. Usually they’ll be a link to a download, signup or sale. Seth Godin (The Big Red Fez) calls them bananas and your users are the monkeys. The objective is for the monkey to find the banana in less than 3 seconds (before they give up and leave). “Force yourself to design e

I’ve seen a lot of designs lately experimenting with large type, and with the right choice of font, contrast and whitespace they look great. Check out this inspirational list of typographic based designs that I’ve put together. 1. Pallian Creative

Back in June when I was converting from a PC to a MacBook Pro (best decision I ever made) I asked around to see what apps people recommended for the Mac. There are a lot of nice apps available for Mac OSX that aren’t available for Windows. I’ve compiled a list of Mac Apps I have in my OSX dock that I use on a daily basis and should be useful to other Mac users and/or web designers. 1. Adobe Creati

Sunbursts are a very popular design trend within web and graphic design. A sunburst represents sun rays (or beams) exploding from a source point. They’re a Web 2.0 trend but they tend to work well with other graphical elements. This post looks at how to create your own sunbursts, using existing Photoshop shapes and brushes and I’ve showcased 15 beautiful websites that include the sunburst effect i

👋 Hi, I'm Lee I'm a Software Designer & Product Leader I spent over 10 years in the San Francisco Bay Area working with a number of successful venture backed startups. I'm now based in Belfast Northern Ireland, working on OneSignal as Head of Design.