Associations, unlike some non-profits, typically have a very clear, well-defined audience that they are trying to reach. However, they are faced with the challenge of offering content that meets the needs of a wide range of companies within their industries. We searched through hundreds of association websites to present you the 19 best examples of web design for associations.
This website is all about clean lines and bright colors with images that not only look pretty, but tell GMA’s story. It’s always best to tell your story through your constituents and that’s what this website does so well.
Too much information can often clutter a website and overwhelm the audience, yet FMI was able to separate lots of information into relevant categories to create a clean, user-friendly appearance.
The earthy scheme presented here pulls you into beautiful park scenery that you can’t help but check out. One of the first things you see is a message making viewers aware of the dangers National Parks face and a clear call to action of how we can help, which is the most important point for them to get across!
The color scheme, high quality images, and enhanced layout of this website are both functional and beautiful.
Want to see examples of great nonprofit website designs? Download our list of the 38 Best Nonprofit Websites of 2013 and be inspired!
EDRA welcomes you with an updated edge offering unique sketches instead of images. From there you will find information chronologically listed for you to learn the latest happenings of what’s going on.
With a futuristic appeal, Village Alliance created an engaging site with large images and text. When you scroll to the bottom, you will find a Village Tour that allows the user to create their own story – exploring things to do, sites to see, and places to go.
PMBA is eye catching with vibrate colors and plenty to look at. All links are easy to find, especially the quick “about” blurb as one of the first things you see, along with a list of news and events on the right, and social media feeds at the bottom.
This site combines several eye-catching features into one website with loads of great images, interactivity, clean organization, and a scrolling list of recent news and updates for the latest information.
WSWA has a very different look to it, which makes it great for separating the brand from the crowd. The interactivity with the mouse also makes things interesting as you poke around for information.
NWFA offers a fresh look with complementary colors and an interactive feature to design your very own room, allowing the user to test out different types of wood flooring in a variety of settings.
If you’re looking for engagement, this site has got it. To find what you’re looking for, you’ll need to do some clicking. But ASLA sets it up in a fun way that makes you want to click on all of the icons to see what else is hiding!
The American theme is strong in this website’s design. From there, the vast amount of information is organized into much smaller categories, creating a positive user experience complete with up to date press releases and links to all social media channels.
There’s always been something striking about gold and black, especially when combined with a great layout, rotating icons, and large images. This site immediately lured me in and made me want to explore.
This site is a beauty! The vivid image of the sunshine against the grass gets the solar point upon landing. When scrolling down, the ‘sticky note’ layout adds a nice touch without overpowering the site with information at first glance.
Real motion picture images against a fantastic color scheme make this site memorable. We like the drop-down tabs with the bars of links, as well as the checkerboard pattern of information and resources at the bottom.
This site screams exploration, representing a map and an adventure, which is exactly what the Peace Corps should be doing!
ACE took a lot of information, but categorized it in effective ways so the viewer isn’t overwhelmed at first glance. The more you scroll down, the more you’ll find, but instead of being overloaded you can easily look for a specific header to get exactly what you need.
As a health food fanatic, this site could not be more appealing! Images of produce take over the entire background with powerful facts about labor, politics, economic harm, and timeliness to ensure the most important messages are seen by the viewer.
Do you have any association in mind that didn’t make the list? Let us know! Need to talk to someone about designing a website for your association? Shoot us an email.
We’ve shown some of our favorite responsive design examples, we’ve told you why responsive design is important, and we’ve even explained how it works. Now, we’ve collected our absolute favorite layout tools, testing tools, development tools, articles, and inspirations to make designing responsively as easy as possible. We think that all websites should be responsive, so take these tools and make our dream come true!
The best way to start any design is with a sketch. These free sketch sheets have four different sizes so you can plan out your design according to your different break points. They’re perfectly sized to print out so you can make as many as you want!
This is the most interactive and best-looking grid generator I’ve come across. You can specify the size of your grid elements–number of columns, column padding, gutter width–resize the grid for different resolutions, and even add break points. Once you’ve set your specs, one click will download your Gridpak containing PNG, CSS and JS files. This means you can use it in your design process, as well as your development. It works super well and looks pretty sweet doing it!
You should talk to us. Social Driver is now hiring both part-time and full-time front-end developers to help bring our responsive designs to life. We have free Nespresso and lots of fun!
This page has 5 different layout wireframes which you can toggle to a mobile view to see how content can be rearranged. Unfortunately you’re unable to make your own wireframes, and can’t control the screen sizes, but it’s still a good resource when you’re thinking about content organization.
This is a great collection of the various patterns used in responsive design. Different ways of reflowing content, handling navigation, tables, images, and more are shown with accompanying descriptions. By clicking “Edit This Pen” at the bottom of each page you can see the full HTML and CSS. Nicely done!
Your days of manually dragging out grids in Photoshop are over! GuideGuide is a free plugin for Photoshop that allows you to input a few values (column width, row width, gutter width, etc), press a button and Photoshop draws out the grid perfectly for you. I wish I had known about this sooner!
This article by Ethan Marcotte is a great introduction to responsive web design and development. Ethan provides a background for responsive design while walking the readers through his creation of a responsive page. He does a great job of explaining every step along the way as well as his thought process behind the work.
Are you just starting to plan your responsive site and don’t exactly know where to start thinking about content organization? Give this article a read. Luke discusses a few different ways to reorganize your page once the resolution gets smaller. With tons of examples and helpful diagrams, you’ll be on your way to a great responsive site in no time!
This article is rare in that it’s written for designers who won’t be touching any code. That being said, the article rightfully says, “To truly learn how to design a website, you must understand how the design will later be implemented in code, even if it’s only a rudimentary understanding.” The basics of Responsive Web Design are covered, as well as giving designers helpful tips on how to plan a design before anything gets started.
Deciding on breakpoints will always come up when designing responsive pages, but where should you place them? Many people hold to a standard set of breakpoints based on the resolution of popular devices, but there’s another way of thinking. This short and sweet article is an enlightening read if your wanting to refine your process for setting breakpoints for your responsive layouts.
BostonGlobe.com is one of the more recognizable responsive sites and frequently appears on lists about RWD. The author of this article talks us through the whole process of designing the new BostonGlobe.com with insights into breakpoints, where to start, and which programs to design in. It’s really interesting to read the problems they ran into and get some insight into the thought process that goes into redesigning a large website while keeping responsiveness in mind.
The whole process of designing for responsiveness is covered here. As a designer, responsiveness changes our workflow a bit. More design work must be done in-browser rather than completed before handing it off to the developer and the author does a great job of detailing this new process.
If you are wanting to test a responsive website that’s in development and you left your iPad at home or simply prefer doing it all on your desktop, responsive.is is the way to go. Put in a website and you can resize it for desktop and ipad or iphone in portrait and landscape orientation. It doesn’t offer manual control over window size, but it’s simple and works well for people targeting iOS.
There are a lot of testing sites out there, but I’ve found Screenqueries to be my favorite. It’s got a large list of mobile devices that you can select from, or you can drag the ruler around to fine-tune the window and choose exactly the resolution you want to see. You can easily rotate the view with a single click, and even see how it’ll look within the device’s browser UI using the “True View” button.
This grid generator gets right to the point and does it well. It allows you to input exactly how many columns you want, as well as widths and gutters, whereas other generators only give you a few pre-selected options.
Such a great repository for inspiration! Media Queries shows off tons of responsive examples with the different screen sizes side-by-side. It’s a great place to get ideas, or see how other designers are reorganizing content as screen size changes. Go to http://mediaqueri.es/popular for the best examples.
What are your favorite tools? Let us know in the comments below!
This video was shown at the opening of the Typophile Conference in Seattle in July 2007. It is an inspiring example of how we can use design to not only create something beautiful, but to tell a story. There is no identity or personal characteristics revealed in the video, just a sped up story of life told through the typography that we see everyday. I challenge you to watch this without getting a little misty-eyed.
Leslie: Calling all nonprofits! Before contacting an agency or issuing an RFP, there are a few essential steps to take before you redesign your website. We asked Julia Rocchi, Associate Director and Managing Editor at the National Trust for Historic Preservation what they did to prepare for their own website redesign. Here’s what she had to say:
This may surprise you, but the most important part of a website redesign isn’t the color palette. It’s knowing your audience, articulating your goals, and laying the right groundwork for the entire redesign process.
This article focuses on what is arguably the hardest part of the redesign process: getting ready to do it. But if you take the right steps at the outset, you’ll significantly reduce your chances for confusion, delays, and general insanity later.
Do marketing research if/where possible. What are your audience(s) values? What gets them excited? What moves them to support your cause? What else do they support? Do certain categories or themes emerge that you can use to frame your approach?
Know your audience’s demographics: It’s helpful to know not only their age, gender, education level, etc., but also their behavioral demographics. Are they donors? Advocates? Members? Do they like reading, clicking, viewing, downloading? Are they computer-literate? Are they heavy mobile phone users? Which browsers do they use? If you are using Google Analytics on your current site, you can easily answer these questions.
Identify what actions they are taking. What are they currently coming to your site to do? Do they know everything about you already, something about you, or nothing about you?
Want to see examples of great nonprofit website designs? Download our list of the 38 Best Nonprofit Websites of 2013 and be inspired!
Be specific in your audience. You cannot be everything to everybody; there is no such thing as a ‘general audience.’ If you try to speak to everybody, then you end up speaking to nobody. The more details you have, the more you can visualize the real people using your website and better tailor the experience to their needs.
Compare the users you want to reach to the users you currently reach. Do they align? If not, what do you need to tweak – or outright change – to match them up?
First, some definitions. Goals are long-term and a little fuzzy: “We want to build our cause into a movement.” That’s noble; keep striving for that.
Objectives are concrete, short- and medium-term guideposts for achieving the fuzzy goals. They must be measurable. For example: “We want to increase our membership 25% by the end of this fiscal year.” Good objectives have timelines, budgets, and people power behind them.
Website redesigns tend to be complicated, complex, and long-term, with many moving pieces and contributors. Establishing a project manager ensures that at least one person has the global view and can see how everything is working together.
Identify all other roles and responsibilities as well, not just for the redesign process itself, but also for ongoing content management. Roles might include: Project Assistant, Quality Assurance/Tester, Content Migration, Content Development, Content Manager, Training, and/orLaunch Team.
When laying out your timelines, remember to include all dependencies, be they related to tech, content, or personnel. Also, always assume each step will take longer than you think it should. In fact, that’s a fundamental truth of website redesign: It WILL be delayed. But the more contingency planning you do, the better shape you’re in to weather schedule hiccups.
Nothing halts a project in its tracks faster than an unhappy higher-up. Be aware of how your organization likes to operate. Is your senior leadership hands-off or highly involved? Who’s the final decision maker overall? Are there separate sign-offs needed for different components? What’s the usual turnaround time on approvals and answers? Factor all these different pieces into your project plan.
Also, consider inviting input from your current or potential users. After all, your audience is mostly likely an external one and you want to be sure that you’re developing a site that fits their needs.
Ask the project manager to give project updates at key intervals. This helps minimizes surprises . If in doubt, err on the side of over-communication.
Ah yes, budget – a nonprofit’s favorite subject. As much as it might pain you to discuss it, a lot of decisions flow from the budget, including what design proposal you accept, how you determine the scope of work, etc. So be realistic about a) how much you have available and b) how much you need. Also, be prepared to adjust your scope of work accordingly. Having a little cushion available never hurts, as you will likely realize you need or want something additional that wasn’t in the original scope.
The good news is, if you’re realistic about your budget from the outset and have done your best to optimize the development and approval process, you can cut down on potential costly work and revisions later. Being organized and thoughtful from day one will make your bottom-line very happy.
Overall, be specific, be clear, be organized, be calm, and you greatly increase your chances for a successful and effective redesign. Good luck!
Other Good Articles
