Devlounge

Design, Develop, and Grow

Friday Focus 01/25/08

By

Another Friday Focus coming your way this week. The first one of 2008, and what I think to be one of the first not done by AJ, as he is a busy man, so I figured I would try to fill his shoes when it comes to the focus for a while.

Things will mostly be staying the same, but I will of course be choosing the designs that really amazed me, as well as the top stories on Digg’s programming and design sections that caught my eye.

This week, I have three designs, one design article found via Digg, and one freelance article found via Digg.

I hope you all enjoy my picks.

Designs of the Week

Oddly enough, all of my picks this week for designs are from Web Design firms from various locations around the world.

The first one is from GregOne from Belgium. I love how dark the overall design is, but to make it easier to read sections with a black background, he pumped up the font size, and in the content area I love the green tab he used as the background for titles. I find the serif font used for most of the white text content a bit difficult to read, but overall, I really enjoy this design.

GregOne

Next, I have South Creative from Australia. This design caught my eye because of the use of the creamy colours of the content topped off with a much darker header, and a brightly coloured logo. The design itself is fairly simple looking, but I found it to be very effective.

South Creative

My third choice this week is FortySeven Media from the USA. Again a very distinct difference between the header and content areas, this time going for a lighter header and a much darker body. I haven’t seen much green focused web designs lately, and so walking through the normal black, blue, orange, and more blue, I really enjoyed this design. A very nice palette of colours used as part of a very interesting style.

FortySeven Media

Digg Weekly

Design – 26 Things to Do When Business is Slow and in Downtime Mode
There is no doubt on my mind that we are going into a recession, and it is the perfect time for all freelancers to find some extra work, get important tasks completed, and save a little extra money.

Design – Creating A Fantastic Fantasy Night Sky In Photoshop
I am usually not a fan of photoshop tutorials, but this one is really fun to do. With all kinds of interesting effects taken into account, this tutorial could be used as a basis to create all sorts of cool poster worthy designs.

Break Your Design Mold

By

Designers can easily get stuck in the same old tracks. Be it rounded corners (which I bashed on Wisdump by the way), gradients everywhere, or just an overall style that could do with some fresh input.

A friend of mine reminded me of trying to do different things design-wise, every now and then.

A friend of mine reminded me of trying to do different things design-wise, every now and then. I’ve been too absorbed by everything else, so I just haven’t pushed myself forward as a designer. To do that, you need time to experiment, and you need energy to put into it. Two things that doesn’t come a-plenty, I’m afraid.

So here’s a thought for all the designers out there. Break your own mold on your next project. Do it in a different way, even if it doesn’t turn out just right, you’re bound to pick something up along the process.

Here are some suggestions on things you could do to break your mold:

  • Rethink font usage. We all got our favorites, now try something different.
  • Web 2.0 i very fresh and clean. Well, screw it – let’s do something dark and musty! Or the other way around, if you usually do dark designs.
  • Are you a blog designer? Then change the composition of your next blog design. Do a one column theme (you know I like ’em), do something nifty with the sidebar, do a different navigation, just do something that isn’t so much Blog by You.
  • Change your use of images in your next design. Heavy users go light, and vice versa.
  • Use colors you normally wouldn’t! Try new blends and schemes. Or do it just in black and white, whatever differs from what you normally do.

Just a few pointers on the way, I know. What you can do to change your design mold is entirely up to you, and your style of course.

Me, I’ve already mapped out a design for a client, going with dark backgrounds and a powerful header/top, rather than the white fresh European thing I usually end up in. I’m confident it will turn out OK, I can see that already, and just by thinking along these lines I’ve come up with other things I want to try.

So go on, break your design mold. I dare you.

Friday Focus 11/30/07

By

Hey everyone, Friday Focus is back. I’m sure you’ve been hanging off the edge of your seat after dealing with a tough week without the focus last week. Well, no more worrying to do now. Hopefully everyone that was celebrating Thanksgiving last week enjoyed the holiday and any kind of vacation that may had have, but it is now time to get back to business. Let’s kick things off with three fresh sites.

Sites of the Week

First up is Beanstalk. This organic looking design features brown and light greens to create a simply fresh look for this hosted subversion tool.

Beanstalk

Next up is Synergema. Another slick portfolio site, this one utilizing blues and greens, along with some snappy javascript to scroll between portfolio work. Plus, you have to give them points for that name.

Synergema

And wrapping this week up is Come Home to a Tennessee Winter. Seeing how tomorrow is December 1st, I figured this was pretty appropriate. Falling snowflakes included.

CHTATW

Digg Weekly

Design – Pure CSS Dropdown Menu
I know there are a few of these out there, but what’s another one to add to your collection of bookmarked resources? This quick tutorial will guide you through the creation of a css-only drop down menu, without the need for JS.

Programming – 10 Absolute No-No’s For Any Freelance Web Designer
From Digg description: If you’re a freelance web designer, make sure you don’t make any of these common mistakes.

Hope everyone enjoys the week ahead.
Get your holiday shopping done! (or started)

P.S., If interested in what I’d like, please use the contact form. 🙂

My Design Process

By

I’ve been designing websites since 1996, albeit them not being very pretty at the time, of course. None were, actually, something you might or might not remember, depending on your age. Most of my design during the 90s and early 00s were for my own benefit, projects I started. At one time I had 37 gaming websites running (in Swedish), which was madness of course…

Anyway, post-dotcom and I’ve found myself doing a fair share of design work for clients. This last year’s been a good one for me, so I thought I’d share my design process with you guys. Maybe it’ll help you organize your work a bit better. Or not.

First, Consider the Problem

To me, every design is a problem. That means I need to evaluate it, turn it around, and assess every possible kink in the design. This could include making decisions that I know are easy to implement code-wise, especially if it’s a time-crunched job.

This is also when I figure out what the design want to say to the visitor, and take the directions given by the client.

Second, Bring Out the Sketchbook

I do design sketches by hand, usually pretty rough ones these days, before I even fire up the workstation. Doing the sketches by hand can usually make sure you won’t run into dead ends, forgetting about important elements and things like that. It’s a very visual way to see how things fit together.

When sketching by hand, I find that it helps drawing the various parts of the design as squares. They’re not necessarily squares in the final design, but it’s a good way to see how well these element add up, and make sure there’s balance in the design. You don’t want the one side be crammed with small stuff, and the other just have one big element – unless they fit, of course.

Sketching by hand helps, and actually saves time. Still, I must confess that I fire up Photoshop right away more and more often, but that’s due to the fact that I’ve got a very clear idea of how the design should be. Sketching by hand certainly helps unless you’ve got a very clear image of what you’re doing.

Third, Do that Mockup Thing

When you’ve got a concept, it’s time to start mocking up the design. I never go straight to the code, but then again I rarely really finish the mockup either. It kind of depends on the client.

Anyway, I mockup the design, more or less. I use Photoshop for this, but some people prefer Illustrator. There are a bunch of other pieces of software that you might prefer.

Fourth, Time to Code

I might not be the one doing the actual code all the time, but most blog designs are coded by me. My editor of choice is Coda, thanks to the included FTP functionality mostly.

I get a version up and running in Firefox first, then I use VMware Fusion to bug test in the various versions of Internet Explorer, Opera and so on.

Finally, Deliver and I’m Done

That’s about it. Delivery is usually a zip file with some instructions. I rarely do implementation work myself, and if I do I make sure the pay for it is good since there’s the possibility of things going wrong that might end up not being my fault, and I really hate that.

That’s my process. How do you go about when designing websites?

Friday Focus 11/9/07

By

Friday Focus Year 2 It is with great pleasure that I start the second year of Friday Focus, the weekly run down of cool things worth checking out before you kick back and relax for the weekend. There is no better way to start your weekend then to be reading the focus every Friday. Enjoy the weekend everyone.

Sites of the Week

Another extremely simple yet functional and super-clean portfolio site kicks off this weeks focus. Poccuo is a design collaborative that has done some pretty nice work ranging from websites to logo designs.

Poccuo

Infinise Design finds itself at number two this week, with its clean and compact portfolio design. A ton of truly excellent icons and other designs can be found in the showcase, plus a sweet collection of downloads too.

Infinise Design

Wrapping up this week is Kareo. I discovered this site on CSSGalleries, which I usually do not use when I’m pulling my weekly three sites. This site just happened to catch my eye, and I thought it deserved to make the list. I guess you could classify this one under the “smooth” category.

Kareo

Digg Weekly

Design –50 Ways to Become a Better Designer
Devlounge is on this list, so what the hell, I figured I should mention it.

Programming – Graceful E-Mail Obfuscation
From Digg description: Posting a naked e-mail link anywhere on the web, in a newsgroup, chatroom, or weblog comments page is generally the kiss of death for your once-healthy address. Now you can protect your addresses in a fully automated way while at the same time being gracious to all users, so you can focus on what’s really important: getting your content out.

Underdog – Webunload: A web marketplace
Yes, I have done a whole lot promoting on Devlounge already about my new project, but there were some issues that needed to be tended to the first few days, and now that everything is settled, I figured why not one more time. The official Digg post really did horrible (1 damn digg), so even if you do not care about the site, please help support my new project by digging it so I can hopefully get the traffic up there quickly. Thanks in advance!

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