1. Sketchy Ideas Are Good

    December 20, 2011

    Sketchbooks make better thinkers
    Remember when you were a kid and you drew all over everything? Walls, furniture, people, pets…Well, just because it isn’t cool to cover the walls in permanent marker anymore doesn’t mean you should abandon your art career altogether. Even if nobody ever sees your ‘masterpieces’, the practice can keep your eyes and design skills sharp, as well as record those bright ideas when they hit.

    Have Sketchbook, Will Travel

    Buy yourself a sketchpad and a couple of pencils or pens…whatever is your medium of choice, and keep them in the car or next to your desk – and get in the habit of using them! Sure, there are millions of apps and note-taking devices for your phone, laptop, iPad, etc…but there is something visceral about the act of scraping a pen across paper that makes it more fun. Maybe I’m just old-fashioned, but for me, writing and drawing will never be replaced by voice recorders or tablets and other digital doodling devices. They even have pens that record audio…talk about redundant technology! The simple sketchbook will go anywhere, travel well and doesn’t require batteries. You don’t even have to turn it off on a plane.

    What if I Suck At Drawing?

    Most kids love to draw—that is why crayons are marketed to them—they have no inhibitions about drawing or painting and just dive into it, without fear. Adults can learn a lot from this, as we tend to ‘grow out’ of art, which is a shame. There are hardly any efforts made to market the practice of art to adults, and when asked to draw something most adults just shy away “Oh I can’t draw at all!” There are plenty of great drawing books on the subject, which are targeted specifically at people who left drawing behind in their younger days, or stopped at lollipop trees and stick figures.

    All in the Eyes

    If there is any one ‘secret’ to sketching or drawing well, it’s the fact that the skill is more about ‘seeing’, not penmanship. It has been said that if you can write your name neatly, you probably have the technical skill to draw. It has to do with how you observe shapes and spatial relationships, as well as light and dark values. Other than that, it’s practice. Learning ‘How to see’ is the real secret. And it won’t just help your sketching ability—it can make you a better conceptual thinker, designer, and generally more creative. How? Because the act of drawing engages the senses in a way that most people don’t experience in day-to-day life. It forces us to think in dimensional, spatial, aesthetic ways—concepts that have been shelved for most adults, but usually nurtured in children.

    Just Let It Fly

    So grab a sketchbook and a scribbling device and see what happens! Most importantly, don’t be self-conscious or timid about what you create – just let it fly and have fun with it.

    posted in: GraphicsTags: , , , , | | Comments (0)

  2. Small Business Website Design and Credibility

    October 27, 2011

    In today's increasingly computer-centric world, many businesses are discovered online first, brick and mortar second. The customer's first impression often comes from how nice a website looks, not how the actual store looks. While this is certainly a new frontier for most business owners, it should definitely be something that is embraced, not ignored.

    The Online Gauge of Trust


    When a potential customer first visits a site, they start with a clean slate of trust—a clear, unclouded opinion of this world they have just entered. As they take in the information and graphic treatments that make up a site, they judge the site's credibility by the presentation of info, imagery, and general usability. If the site is for a photography business and the photo work is second rate, the visitor is immediately going to lose some of that trust. Likewise if the site is for a copywriter and there are misspellings or bad grammar on the site, there is an instant drop in that gauge of credibility. And all it takes is one tiny slip!

    Watch Those Pixels!

    The human eye has an incredible ability to detect spatial alignment. Even the tiniest inconsistencies in typography, graphic elements, or form elements will be noticed by the observant web surfer. Setting proper CSS margins, padding, floats, and line heights are crucial for a designer, not just because it ‘looks pretty’, but because when things are not well styled, the business takes the hit, not the designer.

    As I mentioned, a site visitor shows up with an unbiased opinion of the business behind the site—after a bit of clicking around, how much of that opinion is still positive? How many times did they think “Hmmm…that looks a little Off…”
    Each little moment of “hmmmm…” is a ding for the business.

    form field and buttonWhat's wrong with this form submit button? Even a quick glance and you can see that the 'Password' label is too high in relation to the field, the 'sign up' text is too far down within the button's border, and the button itself is not lined up with the password field above. In other words, a big mess! And that is only subtle alignment issues. Poor grammar and misspelled words look even worse, lowering that gauge quickly.

    Spending the extra time it takes to polish up every piece of type, layout, or imagery on a website can mean the difference between new customers and lost ones. Don't let tiny pixels make a giant dent in your bottom line!

    posted in: Web DesignTags: , , , , | | Comments (0)

  3. Web Project Planning – Just Do It

    October 19, 2011

    No matter what size a website is, the future success of the site is dependent on how well the site delivers content to visitors, and how pleasant that experience is. A well-planned site is easy to navigate and organized so the user doesn't get confused or have to think (much) to find what they need. A solid project plan is essential for bringing a great site to life.

    What is Involved in a Website Plan?

    Unless you routinely manage projects and have that experience under your belt, planning even a small project can be a dreaded exercise. There are two sides to this:

    1. 1. The Client
    2. 2. The Company or Individual Building the Site

    In many cases, the client is a small business owner with limited time for planning web projects, since they are obviously running a business. That is why they hired a developer, right? They want to be led through the process by an expert with experience. The developer's job is to make sure things are planned and executed correctly and delivered on time.

    The Basic Site Plan

    • Set Goals – What should the site offer?
    • Set Timelines – When should things get done?
    • Assign Responsibilities – Who needs to deliver what and when?
    • Test & Launch the Site

    Set Goals

    At the onset of a web project, the first goal is usually very simple – the client needs a web presence, or needs to revise their current one. Beyond that, there are many specific issues that need to be decided as far as site design, layout, navigation, technology utilized, etc… All of these decisions make up the site's overall focus. The more specific you can get here the better, since a loose, unfocused set of goals can lead to never-ending time lines, indecision, and ultimately a weak end-result.

    Some simple ways to set goals can vary from drawing out a basic plan on paper to using some of the free online tools like Mockflow or Balsamiq, to just using your favorite software like Photoshop, Illustrator, or Visio. Once you have a visual reference for how the site is structured, you can start to see how things are organized and if there are potential problems with navigation or future expansion. Once you have an overview of what the site is supposed to do and how you want to lay things out, you need some deadlines for getting things done.

    Set Time Lines – Solid, But Flexible

    The hardest aspect of many site projects is setting a solid time frame to complete and launch the site. The client has a business to run and is often unavailable when decisions or input are needed, and technical issues can arise that hold up the developer from completing tasks on time. Folks with experience planning projects know that a too-rigid time line is a bad idea waiting to happen, and factoring in some cushion is a skill learned only from that experience.

    A good rule of thumb is to add 20% to a project's deadline, assuming that things will go well. It takes a really honest look at the possible delays and complications, which go with every project. Just make sure there is enough elasticity in the plan to compensate for these delays.

    Responsibilities – Define Who Delivers What

    This one should be fairly easy to define: Who is responsible for providing each piece of content or info? Start with a list of deliverables and assign them to the appropriate folks. Sure, it can get more complicated than that, but even for small projects this can eliminate confusion and unintended delays because someone was waiting for something you didn't know you were delivering! In the planning stages, have each party sign off on the list to make sure there are no issues that may hold the process up.

    Testing – Websites Just Work, Right? Right…

    Oh, how we wish that were true! Testing and fixing errors can actually be the longest phase of a web project. Things like browser compatibility, coding errors, typos, client change requests, and poorly planned web applications will all factor into the testing and quality assurance phase. This can be tough when the client and developer both have small teams and little time to devote to testing, but needs to be a priority with a dedicated time line. If you see a project plan with the building phase quickly followed by the launch, with no testing factored in, chances are someone forgot this most important of all pieces.

    Ideally, testing a piece of software or a website should be done by a team of professional testers, who have a list of activities to carry out, while being observed by a user testing expert. This obviously is not always possible, or within budget. So, you often have to get creative with your test methods. You might recruit your relatives…your kids, your friends or co-workers to try out the app or site, giving you feedback where needed. Sometimes an outside party can bring a perspective you would not have thought about, spawning new ways to solve a tricky problem or finding issues that an expert user would not find.

    This would be a good time to point out that expert users do not make great testers. Why? Because they know how to get around better than novice users…they are familiar with all of the common conventions with apps and websites, and don't get tripped up as easily as a novice user. The site or application needs to be as user-friendly as possible, with the novice user being the target user. You want people to say 'It's so simple even a _______ can use it!'. A good plan for testing and user acceptance will go a long way towards earning you that 'accolade'.

    Embrace the Plan, Check Back Often

    All of this planning and effort can get you started on the right track, but it is also important to refer back to the plan and make sure things are staying on track and the goals are being met. Don't be afraid to revise the plan as well, since unintended circumstances can always crop up, requiring a change of thought, new addition, or modification. Maybe the client decides to scrap the contact form and just wants an email address, or perhaps they want to add a mobile formatted site, or change the look & feel. Get used to incorporating any changes into the original plan and adjusting time lines as needed…the fewer surprises the better!

    posted in: Web Design | Comments (0)

  4. Modern Web Design: More than Pretty Pictures

    October 12, 2011

    The designer ponders silly details
    Web designers have always fallen into two main categories: Visual Designers and Coders. The visual designer dreams up magnificent imagery and hip graphics to represent their client's brand, often at the expense of efficiency, cross-browser support, and maintainability. The coder deals with the arcane back-end technologies with acronyms like HTML, CSS, PHP and ASP.NET. The coder will often be at odds with the visual designer's goals, explaining that elaborate graphics or animated thingys just aren't practical, for various cryptic reasons. The result is usually some form of compromise that works, but doesn't necessarily hit the target square on.

    The New Web Designer

    I like to think of the term 'Designer' as more than just a graphic designer. The design of a site encompasses all of the content, not just imagery. A well-designed site has a clean layout, organized content, good font choice, and is easily maintained. Thus, a designer needs to also be a planner, organizer, and (how terrible!) have an understanding of the code.

    Focus on Site Content

    Modern web design has come a long way from 2 minute Flash intros, scrolling banner text, iFrames and other hideous design trends that hinder site performance. Today's designs focus on user experience, proper information display, navigational ease, and cross-browser compatibility. With the mobile device revolution and popularity of tablets like Xoom and iPad, sites are focusing more on simplicity and speed, with designs that let the content shine instead of blinding the user with gaudy graphic novelty.

    How to Make Your Web Design Better

    Instead of starting with the colors and size of the logo, a site should be planned first around the presentation of content and ease of use. Map out the placement of content on a high level – Where does the contact info go? Where does the news section go? Think about your visitors – what are they looking for? Narrow that list down to just a few things…take the top 3 things a user will want to find and make sure those things are dead-simple to locate. Even a split-second of indecision can mean a lost visit. Think hard before implementing that fancy navigation system – is it adding to the user experience or does it just look cool?

    Once the few primary content items have a home, you can determine how the rest of the site will flow. If you have a blog or news section, make sure the older articles are search-able and categorized. Just because it isn't the latest article doesn't mean someone out there has seen it. While you are at it, make sure the content is easily index-able by search engines. Those old articles can still help your Google rank. Most CMS systems have built-in search functions that allow users to find articles…yet another reason to use them.

    Good Designers Always Think Ahead

    It is important to make sure your site has room to grow. If your site continuously adds content, (which it should!) where will it go? Is there room to expand or is the layout so fixed graphically that any changes are a massive headache and require a committee to solve? Taking on the mentality that EVERYTHING on the site may expand is a good strategy. Most modern design techniques are rooted in the concepts of fluidity, adaptation, flexibility, and simplicity. Your site should deliver it's content to the user in a usable way no matter what browser or device they are using.

    posted in: Web Design | Comments (0)

  5. How to Make Your Website Mobile Friendly

    August 1, 2011

    It’s all you hear these days – “There’s an app for that . . .” or “Get it on now your mobile phone . . .” The fact is, more and more people are surfing the web on these tiny No mobile website yet? mobile devices, so if you don’t already have a mobile site or app, you are certainly missing valuable traffic and possibly losing money. Already have a website?  Read on.

    Been a While Since Your Last Site Redesign?

    Your site probably has fallen behind in some (or many) respects, since web technology moves faster than most of us can predict. In fact, If you don’t freshen things up every few months, your search ranking will suffer, and in turn, your bottom line. The mobile phenomenon is still gaining steam and shows now signs of slowing down. On every website I manage, the number of hits from mobile devices has increased greatly over the last couple of years. If you want your site to stay up-to-date and accessible, you need to learn what it takes to deliver content to these mobile platforms.

    Mobile Devices Have Smaller Screens

    The web browsers on today’s mobile phones are capable of almost the same functionality as their desktop brethren, with one big difference – screen size. Instead of multiple columns like on regular sites, single columns are required for layout and vertical scrolling is expected. Go easy on the images, as they eat up bandwidth and slow down the user experience. While you’re at it, rethink your content—just present the most important stuff, not the fluff.

    A mobile site is often a stripped-down version of your normal site, with mobile-friendly navigation and content that loads quickly. Big, clear buttons and text that can be maneuvered around with just a single clumsy thumb. Let’s hope they’re not driving as well…

    How to Direct Mobile Devices to Your Mobile-formatted Site

    The web browser on every computer and device has what is called the ‘User Agent String’ that identifies the browser type. With some clever site coding, you can use this bit of info to direct visitors to the appropriate version of your site. Other modern techniques such as CSS media queries can detect a device’s actual characteristics such as screen size, enabling you to deliver device-specific styling without altering the actual content.

    Many sites actually create a full mobile-friendly version of their content and put it on a subdomain of the main site, such as: m.google.com or mobi.somesite.com, etc… The ‘.mobi’ domain has even become available, enabling sites to have ‘sitename.mobi’ addresses. There are valid arguments for choosing these different options—your specific situation can determine which way to go.

    Once the user gets to the mobile site, they will see the content presented in the stripped-down format that works on a small screen, but (if you planned well) they won’t miss any important stuff. I sometimes prefer the mobile version of sites because they are simpler and faster to get around in. You can maintain enough of your branding and stylistic flair to keep your marketing team happy, but just stay lean and mean in terms of content.

    The Latest Trend – Responsive Web Design

    Well, maybe not the latest as of the writing of this article, but certainly a new approach if you judge by the sites using it – responsive web design is an amazingly refreshing approach for delivering content that adapts seamlessly to the device being used. Whether you view the site on an iPhone, iPad, Desktop, or some oddball screensize, the site will adapt itself and look good.

    Instead of building separate sites for mobile and desktop, you create one site to serve all. Ethan Marcotte’s Book has some groundbreaking insight into this method, and should be required reading for modern web developers. The simplicity of the concept was enough to grab my attention, and the benefits for a client are: reduced site maintenance costs (you’re only maintaining one site…not two), wider audience reach, more versatile content (folks with 32-inch screens won’t see a narrow little column of content down the middle…) to name a few. The responsive approach may not work in every situation, but it is definitely an exciting tool to have in the box.

    Don’t Treat Web Design Like Print Design

    Print designs require strict pixel-perfect representation of imagery and text. Advertisers spend unheard of amounts of money to make sure their graphics look just right in every situation. When you’re dealing with web displays, (especially mobile devices!) you can’t expect every user to see the same exact thing. Each device, monitor, browser, user setting and more will have an effect on the display of your site’s content. The goal should be delivering content that makes sense and functions as intended, while adapting smoothly to each platform. The old-school method of coding a bunch of hacks and workarounds so that every pixel is a certain fixed way…well, you can see where I’m going with this . . . Focus more on ‘solid & flexible’ than ‘rigid & unyielding’. The number of mobile devices and tablets will continue to skyrocket, and trying to learn all the little quirks that each display presents just isn’t an option. Concentrate on a flexible, adaptive user experience and you will save a lot of headaches.

    Mobile Doesn’t Have to Be a Pain

    Many popular content management systems (CMS) like WordPress (you are reading a WP blog right now) have built-in mobile styling via plug-ins that handle the mobile-specific formatting for you. Mobile users will automatically see the small-screen formatted pages and desktop users still get the full-screen version. Slick!

    Just Don’t Say I Didn’t Warn You!

    If you don’t jump on the bandwagon, you’ll be losing visitors or money or both. the choices are simple: If your website doesn’t work well on a mobile device – have it redesigned to adapt gracefully to different platforms, or build a separate mobile-formatted version of your site. Hurry up – time’s a-wastin’!

    posted in: Web DesignTags: , , , , , , , | | Comments (0)