Guidelines

Jan

2021

Should you build your own website, or hire a professional?

If your organization’s website needs a major refresh, you can hire a professional or build it yourself. After all, thousands of free and paid website templates are available, and website building tools are better than ever before. TV and social media ads make it look so easy to build a website! Let’s look at some of the questions to answer before you make a “build or buy” decision.

Website “build vs. buy” questions

What are your objectives? Why do you want to change your site? You may want to refresh your site because it is outdated, because your company is growing or adding products or services, to start a blog, to add the ability to sell products or services online, or for other reasons. Think about the technical and financial objective you want to achieve.

What types of changes do you need? You might be thinking of a total new look and feel, a change to the website structure, or both. Maybe you need a media library to easily store and retrieve images, videos, etc. You might need entire new features, e.g., a blog or e-commerce capabilities. You simply might want a new website that is easier to maintain in-house, rather than hiring a web professional to make changes each time you need them.

How is your current website built? Is it written (coded) in HTML + CSS, or is it built on one of the new platforms like WordPress, SquareSpace, WIX, or other? If it is an HTML site, you will need to know how to write code. If it built on one of the newer platforms, you may be able to build your own site; it may look professional but, depending on your HTML know-how, the site can be a mess behind the scenes. Yes, you read that right! This is because you cannot refresh these sites just by applying a new theme. Many of the current “drag-and-drop” website themes have widgets, code blocks, and other complexities. These site elements may not work in the new theme without a lot of tweaking.

How tech-savvy are you? If you are a lover of things tech, and the first of your friends to get the latest electronics, and you are committed to doing site updates yourself in the future, then building a website may be for you. If you use computers, social media and smartphones every day, but rarely update your electronics or software, this is a warning sign that you should speak to a web designer. But read further…

What is your timeline? If you need it quickly and can effectively plan and build a website, then do-it-yourself might work for you. Just keep your project objectives in mind, spend adequate time planning, get advice as needed, and go for it! If you need it quickly, don’t even consider slapping something together quickly to get a new, improved website up and running. This will do more harm than good. If you have a reasonable timeline, then you have plenty of options, both do-it-yourself and professionally-built.

What will it cost? First, think about the value that the website updates will bring to your company in terms of new clients, more business, and better market penetration. Second, consider the total cost to your organization. This is a cost-benefit issue, not the price tag to get the site up and running. If web development or computer coding are not your core business, you may find yourself spending hours updating the website yourself, at a significant cost to you in terms of lost revenue, missed marketing opportunities, missed new clients, etc. Third, what are the ongoing maintenance and update costs for the next three to five years?

Congratulations! If you have read this far, you now have more questions than answers! At the least, you understand some of the “build vs. buy” issues, and the many choices available to you. If you still have questions about what is best for you, please consult a professional. A short discussion could save you hours of time and a stack of money.

Apr

2018

Looking for design inspiration? Try these blogs…

Most designers do not just wake up in the morning, feeling inspired. Something they see or do gets their creative juices flowing. I often find my inspiration on the Internet, and I follow several design blogs. If you don’t know where to look, here is a compilation of 20 design and development blogs to follow. It includes several I have followed for years, plus some new ones I am eager to try… if only there were more hours in the day!

Feb

2018

Develop style guides for your design projects

Whether you are developing a 50-page Website, a small mobile phone app, or an annual report for a corporate client, you should get in the habit of developing a style guide.

Branding and style guides are important for projects large and small. They help to provide consistent messages about an organization and provide a degree of professionalism. Creative Bloq has a good post on this topic, with examples of thirteen style guides for famous organizations.

Client project style guide

The client’s goal was to refresh their brand and their Web site to draw more customers to their wellness practice and retail establishment. I prepared a simple style guide, using Adobe Illustrator. The Style Guide displays the brand, color chips for main and accent colors, typography and usage examples:

Style Guide | Nature’s Garden

Here is how the styles look when applied to a “mobile first” Website design. Note how the colors and the leaf motif are repeated throughout the page. The design works well on a smartphone, on a tablet or on a large HD screen.

Mobile View | Nature’s Garden

Responsive Home Page on Retina Display

University style guide

On a whim, I researched my alma mater’s color and brand guidelines. The Miami University is a nationally recognized Public Ivy, and its brand is particularly important. The brand must convey the Public Ivy experience.

The University uses different reds for print, Web and merchandise use. Several formal and informal logos are available for these uses. The use of certain “vintage” logos requires special permission.

The branding guidelines include logos, colors, typography and graphic elements. They encompass Web, print publications, social media, photos, use in athletic programs and more.

How people – alumni, students, future students, faculty and staff, fans, donors, and the public at large – feel about Miami University directly relates to the University’s success. In a sense, the brand speaks on the University’s behalf without saying a word. It represents who we are and what we stand for. It is the visual representation of our reputation.
Miami University Brand Guidelines

Here is the “M” spirit mark often used on sportswear and signs.

The Miami University Spirit Mark

Nov

2016

The colors of the Web

Blues top the charts

Blue hues reign at the top of the most used hues on the most popular Internet sites, according to Paul Herbert Designs. This designer wrote a script to “scrape” the most-used colors from the most visited sites, according to alexa.com. First, he has a graphic with the colors from the top ten sites. You can mouse over a color on his Web site to see its HEX code.

The Most Popular Colors on the Web (Source: Paul Herbert)

The most popular colors by hue

Herbert also charts colors by hue, both on a bar chart and using a radial map where you can change the background color. Blues rule!

Color formats

Herbert analyzed the color code formats used. Designers used HEX (hexadecimal) most often, then RGBa (red-green-blue + alpha), 3-digit HEX and named colors, in that order. None of the designers used RBG, HSL (hue-saturation-lightness) or HSLa (HSL + alpha )formats.

Tools and Tutorials

Finally, Paul Herbert describes the meaning of different color formats, and how to convert colors among the formats. He explains the science behind the different formats; predefined color names, RGB, RGBa, HEX, 3-digit HEX, HSL and HSLa.

Nov

2016

Size matters

Your body text is too small

When coding a client website, I needed to make several adjustments in heading and body text size. As a recent blog post by Christian Miller (aka Xtian Miller) says, you can make body text too small, but nobody complains if it is too large. The benefits of using LARGER body text include:

easier to read from a distance
improved readability
improved usability
increased visual impact

Miller says that the majority of Web sites use 15-18 px body text… which brings to mind the (rhetorical?) question that I posed last week–which units to use, points or pixels–when sizing text? I started to use ems and % for line height in my last few Web projects. I like using these relative measurements rather than fixed measurements, once the base font size is defined. I can also use these relative units for font height, for example, headings and other text used for highlights and emphasis.

Miller also writes that “Mobile First” designs can cause designers to be afraid of using larger body text. He provides examples of several sites that use 20 px or larger body text, including Jeffrey Zeldman’s.