Web Design & SEO

The Monkey Project

The Monkey Project

Project Summary

The Monkey Project was a team project. The team was to create a 5 page website using WordPress. The purpose of the site is to benefit the nonprofit Monkey Project by selling sock monkeys and storybooks.  Women struggling to survive in Peru create the sock monkeys. The sales benefit The Monkey Project and her nonprofit partners. Each monkey is associated with a different partner and has a background storybook. The nonprofit partners benefit causes such as childhood development, adoption and human rights worldwide.

What I Did

As the project manager I created a progress report document, tracked the teams progress and lead weekly progress meetings. I assigned tasked and tracked completion using basecamp. I handled all communication between the team and our client. I contributed to the project production by creating a site map, concept board, wireframes, and mockups. I also created site documentation and a usage document for the client.

What I Learned

Through the project manager role I gained leadership skills such as accessing the abilities of team members, dividing and delegating tasks, tracking progress and motivating the team. I also learned to work with a client by keeping her updated on progress, interpreting technological details, and motivating her to supply required information. This was my first WordPress site and though I did not do any coding I did learn to manipulate the software in order to add content and images to the site.

IMD360 Week 3

Podcamp

Podcamp Nashville was an informational conference held April 14th at The Tequila Cowboy in the casual atmosphere of a downtown Nashville bar. The conference is an ideal opportunity for networking with the local technically savvy. Divided into 5 simultaneous presentations at a time from 8:00 AM to 4:30 PM, the conference held something for everyone somewhere at any given time throughout the day.

 

Topics

Many diverse topics were covered giving some information on far ranging topics from social networking with Google+ to establishing authority through writing and publishing a book. Other interesting topics included how to take advantage of Google ads, Analytics from a video game point of view, and how to utilize Pinterest for profit. The presentations were brief but the approachable presenters were easy to corner for more in depth discussion.

 

Networking

The low-key social atmosphere made networking easy. Between presentations and during lunch participants gathered around tables and shared their background, career needs and expertise with one another. Many people with whom to trade business cards and develop contacts were available.

 

My Experience

As a first time participant in Podcamp, I was delighted with the conference. I will certainly attend future events. I recommend Podcamp to anyone seeking to increase their knowledge or business networking.

 

IMD360 week 2

Project Summary

Design

The overall design of the Art View magazine website is spread out over 8 pages to group similar information and for ease of navigation. A simple 2-column layout is used for most pages with approximately 80% of the page for content and 20% for advertisements.

The main content will have a light background with dark text for ease of reading. The main titles are larger to denote their importance and sub titles are light text on a ribbon of dark color to help divide the content visually for easy scanning.

The sites main color scheme is monochromatic shades of violet with brighter colors used in the advertisements to draw the eye, as these are the calls to action. Main navigation runs across the top of the page under the logo and title.

The advertisements will run down the right side of the page while content runs down the left side of the page. I have chosen Trebuchet MS as the font for everything including the loge and title. This font is easy to read but has a few artistic embellishments.

Purpose

The purpose of the Art View magazine website from a business point of view is to provide artists and art lovers a place to acquire information about art, artist, artistic techniques and art shows. Simultaneously, providing advertising to the artist who create art, the stores who supply the artists, the schools who train the artists, and the venues who host shows.

Art View magazine is a for profit advertising website. This site does not sell any products itself, but advertises purveyors of various art related products.

The purpose of the magazine is to connect artists and art lovers in online community through critiques, show schedules, and advertising. The online magazine gains revenue through the advertising on the site. It is the site traffic coming from Art view magazine to its advertisers that generates income for the site.

Pages Breakdown

  • Home: 3 ads for museums. Thumbnail image with the start of the featured artist article, first critique article, and first workshop article with an internal link to each.
  • Featured Artist: 3 ads, one for featured artist and 2 for museums. Slider with images and about image text. Article about artist.
  • Critiques: 3 ads, one for each critiqued artist. Large image with full-featured artist article
  • Work Shop: 3 ads 2 for products and one for art school. 3 articles on techniques
  • Exhibits: 3 ads for galleries. Schedules for museum, gallery, and individual artist shows.
  • About Us: 3 ads for galleries. Large image of original magazine cover with short blurb about it.  Full-length article about Art View magazine.
  • Contact: 3 ads for galleries. Contact form for comments and contact form for getting listed on exhibit schedule.
  • Credits: Credit information.

What I Did

  • Researched online art magazine websites
  • Created a site map

Art View magazine site map

  • Created wireframes
  • Created concept board
Art View magazine Concept Board
  • Created mockups
  • Coded site with html, CSS, and php
  • Wrote all copy
  • Featured artist article
  • Nadean Bryan critique article
  • Eros Love critique article
  • Max Stone critique article
  • Working with water color article
  • Color beyond the color wheel article
  • Creating in black and white article
  • About AV magazine first issue description
  • About Av magazine artic
  • Created graphics
  • Logo
Art View magazine LOGO
  • I created 21 advertisements.
  • Art View magazine cover for mock first issue with picture of a little angel captured by faux photographer Oscar Tame.
first-mag-blog
  • Color wheel for the article Color Beyond the Color Wheel that appears in faux online Art View magazine.
  • Graphic for the article Creating in Black and White.
  • Created evaluation rubric for process book
  • Created process book

What I Learned

  • The elegance of design simplicity
  • Strategic use of white space
  • Importance of headers and sub headers for scanning
  • How to work with images of different dimensions
  • It’s easier to read dark letters on a light background
  • How to direct the user to advertising and content which is especially important on an ad based website that only makes money when ads are clicked.

 

 

 

IMD360 week 1

Most Important

Always put the most important information first. using the inverted pyramid method of information organization. Turn the pyramid upside down providing the big information first then work your way down to the point as you work your way down the page. In addition to starting big, work in these other factors; F shape, scanning, the fold, and word choice.

F Shape

The F shape refers to the way we read a web page. First, the eyes cross the page horizontally at the top of the page. Next the eye crosses the page horizontally in the middle. Lastly the eye runs down vertically on the left side of the page. The placement of images, logos, page title, headers (h1 tags), sub-headers (h2 tags), and subject/paragraph headers should fall in the F shape.

Scanning

Most readers scan the page without reading it. So, take advantage of this by using size and color to give scanners information quickly. Make your headers, sub-headers, subject/paragraph headers, and links stand out from the rest of the text by using a different color and/or larger font size than the body text. Write in short paragraphs, and bold italicize or underline keywords or important text.

The Fold

The fold is approximately 800 pixels from the top of the web page. Most readers spend 80% of the time above the fold. and 20% below the fold. So, put the important information above the fold. However, remember scrolling below the fold is easier than clicking to another page to finish reading a fraction of information. So don’t create a new page just to keep all your information above the fold. While readers do scroll down below the fold they are less likely to scroll horizontally. Avoid forcing the reader to scroll horizontally by keeping your page width at 960 pixels or less.

Word Choice

The words you choose for your headers, sub-headers, and subject/paragraph headers must give the scanner the information they need to know if they are going to slow down and read your body text. So, choose your word wisely. Make them short and informative. Use plain language, use specific terminology, follow naming conventions, and action oriented words. Avoid bland, generic words, made-up words, and leaving the information-carrying text to the end.

Get Results

I have created the graphic below using these factors the inverted pyramid, the F shape, scanning, the fold, and word choice. Follow these guidelines when writing for your web pages and get results.

how to write for a website graphic

Resources

v How Users Read on the Web by Jakob Nielsen

v F-Shaped Pattern For Reading Web Content by Jakob Nielsen

v Scrolling and Attention by Jakob Nielsen

v First 2 Words: A Signal for the Scanning Eye by Jakob Nielsen

v Horizontal Attention Leans Left by Jakob Nielsen

v Microcontent: How to Write Headlines, Page Titles, and Subject Lines  by  Jakob Nielsen

 

 

IMD360 week 1

Step 1 Name you files.

Image of file name as it appears on screen

 

Step 2 Save your files to the desktop.

image of files and folder as they appear on the desktop

 

Step 3 Open FTP (file transfer protocol) .

Step 4 Fill in site, user name, & password.

File Transfer Protocol box

Step 5 Drag and drop files from your desktop to your website. The arrows on the website point to the file names circled in red on the desktop.

image of files and folder as they appear on the desktop

 

Now your site is accessible from the web. All the pages with arrows can be accessed.

files and folder as they appear on site


Step 6 In order to access files in folders (such as IMD110 circled in red above) on your site you will have to place an a-link in your html that follows the appropriate file path. Once you click IMD110 to open you click flood to open that folder. Finally inside the flood folder you see the index.html file.

Indicates folder in folder on site

indicates file on site

shows a link file path

As you can see from the arrows above the is the file path of the a-link.

Step 7 Go on line to ensure you can access your website and that all your links are functioning.

In my SEO and internet marketing class we launched a website iMarketingClass.com.  The site content is a collection of articles we wrote about various SEO and internet market topics. As a class we put what we’ve learned into practice by promoting our site. Hoping our newly gleaned expertise would pay off, we set out to drive traffic to our site. I have learned the intricacies of keyword research and comprehending analytics. My experiences with the difficulty of link building have been eye-opening. It is one thing to discuss SEO marketing methods in class and quite another to put those methods into practice in the real world.

My article “How to Pitch SEO to get the Check” focused on the communication gap between SEO geeks and business managers. The SEO communication gap prevents internet marketers from being adequately valued for their services and denies businesses the financial rewards of SEO services. Providing quality content is beneficial to bringing traffic to your site. Translating geek speak into business speak is beneficial for SEO and internet marketers who depend on people who don’t understand their value to sign the checks for their services.

We had a guest speaker in my SEO class. Peter McDermott spoke about Google+.  With so many social media sites online, I was wondering why do we need another social sharing network site. This is the first thing Peter addressed in his presentation. He went on to explain how this site works for social and business sharing and the future of business through social sharing. While the benefits of advertising through traditional media like television and newspapers is declining, advertising through social media outlets is growing. The benefit to the customer is a more personalized experience. The benefit to advertisers is increased ability to reach the target demographic and an emphasized link to targets with an interest in their product. As well as reducing the cost of advertising. Rather than spending resources to reach a generic population, social sharing directs advertising dollars to superior leads who already have an interest in the product and a recommendation for the company from a trusted source.