Web Design News – April 2014
- 4 min read
What is this “Web Design News”?
I’m starting a new series of posts here on IP. Posts that will be focused on the latest and greatest web design news, articles, tutorials and so on.
Don’t worry, this isn’t just the sort of post where I grab a bunch of links, paste them and post them. I read every single article/tutorial featured in these “Web Design News” posts.
If there’s some news you’d like me to share or talk about please leave a comment below and I’ll be sure to add it (as long as it’s relevant).
1.) The Heartbleed Bug
The biggest thing in technology (and not just web design) that happened recently was the discovery of the Heartbleed Bug.
It’s a very serious security issue and needs to be patched immediately. To quote directly from the Heartbleed.com:
The Heartbleed Bug is a serious vulnerability in the popular OpenSSL cryptographic software library. This weakness allows stealing the information protected, under normal conditions, by the SSL/TLS encryption used to secure the Internet.
2.) Font Size Idea: px at the Root, rem for Components, em for Text Elements – by Chris Coyier
Chris Coyier talks about using PX, REM and EM for font sizing, all in one project. I know, the controversy right? But actually, Chris has a very good point. It isn’t a very long post but an interesting one all the same.
Chris suggests using PX as the default, REM as the general font size and EM as the module size. I like the idea but like Chris, have yet to build a site using this technique. If anyone has, then please let me know in the comments.
3.) Dream on – by Mark Otto
Mark is spot on with this post about frameworks and other web design tools. Elliot Jay Stocks raises a good point that designers are lazy, because we can be. But that doesn’t mean we’re all lazy all the time. I, like Mark, play the Batman: Arkham franchise almost religiously. Some of the time when I should be working. Yes, even Arkham: Origins.
I think Mark’s approach is great and he’s hit the nail on the head. Frameworks are tools and should be treated as such.
4.) Freebie: Flat Icon Set (60 Icons, PNG, SVG, EPS, PSD, AI)
This isn’t your usual icon set. It’s filled with lovely, astoundingly creative picture icons that all have a very specific purpose.
A lot of icon sets now-a-days are designed to be almost universal. Meaning one icon could mean six other things aswell. Being generic is never good when you want to stand out from the crowd.
5.) Naming UI components in OOCSS – by Harry Roberts (CSS Wizardry)
This post is actually a little older than the others I’ve written about. It was published on 26th March, 2014. In it Harry goes over tried and tested ways to name your front-end UI components.
To a novice class names seem like a breeze. It’s after you get a little more advanced it can become troublesome.
6.) 10 Common Landing Page Myths: Busted – by Ginny Soskey
I like this post because it’s clear and concise. There’s a lot of information out there regarding the best ways of designing and laying out a landing page.
Ginny does a good job of giving you the answers on landing pages, while also explaining why such myths are incorrect.
7.) Comic Neue
Recently a guy by the name of Craig Rozynski decided to re-imagine the 90’s font that has led so many of us to express anger, rage and disgust. It’s called Comic Neue, and it’s pretty nice.
After having a good hard look at the typeface, I like it. This guy has taken something so hated by the design community and transformed it into something good. It’ll always be Comic Sans, but at least it’s not as rage inducing as it was.
8.) How to Create a Circular Progress Button – by Mary Lou
That awesome crew over at Codrops have done it again. You may know them from their extremely intricate CSS3 animation tutorials.
This time they’ve made a submit button that transforms into a progress loading-circle. Then turns back into the button when complete. Check out the demo!
9.) Style Guide Links
Not a lot to say about this one. It’s a simple list of some great, and extensive, style guides, also known as pattern libraries.
If you’re wondering the difference between a style guide and a pattern library, there isn’t really a definitive answer. However, I would class a style guide as more of a ‘how-to’ and a pattern library which simply lists examples of website components, but that’s just how I look at it.
10.) Game of Thrones Posters
As a big fan of one of the greatest shows I’ve ever had the pleasure of watching. This series of posters, which represent the different houses (or families for those unfamiliar with the show), is spot on.
I love the little touch of adding the Unsullied at the bottom.