HAPPENINGS
HELPFUL WEB DESIGN TIPS ALL DESIGNERS SHOULD BE THINKING ABOUT
HELPFUL WEB DESIGN TIPS ALL DESIGNERS SHOULD BE THINKING ABOUT
It’s easy to just want to go off and design something edgy and modern to meet the project goals and stoke your ego a tad. I get it, but in my opinion good web designers employ these tactics:
1. Designing for Above The Fold
Designing for "above the fold" is designing for the initial rendered view in the device's browser. Simply put -
what you initially see when a page loads. Ok, so now we know what it is, why is designing for it important? Good design
doesn’t necessarily translate to a good performing page. I know it all too well; you follow all the
basic rules and using your talents, you come up with an amazing iteration that hits on all the project objectives!
Bam, done! Then one of your developers comes back and taps you on the shoulder to inform you that your amazing
design needs to be altered because that cool feature you envisioned above the fold requires some fancy JavaScript or
animation, etc., and is render blocking the page, thus creating issues and your Google PageSpeed score just dropped 10+ points. Whomp whomp.
It’s easy to fall into this trap of wanting to put more into a design when in actuality, less can often times be
more. Save those cool features for below the fold if possible. This is especially true of mobile platforms. Real
estate is costly, and making sure you are delivering content quickly over design is important. By designing for
above the fold first, and making sure you are thinking about the tech required to bring it to life, you then are on
a good track to making it happen. This is where collaboration with developers (front and back end) early on is key.
In fact, bring them to the initial creative brainstorm meeting. You’ll be surprised at how often it can save you
time down the road.
2. Prototyping Early and Often
This one I can’t stress enough. Prototyping or wireframing should be done early, and certainly prior
to designing. You don’t even need to use a fancy wireframing tool or online service. Illustrator works good or even better - I keep a sketch book nearby
just for this process. It’s my design journal. It allows me to see initial creative ideas and layouts and I can
distinctly remember what I was envisioning at the time as I go back through project to project. This practice forces
you to think critically in blocks of content, placement, and flow vs. what it’s going to look like. You can easily
prioritize critical content and calls to action at the beginning. It’s like Progressive Enhancement for a children’s
coloring book: 1) draw wireframe / outlines, 2) fill in with crayons. Final step: Be a good designer.
3. Design Mobile First
I know I’m not the first, or even the thousandth person to say this, but it’s true and I can’t stress it enough if
you care about web design: design for mobile first. You might say, "why should I care? Most of my traffic is on
desktops!". Well you should care. Mobile traffic is the majority. Truth be told, I still struggle with this concept.
It can be challenging as a designer to pull back on your initial designs to give way for content and messaging in a
mobile environment. Designing mobile first helps on several levels: 1) it forces you to make sure your critical
messaging is short and concise, 2) you set tone and use of main design elements that can be used in future
tablet/desktop iterations, and, 3) it forces you to think about content priorities (flow) and calls to action. I’ve
learned the hard way after designing for almost 20 years for desktop and larger screen resolutions using Graceful
Degradation. We sit in our creative dens with our powerful desktops and want to use all that canvas space those
large design monitors afford. For the old schoolers like me, it can seem more natural – start larger and go smaller.
But trust me, it’s hard to spend time working on a killer desktop design and then have to decide what to scale back
and remove. It’s like deciding what you don’t like about your child. It’s easier to start mobile first, then
progressively enhance that design. As an added bonus, this process helps to keep you motivated and inspired
throughout the project because you're constantly thinking about ways to improve your design to compliment messaging,
not tear it down.
4. Does good web design compliment or replace an app?
To answer this really depends on the business and marketing goals. Apps can be very
helpful if you are able to provide a service that's useful in our everyday lives. Something that we can access easily
and is convenient. If I own a dental practice, do I create a mobile app vs. a website, or both? The key to answering
this question lies within the marketing goals and objectives for each business. In this dental example, let’s say
the marketing goal/objective to handle scheduling online and make it easier for customers to engage. Can I do this
in an app? Yes. Can I do this on a website? Yes. So which is better? In this example, I believe most people would
say the website was more effective use of budget when comparing the two. The answer to this question lies more in
the budget (the cost of doing one or both), and whether taking advantage of native functionality of the phone or
device is important compared to a website.