Devlounge

Design, Develop, and Grow

Friday Focus 04/08/11: Robotic Revolution

By

This week on Friday Focus, robots are taking over Devlounge!

Designs of the Week

Mr. Roboto

Love the coloring but I’m not sure why the robot has to disappear in the inner pages, it becomes more obvious that there’s something missing. The contact form uses a circular button (reminiscent of real life pushbuttons).

QuoteRobot

Everything fits and lines up nicely, I just wish the signup form looked more like the design (at least some bit of the color palette).

Awesome

This one, on the other hand, has an extremely captivating signup form on top of an already lovely design. The process flowchart is succinct but still informative.

Karmacracy

The robot have great personality but that doesn’t seem to translate into other aspects of the design.

Symbolicons

The grouping of the icons and placement of the buttons just work. Everything blends in neatly.

Structo

Robot-focused designs seem to call for bold fonts and relatively bright colors. Although I think the text on the inner pages look underdesigned.

Web Visionary Awards

Making a huge robot as the design for a long, one-page site is a great idea, you’ll probably want to zoom out to see the whole thing.

Social Media Weekly

Typography – Type on your email
“Newsletters that drop in my inbox rarely excite me. Those that do come from type foundries. Not only is the carefully crafted composition of new, updated and popular fonts fun eye candy, it’s also a great way to keep modern typefaces top of mind.”

JavaScript – How to get all the browsers playing ball
“What if you could include a single JavaScript library, and it automatically detected the state of the browser support for the latest technology, and where the browser is lacking, the JavaScript library plugs the missing gaps.”

Product Design – Product design at GitHub
“When I talk about product design I’m referring to the process by which you decide what your product does and does not do. I happen to think we do a pretty good job of this at GitHub, and I’d like to give you a bit of an insight into our process and hopefully shed some light on why it works so well.”

Typography – A Crash Course in Typography: Paragraphs and Special Characters
“Body copy makes up the majority of many websites. Headlines and other bits of typography are often considered more fun to design, or more artistic, but without a good design for your body copy, your overall project will suffer.”

Friday Focus 01/21/11: Four Ninjas & a Samurai

By

These Japanese warriors seem to be very popular figures in design and tech companies, so let’s see how these websites take off on the concept. Welcome to this week’s Friday Focus!

Designs of the Week

Ninja Support Services

Clearly the header image is too narrow for wider screen resolutions but it doesn’t look bad like this. Love the hanging look of the content and the weapons as icons everywhere.

CSS Chopper

Instead of listing recent work on the page, they surprisingly show up in the flyout menus. This design seems to prioritize keywords over portfolio.

CSS Ninjas

Doesn’t feel too ninja-y, but looks very elegant.

Slice Dojo

Do we have copycats in this list? The carousel integrated into the sliding door panel is clever, but the rope and hanging paper looks almost exactly like the first site featured here, with ninja star icons in the menu as well. Who copied who?

Digimurai

I like how the content area needs no background so the rest of the design shows through without much distraction.

Social Media Weekly

Business – Building the Trunk, First
“Why you should focus on the core of your product.”

Design – 10 Designers Share the Process of Creating Their Amazing Design Work
“In this article you’ll find 10 designer share the process of creating their amazing design work, which I hope can help you to get some inspiration.”

CSS – What’s the Difference Between :before and ::before?
“I had assumed that there would be some difference in the way each functioned, but that’s not the case, as the short and long answers below make clear.”

HTML – Get familiar with HTML5!
“We’ll advise you on how it can fit into your learning right now, even if you are a novice web designer or developer, and we will look at some of the main features of HTML5, so you can see what it adds to the already powerful HTML language.”

CSS – Polka dot background with gradients

Weblog Design Inspiration To Start 2011

By

With a new year it is time to give my personal weblog an update. First I just wanted to re-align my current design, but once I opened Photoshop I decided to start from scratch. I bought Pictos font a while ago and I downloaded a free font from The League of Movable Type. If you follow my postings you know I’m a fan of minimalism.

I decided to check out current weblog designs to get some ideas on what to design. I almost never visit the websites, I read their entries in my feed reader. But once in a while I will check out all the weblogs just for the design.

I appreciate simple designs and intricate ones. Personally I prefer a simple and clean look for websites I have to look at everyday. I think if Facebook was heavy on graphics I would get a headache, no matter how well designed. In any case, people don’t visit the actual weblog everyday, only when there is new content, so going all out with the design isn’t an issue.

From the mass of weblogs I chose nine, four minimalist and five with graphics. You’ll see Mr. Boulton’s website, which is very minimalist but makes good use of typography, which is what he is known for. I have always been a fan of Garret Murray’s minimalist designs for his weblog and he also makes killer iPhone apps.

If you know beautiful designed weblogs that aren’t mainstream, especially minimalist ones, do share with us!

Minimalist

Mark Boulton

Web Designs

Garrett Murray

Web Designs

Oscar Alexander

Web Designs

Dan Cederholm

Web Designs

Graphic Galore

Lukes Beard

Web Designs

Nishant Kothary

Web Designs

Meagan Fisher

Web Designs

Kelli Anderson

Web Designs

Jake Przespo

Web Designs

Friday Focus 12/03/10: Color Swatches

By

It’s another round of colorful websites on this week’s Friday Focus, but this time they’re done in discrete blocks at the edges of the designs.

Designs of the Week

Design Blogs

This is what could be considered a vertical design, which more people should be doing since sites are actually tall, not just contained in a single screenful. It also feels narrow but in a good compact way.

Medis Kök & Bar

I love the color block effect in the inner pages. Not too thrilled that even paragraph text is in the condensed uppercase font that people are so fond of these days but other than that the arrangement of information on this site is excellent.

Emily Whitesmith

This homepage makes quite an impact showing off one’s wares in an artful way. The uncovering effect is also nice.

Houtos

This looks extremely fun and inviting for a service provider, but not a very good idea to repeat the pattern on the logo, which now looks drowned out.

Hugs for Monsters

The illustrations look great but I feel they could be better integrated into the design. The Work section, for example, display thumbnails of the portfolio on top of the header illustration and it’s overpowering them.

Sérgio Oliveira

Another thing I noticed, a lot of people into gray all over the design. But it’s nicely offset by these bright colors here. Bonus points for integrating the Konami code.

Social Media Weekly

Design – A Little Bit About Enthusiasm and Hype
“I did a workshop last week at the wonderful Build conference on Enthusiasm, and more specifically, how to get people enthusiastic about the work one does. And I forgot to say the most important thing.”

Design – You can’t grow, unless you bow low.
“Here are some pointers on taking and giving constructive design criticism.”

HTML – On the hgroup element
“The more I try to explain it to people at workshops and in a marvellous book, the more uncomfortable I become with <hgroup>.”

HTML – The shortcomings of HTML5
“As professional Web designers and developers, we can use and support HTML5, but at the same time we need to be able to discuss the shortcomings and limitations of the technology.”

CSS – Keep Margins Out of Link Lists
“The simple truth: bigger link targets are easier for people to click and lead to better user experience.”

20 Great Free Photoshop Brushes

By

Every designer should have a folder full of ‘tools’ to design. Just having Photoshop and knowing how to use it is not enough. You should have folders full of fonts, vectors, and brushes.

When used with the right effects, think lightening, gradient, etc., photoshop brushes are a very
easy way to enhance your design. If you are not a ‘rock star’ designer Photoshop attributes like brushes and vectors can help you come a long way with your design.

[Read more…]

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge