HAPPENINGS

HELPFUL WEB DESIGN TIPS ALL DESIGNERS SHOULD BE THINKING ABOUT

January 17, 2017
By Jason Weamer

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.

PJHM WINS GOLD(S)

WEBSITE DESIGN TIPS FOR REAL ESTATE BROKERS & AGENTS