Freelance Nance logo

Toolkit


Image Resources

When using images found online it is important to know the copyright laws and the proper way to give credit to the artist if necessary. Another thing to consider is if the download is safe and from a credible source.

green apple

Dreamstime Photos

Dreamstime offers a free section, fully searchable and constantly updated. Its use may be available to all registered users or to a specific niche of members, depending on the agency`s strategy. The Media downloaded from the free section may be used under the terms mentioned for the regular Royalty Free license, with a single additional restriction: the maximum amount of physical copies in any form is limited to 10,000 copies. If you exceed this amount and you already purchased credits you may request to download the Media under the regular RF license.

Dreamstime.com

Purple field of flowers

iStock

iStock is an online, royalty free, international microstock photography provider operating with the micropayment business model. iStock offers millions of photos, illustrations, clip art, videos and audio tracks.

iStock.com

Tiny tree

Adobe Stock

Standard license With the Standard License, images can be used for any illustrative purpose in any type of media. Examples: websites, web banners, newsletters, PDF documents, blogs, emails, slide shows, TV and video presentations, cell phones, splash screens, movies, magazine articles, books, advertising, brochures, document illustrations, booklets, billboards, business cards, packaging, etc.

stock.adobe.com

Trendy Fonts

Two examples of popular font styles.

Slab font example
theuselessweb.com

Typeface used: Josefin Slab


This typeface is effective and very readable. The small shadow used creates a sense of depth. The sharp apex at the top gives it a sense of authority you expect from a slab serif font.




Slab font example
whimsycookieco.com

Typeface used: Undetermined due to use of image text. I attempted to determine the typeface using WhatTheFont, however because the font style is touching it is harder to identify.


This typeface is perfect for this company. I love the playful element it brings to the site. This font used sparingly and paired with the clean sans serif font for the majority of the copy gives the site a clean look.

Persona

A persona is a fictional, yet realistic, description of a typical or target user of a product or a service. A persona is an archetype, or a typical example of a certain person instead of an actual living human, but personas should be described as if they were real people. Personas help designers and business owners better understand their target audience and how to design websites and apps with their convenience in mind.

Tiffany Baker

Driven. Decisive. Motivated. Precise.

woman in glasses

Age: 31

Job Title: Party Planner

Tiffany is a party planner and entertainment Guru in the Charlottesville, VA area. She works from an event planning office in the center of town where she receives clients and collaborates with coworkers on larger events. Tiffany is very organized and uses her computer to maintain her schedule and organization. Her daily routine includes an early morning run before a group yoga class a block from her house before heading in to work. After work Tiffany usually meets friends and then takes her dog for an evening walk.


While interacting with clients her confidence and attention to detail shine through as good qualities. Tiffany has an advanced level of internet savvy and accesses the web daily for 5-7 hours using her Macbook Pro laptop and the Google Chrome browser. When she is not visiting the Gerharts’ site she is often checking Pintrest for party ideas or updating her own blog which she hosts on Wordpress.com and of course she uses Google to search. When showing clients suggestions and products she likes to use her laptop which accesses the full site, however when on the go Tiffany often pulls up sites and directions and restaurant menus on her mobile phone.


Being able to quickly pull up the site to see what is sold out and what specialty chocolates are available help guide clients to easily make selections. Because of the nature of event planning using the site to order well in advance if possible to ensure enough time to prepare and complete the order is key. Punctuality, consistency, and accuracy are major factors in Tiffany choosing to use Gearharts’ time and time again.

Grids

Column grids are made up of multiple columns which help break up different areas and information on the site. My example below is from Amazon.com and has six columns that separate content in the second level navigation and related articles on the right. The clear separation and the abundance of white space help the eye travel around the page easily.

Column Grid

labeled example below.

Amazon website with grid elements labeled

Pattern Library

Here you can find the different elements that make up my site in an easy and accessible location.

Page Title

h1 class ="yourarehere" { font-family: "parisine-plus-std-gris",sans-serif; font-weight: 700; color: #daeee4 ; font-size: 200%}

Article Heading

h2{ float:left; color:#c2bedc; font-family: "parisine-plus-std-gris"; font-weight:700; width:100%; text-align: left}

Sub Heading

h1 { font-family: "parisine-plus-std-gris",sans-serif; font-weight: 700; color: #daeee4 ; font-size: 200% }
email icon

Responsive Web Design

Responsive design for web is a website design that not only changes in scale to fit a smaller screen sizes, on devices such as tablets and cell phones, but also changes content and functionality to suite mobile devices. Here are four major things to keep in mind while designing a responsive site.

    Images

  • On full sites images can be helpful and help keep a user’s attention and compliment an article or blurb of text. On responsive sites images that are not absolutely necessary should be excluded to reserve the limited space for important information and to conserve data usage.

    • Forms

  • Websites often have forms and information fields to be entered by users such as date of birth and email address. Providing users with simple options to make entering this information easier such as visual calendars rather than the typical date option of MM/DD/YYYY. Use top aligned labeling for form fields as well to increase how quickly users can read and fill out forms.

    • Touch Screen

  • Users on mobile devices are using their fingers to click links and enter information. Click targets should be a minimum of 30-40 pixels in size with whitespace separating them to increase click ability. Without a mouse there is no way for the user to hover allowing affordances or drop down windows to appear to guide the user, this must be considered when constructing navigation.

    • Navigation

  • Most people using mobile devices are on the move and want to access information quickly and easily. Navigation should be easy to find and use as is the case with any site, however in mobile site design you want to avoid multi level navigation to limit how many clicks it takes a user to access information. The most commonly used and easily recognized solution to this the accordion, or hamburger menu which is often used at the top of the page to contain the sites navigation.

Bootstrap Sites

You Karma Site

This is an example of a site that has used the Twitter Bootstrap pretty much as is without personalizing it very much.


SF Arts

This site has the same look as far as buttons are concerned but has a different layout and is quite complex. There is a lot of content and it is nice to see that bootstrap can support a site like this.

SEO Bulletpoints

    One

  • Current content is considered when search engines display results, the more recent your page has been substantially updated the more likely your mage will be at the top.

    • Two

  • Alt tags on images not only help disabled users but search engines too. Search engines do not “read images” but rather the text entered as the alternative to the image.

    • Three

  • Social media such as Instagram, Twitter and Pintrest can be used to reinforce keywords as well as sending users to your website. Try to use the 80/20: 80% fun content and 20% call to interact or make a purchase.

    • Four

  • Metadata for SEO includes title tags, page descriptions, and other descriptive content. Be sure to fill in all relevant fields with applicable descriptions. This will keep you from missing a good opportunity to reinforce a keyword and improve SEO. While some search engines do not look at meta data that is not the case for all of them so it is worth the time to do.

    • Five

  • External Reputable links are also used to increase a sites optimization. This could be done buy paying for an advertisement on a site the directs the user to your page or by linking your social media pages to your page.

    • Six

  • Fix 404 errors and make sure links work properly.

    • Seven

  • URL Structure should be readable and have a "you are here indicator" for the user to decipher. I there are not too many pages they should be labled so users understand where they are.

    • Eight

  • Format heading in your text using HTML tags H1,H2,H3 etc. to help Google process and understand the intent of your content

    • Nine

  • Optimize for mobile devices so that when a user accesses your site from a device it is displayed properly. If your site is not responsive to mobile devices Google will not display your site prominently in the mobile searches which is how more and more people are using the internet.

    • Ten

  • Reference important sources when applicable to the content being added to your site. Siting sources is recognized by Google and users as credibility and trustworthiness.