The website. Creating a website can be a daunting task if you don’t know where to start. It can be as simple as a modified wordpress blog website and as complex as a professionally created site that is specifically designed to manage the affairs of an organization with members. Need I reiterate from the post setting up this series that no website in 2016 should look like this? The good news is that you don’t need to know html in order to create a great looking website for your organization, and once the website is created, the main task that remains is keeping it updated. You know how I keep talking about presenting an active, vibrant appearance to potential new members? This is the first place where this is really going to show. Put yourself in their shoes, would you want to join an organization whose material on their website is over a year old? So let’s discuss the different options and mindsets that should be taken into account when designing or revamping a website.
So as to not offend other ATA Chapters by critiquing their websites, I’ll use examples from another group of non-profits that I am active with: the Korean American Adoptee (KAD) Community. The main idea behind all of these organizations is the same, to bring people with similar interests together without the end goal of turning a profit.
Example A: Nebraska KADs
This first website is incredibly dated. The header image expands horizontally to the size of the browser window which leads to image distortion when the browser is full screen in the now standard widescreen format. The body of the page is embedded and you need to scroll down within a designated body area in order to see the two images in their entirety. The link to the Facebook page is a dead link and leads you to a Facebook error message. Even though there are two columns, the existence of two or more sentences per paragraph on the left makes it seem wordy and off-putting.
When you click on events, it becomes apparent that the organization is not very active as the most recent past events listed end in 2010; despite the body text above stating that events are held on a monthly basis. And again, the footer has a set height with a lot of blank space, it’s not a very efficient use of website area.
The resources page contains only text and similarly to the home page, contains dead links.
At first glance, the page has a dated feel, and it’s not really very inviting to newcomers. Not to mention that in their contact page, they list a myspace group.
Example B: Adoption Links DC
This second website has a more modern feel to it which can be attributed to being created with weebly. The group photo is inviting, but the five-line paragraph with small text is entirely too wordy. Delving deeper into the website, the events listed are from three years ago and there are dead links. Yes, even more modern looking websites can be poorly designed.
So, now that some aspects of poor or dated website design have been identified, let’s talk about web page aesthetics and interface ease of use while breaking down the MATI website (built with Webbright and WildApricot software) as a more ideal example.
1. Color Scheme
While it may seem elementary to discuss something as simple as color scheme, it gives off a subconscious reaction to the initial visit to a webpage. When we look at the MATI homepage, the first thing that we notice is the use of color. The Navy Blue (#0146EB) that starts atop the page and fades to white is in direct complement to the Dark Tangerine (#FDB813) in the logo and menu. So the first suggestion when picking a color scheme is complementary colors or color families; though, the former is preferred to the latter.
When choosing your color scheme, some people find warm colors to be agitating and passion-inducing, bright reds, oranges, and yellows are perceived as being too busy and should be avoided in regards to the main page color. Cool colors such as violets, blues, and greens are more inviting and appealing to the eyes in larger areas. While this color scheme puts emphasis on cooler colors, it should be noted that a website with a color palette of only cool colors will give off the appearance of being drab.
A website that does an excellent job at creating a lackluster environment is the website for ATA (seen below without logo or text).
The selected palette is mainly a dark shade of gray with lighter gray and a thin bar of dark blue at the top. Nothing about the website pops. Even the stock images of the man from the restroom signs are shades of blue and don’t add to the attractiveness of the page. The eye is drawn to the second level box slideshow because it changes every few seconds and sometimes there’s a bit of difference in color.
I believe one of my first comments when asked what changes I’d make to the website for ATA were,
“No one wants to go to the website because spending more than five minutes on it makes you want to go to a bar and drink your sorrows away while listening to the saddest country song you can think of.”
If focusing so much on color palette seems like I’m picking nits, consider the following:
Below is almost the same screen shot as above but with the complementary color of the dark blue band replacing the lighter gray. Aesthetically, it opens the homepage up a bit more and it appears more inviting. Just that one change among many others I’d make to the homepage.
In summation, it is best to use cool colors for the body and warm colors for accentuating points of interest.
2. Font Selection
When it comes to font selection, every single graphic designer will tell you,
Luckily, in a cursory glance over the various ATA chapters and affiliates websites, I didn’t come across any committing this mortal sin of graphic design. I did want to mention a few things in regards to font selection though. Consistency is key. If you select a font, stick with it. ONE. SINGLE. FONT. Throughout the entire website. Headers, titles, body, footers, everything. I would even advise against fonts with serifs (those little lines that are attached to the end of a stroke on a letter or symbol.
This is a joke, naturally, the actual French term for a serif is “Empattement.”
The reason why I encourage the use of sans serif fonts is because when other styles are applied, be it small text size, adjusted kerning (adjusted spaced between characters), bold, or italics, fonts with serifs are harder to read. Especially if a user comes to your website on a mobile device like a smartphone or a tablet.
The MATI website employs one font. Arial, a sans serif font that gives off a clean appearance no matter what size the text is. Extra points if you can name the most favored font by graphic designers.
Content aesthetics is something that also adds a subconscious element to the feel of a website. Long gone are the days of homepages with as much text as possible. In fact, the homepages with the best feel are the ones with a minimal amount of text. In a world with social media, where people want to get to the information they are looking for as soon as possible, long winded homepages are quickly looked over and the user goes on to the next Google search entry. Referring back to the MATI homepage, at first glance, there’s actually very little content, only about 180 words (in contrast, the website for ATA has about 240). There is no actual body text to the homepage, it’s mainly a collection of call-outs (areas that users interacting with the website can click on to see pages with the meaty content), and AV Media (another aspect that people find more inviting, video-based content as opposed to text-based content). Barebones, short and sweet. Save the content for the rest of the website and the blog.
User interface and functionality
After aesthetics, the next aspect you want to look at is user interface and functionality; and I don’t mean for your members, I’m more referring to anyone who may have the administrative ability to modify to the website. Keep in mind that ideally, you will be wanting to update your website at least quarterly in order to accommodate the most up-to-date news and events of the organization. The interface should be such that any board member could go in and modify with ease.
The following is a screen shot of the Website editor in the Wild Apricot Administrator interface for the MATI website.
It’s fairly straight forward as far as navigating is concerned, where the menu on the left shows you the available pages to edit, and you can start editing by clicking the “edit” button.
When you do so,
Every single page operates the same way: drag and drop your gadgets, add your content, and in an afternoon, your new website is up and running! And the ease of use applies to all drag and drop webpage editors be it Wild Apricot, or WordPress, Weebly, Wix, etc. Wild Apricot software has the added benefit that you can also use it to manage events, event registration, membership fees and renewals, the directory, directory updates (done by the registered member), donations, and member communication (e-mails) because it was specifically designed for organizations like ours. If you have any questions regarding re-designing your chapter/affiliate’s website, please don’t hesitate in asking. I’m open to helping any ATA Chapter or Affiliate re-design their website to modernize it and start bringing in new members.
In next week’s post, I’ll discuss the blog. What goes in? What should be put somewhere else on the website, and why regular postings are important.