Posts filed under Design
  • Not Just a Day Job

    It’s amazing to work with people who love what they do enough to do it at home, off the clock.

    Brad contributes to the open-source Drupal project. Eric works on various web-based applications (most of them a secret at this point). Ken designs websites.

    Speaking of, one of Ken’s personal projects, parkviewbaptist.net, was recently included in a web design inspiration book: The Web Designer’s Idea Book. It’s available, of course, at Amazon.com.

  • Getting Inspired

    As a designer, it’s important to stay abreast of the latest work in the field. For me, that used to mean going to website galleries and reading articles on the latest CSS techniques. When CSS and XHTML were new and different, it was easy to get caught up in what people were doing with the technology. Now that it’s been a while since we all stopped using tables for layout, it takes a lot more to impress and inspire me with a website design. So, I’ve branched out. Now when I’m looking for inspiration, I have a few sources that never let me down.

    Websites

    FFFFOUND
    Probably the most up-to-date design image resource on the web, FFFFOUND is an ever-changing, user-submitted gallery of the latest work available online. With thousands of images already added to the collection, I’m never at a loss for inspiration when viewing their RSS feed.

    Apartment Therapy
    My wife and I just bought a new house and it’s been great to see what other people are doing with their spaces. Whether it’s the color of the furniture, the artwork on the wall, or the great architecture, I’m often inspired by photos from this site.

    Drawn!
    This blog is the place to go to keep up with everything illustrated. My roots are in illustration and I can’t help but admire the talent showcased here. Sometimes illustrators make for really incredible typographers and there’s a lot of that here too.

    Magazines

    WIRED
    I’ve been subscribed to Wired for almost a year now and it has me thoroughly impressed. The articles are usually interesting but the design is stellar. It’s a great mixture of white space, slab-serifs, info-graphics, and awesome colors. If you don’t read it, you should at least admire it for its design.

    ReadyMade
    This magazine is solid. I like this magazine so much I even bought the book! On top of having great ideas for cheap, cool home-made stuff, the magazine is chock full of great font treatments and elegant illustrations.

    Bon Appetit
    Okay, I admit it. I read my wife’s cooking magazines. It’s just for the layout! I promise! I particularly like the photography and color combinations used in this one.

    Well, that about does it for now. I’m sure next month I’ll have a whole new list of things I’m digging. If you’re feeling stuck and need some inspiration, step away from the web design galleries and check out some of sites and magazines I’ve listed here.

  • Fresh Paint

    The Aten Design Group website has a new look. Well, maybe not an altogether new look, but a revised look. We’ve modified the typography, adjusted the layout, and made some color changes. The blog sports a reversed color scheme, with syntax highlighting for code examples.

    The copy has changed, too. We’ve added projects to the portfolio, added text about our technical proficiencies and our iterative process, and added a couple employee profiles.

    And then there is the technical platform - you guessed it, that changed also. We moved from a hybrid combination of custom PHP plus WordPress to a shiny clean installation of Drupal. The new framework provides a more robust environment for potential changes in the future, offers site-wide categorization, and provides better user management for delegating content development internally. It’s easier to publish content, faster.

    So maybe “Fresh Paint” is a bit of an understatement — it’s more like “New Foundation, New Walls, New Furniture and Fresh Paint.” But what a mouthful.

  • Not My Baby

    I am all about process. I love process. I feel secure knowing that when I finish one step, there's another step right there waiting for me. Having a solid process is liberating, allowing you to focus more on what you're doing, and less on what you should be doing. All that said, there are parts that can be difficult and frustrating if approached from the wrong angle. Giving and receiving criticism can be one of the hardest and most vital parts of making an effective design.

    Let it all out

    Giving feedback can be really hard. Sometimes, the design looks good and the only feedback you have is minor. But often this is not the case. Sometimes you have so much criticism that it feels like you're punching the designer repeatedly in the gut. You can almost see the tears well up in their eyes. Negative criticism is not bad, it's part of the process. How you give criticism can be the difference between a constructive meeting that benefits the design and an all-out battle where the designer goes on defense and nothing is gained. Here are a couple guidelines that may help:

    1. Make your case
      If your suggestions make sense and have logical benefits to the design, this is the easiest way to help.
    2. Pull your punches
      Make sure you say everything you're thinking -- this is vital for the critique to work -- but watch out for insulting language. They don't call it "constructive" criticism for nothing.
    3. Don't make it personal
      There's a big difference between personal opinion and relevant feedback. No one cares if you don't like pink, never liked pink, and in fact choked on bubble gum as a child and are traumatized by the color pink. What matters is that the color of the secondary callout is too bright and is stealing the focus from the main callout on the home page which adversely affects the way a user navigates... you get the point.

    Take it all in

    Design can be a very personal thing. I often get attached to a design and think, "Wow, what a perfect little thing you are. You're so pretty and functional and you're going to do great in the world!" Then I get some criticism, and my perfect little thing isn't so perfect anymore. I get defensive and frustrated and I have to remind myself that this is work, and if there's something wrong with my work, I need to hear it.

    1. Acceptance is the first step
      For a design process to get the best results, you must open your work up to criticism. It's important to get opinions from everyone -- project managers, content specialists, programmers, spouses, friends -- not just designers. Then actually listen to what everyone has to say. Don't get defensive, they aren't trying to insult you. Remember, you asked for it.
    2. A glutton for punishment
      It can be hard enough asking for criticism once. Going back for a second helping almost seems foolish. Do it anyway. Get feedback whenever you reach a good stopping point, make changes, and repeat until there's nothing else to critique.
    3. It's not your baby
      ...it's your clients' baby, er, website/brochure/what-have-you. You can be as proud of your design as you want but if it doesn't work for your client, you've failed. Ultimately, it all comes down to what your client thinks and the effect it has on their business.

    I can't stress enough how important criticism is to an effective design process. Incorporating it into key points along the way can really help a design. Whenever you think you've completed a milestone, open your work up for criticism and see if everyone else agrees. If not, listen to what they have to say and use their feedback to finish your work. Remember, process is key, and criticism is a key part of the process.

  • Designing for CodeIgniter

    Last week we launched our very own redesigned website. Early in the design process we discussed options for handling content management, and as the launch date neared, we refined our requirements.

    Basically, the site would need:

    1. Dynamic portfolio pieces, with the top-most piece published automatically to the home page
    2. Static (X)HTML for the about and contact pages
    3. A contact form
    4. A blog

    Initially we considered Drupal, a feature-rich open-source CMS we've used in the past with great results. For this case, Drupal seemed too feature rich.

    We Opted to Build Instead.

    Before the redesign I had a small amount of experience using CodeIgniter for some internal projects. The framework is lightweight, well-structured, and provides a broad sprinkling of functionality via its libraries. I was happy for a chance to use it to build a site from the ground-up, and eager to see just how quick and painless it would prove to be.

    Quick and Painless

    The results were good. The portfolio came together in a couple of evenings -- just a few hours altogether, including an admin section for adding, editing, and ordering the various pieces.

    I started coding the blog on the flight back from An Event Apart Boston, and was 90% finished when we touched down on the runway. Once back in the office, I wrapped up the comments functionality.

    Along the way, we made several significant changes to the (X)HTML/CSS structure of the site, moving it from a fixed design (1024x768) to a fluid-width design that shrinks nicely to 800x600 screen resolutions. CodeIgniter's clean view/controller abstraction facilitated those changes perfectly.

    Some Helpful Modifications

    It's worth mentioning a few extensions we created that made the job even easier. We coded extensions to:

    1. Automatically call the set_fields() validation function when set_rules() is used, to reduce code and increase automation
    2. Preload the validation object with field values from any given object - specifically to preload forms with fields from a database select
    3. Prep validated POST arrays for database entry by comparing array keys to database table fields
    4. Include active-record functionality into the base Model class

    We're happy to provide mentioned extensions if anyone's interested... just ask us for them using the contact form or by leaving us a comment.

previous12