Development Process
FundSnapper is a Affiliate Marketer for over 2000 advertisers and this website is the marketing site primarily targeting leaders of schools, clubs, athletic teams & youth groups who would be interested in using FundSnapper as a stream of income for their organization. The secondary target audience is the parts of childrens involved in these groups. In addition to the marketing website FundSnapper will implement a shopping portal where parents will use special hyperlinks to visit advertiser websites to make online purchases. Using the special links on the shopping portal will result in a percent of the purchase being sent to the organization once FundSnapper is paid by the advertiser. The development process is detailed below:
- Research: To gain an understanding of the Target Audience we researched other Affiliate Marketing Sites as well as other Fundraising Websites. We presented a list of websites to the FundSnapper stakeholders to gather information about what they liked and didn't like on the websites.
- Style Tile and WireFrame: Once we established what the organization was looking for and what appeared to be best practices of other fundraising websites, we crafted and Style Tile (presentation of colors and fonts) and Wireframe (a simple diagram of the sections of the home page and interal pages)
- Content Site Map: Developed a site map of the pages within the site.
- Assets: Gathered assets from the client incuding the logo, images and content
- Domain Management: Purchased Domain Name and Hosting space for client.
- Built Structure: Built the back end structure using directories and blank html.
- Coded the website using CSS and HTML files for the Home Page and created a template for the internal pages which was based on the style of the home page. There are two internal page templates - one with a column for full width of the content area and one with two columns.
- Built content for the home page and internal pages
Final Product Defense
During research portion of the project, it was found that other Fundraising sites were very modern and clean with a colorful palette and used san serif type fonts for most of the headers and paragraph text. Most fundraising websites have two target audiences -- the organization that will be raising funds and the members of the organization -- and the navigation is clearly design for each group to find the content related to them quickly.FundSnapper.com has very clean design including a solid background color for the entire site and a main content area in white that is 1060 pixels wide and centered on the page. The top navigation of the site includes two cta buttons, a logo and a horizontal main navigation. This top navigation is consistently repeated on all other pages on the site. The home page has a hero image and internal pages have a page title.
The color palette is a triad color combination starting with a "Snapper" orange-red color and the two secondary triad colors which is a shade of blue and green. Although the red color is the primary when looking at the color wheel, we used the blue primary color as that represents dependibility and confidence. The red is used as an secondary color and green as the accent color.
The two font families used on the site are Open Sans and KoHo Sans Serif. Both of these are Google Fonts and have been imported into the site. Open Sans is a font that is used on many modern websites because is it very easy to read. The KoHo font has a slight slant to some of the characters and gives it a more relaxed feel without getting too casual. The KoHo font has so far only been downloaded under 500 times so it is a font that is not widely used yet. Both fonts have many styles and weights available and have a very fast load time.
Below is view of all 6 header styles: