Wednesday, February 12, 2025

10 Essential Web Design Strategies

10/8/13

In this article we look at 10 essential web design strategies. The way we view the web is rapidly changing with many users moving away from the traditional desktop or laptop computers and adopting tablets and smart phones. With that changeover come many new different design challenges that developers have to take into account when they build websites.

 

In past articles I’ve written about the importance of using a storyboard as part of the design process so we won’t discuss that here. Instead, we’ll look at other design considerations that affect developers.

1.  

       1.   Responsive Design: This topic has been getting a lot of press as of late and it’s important to mention it here, too. One approach is to create an overall design that adjusts from one device to another. This might seem to be a good approach but it doesn’t address the issue of text and images. What might look great on a desktop could be disastrous on a mobile device. It’s important to take the time and build a layout that works well with each device and also redesign the images for the smaller screen. As an example, a banner with text which looks great on a desktop might be unreadable on a mobile device. And as for images, you wouldn’t want to use the same image for a desktop on a mobile device. The image will be scaled (which is not a big issue) but it will also be much large than necessary and will increase bandwidth usage and loading times.

 

2.   Use Software Prototyping: This is where you make use of a graphics program like Adobe Edge Reflow to experiment with your design. Then, when the design is complete, you can copy the code elements to use in your actual layout.

 
3.   The Team: While it’s critical to have people who work well together, it’s also important to have many team members, especially if there’s a lot of design and coding going on. One company I spoke to has 18 team members in place for any given project. This ensures that if many projects come in at once, they can be handled quickly.

 

4.   Versatility: Make sure you have a team that can handle all aspects of coding and graphic design who are easily accessible to you, either in house or not. This will prevent being blindsided by a client who wants a particular kind of work and you don’t have the support. In this case you either turn down the job or wind up scrambling to find the support.

 

5.   Customization: While it’s very tempting to use templates, that will also create a certain “look” which might not be appealing, especially if you’re dealing with an important corporate client. In this case, creating a unique look and feel is important because it will help with the branding of the app.

 

6.   Aware of the Marketplace: As an example, if you’re designing for iOS, you’ll have to build fewer versions than you would if you’re coding for Android. This simplifies the design process and reduces the costs.

 

7.   Look for Inspiration: It’s not necessary to design in a vacuum. In fact, that often makes design more difficult. Instead, look for web sites that inspire you. Study, them and see what works. You can use those sites to help build your own. Also, it’s a good idea to look for inspiration off line, in magazines and books. Look for layout ideas that will help spark your creativity. And when creating a design, make sure you do several mockups for your client. In case they don’t like one, you’ll have others to show them.

 

8.   Step Back: One of the most effective design strategies can be to step back from the screen. When working on a design, quite often the user begins to get too close to the screen. Outside of the obvious posture issues, this can also play havoc with your design. Sometimes, stepping away from the screen for a few minutes or even sitting back in your chair will allow you to see the design differently. Sometimes, elements that didn’t work when you were too close to the screen can suddenly “come together” when viewed at a distance. To take this one step further, sometimes it’s good to leave the design alone for a few hours or even overnight. Then, when you return to look at your work you’ll have a fresh perspective.

 

9.   Design from a Different Perspective: Many designers begin with the header and work down once they’re satisfied. Another approach is to avoid that approach and simply experiment with blocks of color, text and design, where the header is just one of many components.

 

10.   Test and Validate: Validate your code then test your layout for all the different browsers and devices that you’ve designed for. On a mobile device, that also means turning the device sideways and seeing what happens with the layout.

 

Conclusion

As with everything on the web, it’s evolving. What works today might not work tomorrow. Fortunately, some aspects of design don’t change much over time and using those principles will give you a good foundation.

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured