Hi There, I am

My Photo

Dorothy Ayers

Equal parts analytical and creative, I love efficient and streamlined workflows, mastering new programs and tools, and finding creative solutions to problems. I am fascinated by the psychology of design and its effects upon user behavior, and I want to contribute to the efficacy of digital communications.

Social media

About Me

Tech Savvy
A certified Microsoft Office “power-user”, I am also highly proficient with Adobe graphics software and fluent in PHP, HTML, and CSS programming languages.

I enjoy working in a cross functional environment, learning from others and collectively working towards our common goals.

I work hard to complete projects on-time and on-budget with the highest level of technical expertise and professionalism, while maximizing end-user satisfaction.


Common Style Guides for Writers

Working with Common Style Guides for Writers

Organizations utilize different style guides as a means to ensure consistency of the materials published within their disciplines. Style guides for writers are often designed to contain rules that are especially relevant to yours or their unique audience, and will likely include standards for writing, grammar, and the design of documents.

What Style Guides Aren’t

Style guides are not sets of hard and fast rules – there really are no rules as such in grammar or in language. Language is far too subjective and fluid for that. Rather, style guides represent the preferences of whomever (or whichever organization) published the guide. By choosing to follow one guide, you will inevitably break the “rules” of another. And that’s perfectly ok.

What Style Guides Are

A style guide’s real purpose is to provide you with consistency and improve communication. As you write you will find yourself faced with many opportunities to make choices, grammatically speaking, about your style, usage and formatting, and any one of those choices could be considered correct as long as you use it consistently.
The reason why we capitalize some words, spell out some numbers, and use commas after some clauses but not others is not simply to confuse you, but is actually because grammar is trying to make it easier for a reader to understand whatever it is that you are trying to communicate. Your choice between whether to spell out a number or use a numeral should come down to whichever one will make for easier readability or comprehension on the part of your audience. If both choices will accomplish those goals equally, then the decision comes down to maintaining consistency. So as long as you set a convention and stick to it, you should be just fine in most cases. But if you change your mind with every paragraph and your capitalization and punctuation are jumping all over the place, you will only confuse your readers, and you have probably figured out by now that that is absolutely not what you want to do.
As you come across each of these little formatting decisions that need to be made, you just might get away with using your short-term memory or jotting things down on a loose-leaf sheet of paper. At least, that will work for you if you’re working on a one-off assignment or a short composition. But if you’re working on an extensive project within an organization, or if you’re creating content for a blog or website, you don’t want to have to look back to your previous work every time you come across a formatting question.
And that’s where the style guide comes in.

Common Style Guides

You have several options to choose from, each with their own strengths and weaknesses (which are all highly subjective, of course). Your choice may even be determined by the organization or industry within which you work. But here is a brief description of some of the most common and popular style guides to get you started:

The Publication Manual of the APA

APA – The Publication Manual of the APA: An academic style guide specifically created for use in the social and behavioral sciences but used within many other scientific disciplines. It is commonly used for journal articles and books, but you may also see it used in textbooks or use it yourself on a college paper. APA features a simple reference citation style, but perhaps its greatest contribution is its influence on the reduction of bias in language and the use of sexist or racially/ethnically charged language.

 MLA Style Manual

MLA Style Manual – The MLA Style Manual and Guide to Scholarly Publishing: This style guide is published by the Modern Language Association of America. It is widely used within the humanities, especially the language, literature, and culture disciplines. MLA is a popular choice of journals and presses that publish works related to these disciplines, and they will often require that manuscripts be submitted in MLA format. The Modern Language Association also publishes the MLA Handbook (for Writers of Research Papers).

 The Chicago Manual of Style

The Chicago Manual of Style: This guide is very widely used throughout the U.S. You will most often see it in use within social science and historical journals, and it has also become quite common within the publishing industry. (It is the one I personally work with most often.) The Chicago Manual of Style deals with both the grammatical and document preparation aspects of the editorial process. It is currently on its 16th edition, and users can purchase either a hardcover edition or an annual subscription to the searchable online edition.

 The Associated Press Stylebook

AP Stylebook – Associated Press Stylebook and Briefing on Media Law: This is the go-to guide for newspapers and any other publications within the news industry. Dedicated to clarity and efficiency of communication, many of the guidelines are designed to save on valuable print space. It is updated annually and, in addition to the widely distributed print version, U.S. users can access a subscription-based online version.

There are certainly more that you might encounter as you get into more and more specific style and requirements of English language usage – New York Times style and AMA (American Medical Association) style come to mind – but those listed above are the major style guides for writers, and the ones that you should be familiar with.
Remember, just as communication and language are constantly changing, so too are style guides. You will have to keep up with them as updated versions are released. After all, only a few years ago who would have guessed you would need to know how to appropriately cite a tweet! The investment in the latest, hard cover editions of the style guides can be considerable, but for most people, the pocket guide versions will work fine. For content professionals, you should definitely consider investing in a hard copy of the full, most up-to-date edition of whatever style manual(s) you prefer or getting an annual, online subscription when available.
If you have not yet identified a style guide to use during your project or within your organization, you should do so now. Believe me, it will save you a lot of pain and confusion later on.

House Elevation done in Google SketchUp



Note: This tutorial assumes that you have a basic familiarity with GIMP, its tools, and its layout. If you are confused about any of the steps, feel free to ask for clarification in the comments and I will be happy to help.
  1. Create a new transparent image size 1024 x 1200. Use the Bucket Fill tool to fill the background layer with a color of your choice – I used a very pale grey.

  1. Go to File>Save As, and choose a location and a file name for your project. Save it as a .xcf file so that you can always come back and make changes to it in GIMP later. Remember to save the file often while working on your project – it is not overkill to save after every significant change (just hit Ctrl+S after each step).
  2. Before your begin the web design process, you should take a moment to consider the purpose and goals of your site and exactly what content will help it achieve those goals. Consider the relative importance of each content element and how much screen real estate it should command. Some types of content to consider:
    1. Featured/Latest Posts
    2. Portfolio/Latest Projects
    3. Navigation
    4. Advertising
    5. About
    6. Links and Resources
    7. Logo
    8. Contact Form
    9. etc.
  3. Create a new transparent layer for each content element that you chose. In my example, I have a layer for “Main”, “Services”, “Testimonials”, “Footer”, “Logo”, and “Navigation”.
  4. For this next step, it helps to first sketch out your layout on a sheet of grid paper – just determine how many pixels each square should equal and get sketching! On my sketch, I had each square equal 40x40px.

Once you have determined the size and position of each content element, select the corresponding layer, then click and drag using the Rectangle Select tool to make a box of the approximate size and position you need. Use the rectangle select dialog to adjust the size and position so that they specifically match your layout (this is where that sketch really comes in handy) and to add things like rounded corners, if you like.

  1. Use the Bucket Fill tool to fill the rectangle selection with your desired color. Shift-Ctrl-A to deselect the area. (Have you been remembering to Ctrl+S after each step??)

  1. Repeat this process on each content element layer. I made the background of some of my content boxes white, some mid-grey, and some dark grey. You can use whatever colors look right to you, but keep in mind that a streamlined, neutral color palette will give your design a cleaner look overall.

  1. Now that we have each element in place, we can start accessorizing. This is the fun part! The first thing I did was to add text to the logo area. (I just randomly chose a fictional name for a design company.) This can be a great time to introduce an eye-catching accent color, like I did with the green. You also might want to consider using two different fonts for visual interest, but tread with caution: it’s very easy to overdo it and make the logo look too busy, especially since our goal here is a modern look and feel.

  1. You can give the navigation menu more visual weight by adding an accent color border around it. Add a layer above the navigation layer and call it “Nav Border” (or any name that works well for you). Use the rectangle select tool to draw a box around the navigation area, and set the foreground color to whichever color you would like to use for the border. Then click on Edit>Stroke Selection. Be sure the “Stroke Line” and “Solid Color” radio buttons are selected, and choose a line width (I used 2 pixels). You may also want to experiment with the additional line style options by clicking the “+” next to “Line Style”.

  1. Add text layers for each menu item.

  1. Our layout is looking pretty good now, but I’ve decided that I want to include both About information and Contact information within the Main Content area, so I’m going to add a line of demarcation down the middle of the box. To do this, create a new transparent layer above the “Main” content layer. Name it something like “Vertical Line”. (You may want to hide the “Services” layer – or whatever layer is adjacent to your “Main” content box – to make it easier to see what you’re doing.)
  2. Click on Image>Guides>New Guide by Percent. Set a Vertical Guide at 50%. Use the guide and the rectangle select tool to draw a very thin, tall rectangle directly down the center of the “Main” content area. Use the Rectangle Select dialog to set the selection to 2px wide. Bucket Fill the selection with dark grey (alternatively, you may find it easier to fill the selection by going to Edit>Fill with Foreground Color). Click on Image>Guides>Remove all guides.
  3. Use this same method to add a horizontal line of demarcation at the very top of the “Services” content area.

  1. Now let’s start filling in our content areas with some placeholder content. Hopefully you have already given some serious thought to the type of content your site needs, have identified a message and a tone of voice that will speak to your audience, and maybe you have even drafted some of this content already. Use the Text tool to add a header and a few sentences about your business/organization within the “Main” Content Box. I added mine to the left of the horizontal line.

  1. Let’s add a call-to-action button to the “About” section. Create a new layer called “Learn More”. Go back to our trusty Rectangle Select tool and use it to select a button-sized area – mine is 110x40px. Bucket fill the button with your chosen color. Shift+Ctrl+A to deselect. Add text to the button with the Text tool.

  1. I decided to add a “Recent Projects/Portfolio” section to mirror the “About” section. This section would be populated with thumbnail images and maybe brief descriptions of our fictional company’s latest work.
  2. We should add some icons to the “Services” section, but first we will have to find some nice, preferably free vector icons online. I used the Reflection Icon Set from WebDesignerDepot.com. I found these thanks to SpeckyBoy’s article, “30 Fresh and Free Icon Sets for Designers and Developers”. http://speckyboy.com/2010/08/09/30-fresh-and-free-icon-sets-for-designers-and-developers/http://www.webdesignerdepot.com/2010/07/200-exclusive-free-icons-reflection/, you will have to enter your email and agree to receive a weekly newsletter, but you can always opt out of the newsletter or just use a “junk” email that you never check anyway, like I do. Remember, it’s always a good idea to scan anything you find on the internet before you download/extract it. Once you have saved and extracted the file, just go to File>Open as Layers and select the icons that you want to use. Use the Scale tool to resize them as needed. You will, of course, want to use the guides to ensure that your icons are all nicely lined up. Mine are a little haphazard, but this is just a demonstration after all.

  1. As I’m populating this site layout with more and more content, it’s starting to look a little too busy to me. One thing that continues to amaze me about web design is just how fast a design can go from elegant to overdone. I think that I will simplify this design a bit by removing the box around the navigation bar. Simply click the open eye icon next to the layer in question and voila! – no more green border.

  1. Let’s have a little fun with the “Testimonials” section. I made a new layer and named it “Blurbs”, then drew a few rectangles and bucket-filled them with white. Feel free to use the ellipse tool instead for circles/ovals, or you can go crazy and use the Paths tool to create any shape you wish. When you’re finished drawing your shapes, be sure to Shift+Ctrl+A before the next step.
  2. Using the Paths tool, draw a small triangular shape coming off the bottom/side edge of your shape. Click and drag the last handle of the shape over the first to close the triangle. Click “Selection from Path” in the Stroke Path dialog, which will convert your path to a selection that you can now fill with color. Deselect and repeat for each of the other shapes.

  1. The footer is where we will place our social media icons, search box, contact information, and legal information. Again, do a Google search and you’ll come up with plenty of nice, free sets of social media icons. You can find the set that I used here: http://creativenerds.co.uk/freebies/clean-black-and-white-social-media-icon-set/.

Add some finishing touches and you should have a nice, clean layout that would make an excellent home page for a small business or freelancer. Remember to use clearly labelled layers and to save often!