Web Design SEO and Information Architecture

Leanne Sauers Bio

Leanne Sauers

 

I grew up in Indiana and recently relocated to Nashville Tennessee. I was creative and artistic from early childhood. I have recently embraced the world of technology because I believe it is the future.

I earned a bachelors degree from Purdue University in financial planning but found I was unsatisfied with that career. I have chosen to reeducate myself in another career. I am seeking a bachelor’s degree in web design and interactive media from the Art Institute of Tennessee Nashville.

I am looking to combine greater creativity and continual learning with a growing field of practice. In the dynamic field of web design and SEO I have found a field that can perpetually spark my interest. Every project has been unique and exciting.

At the Art Institute I have mastered the art of learning new software, expanded my creativity by developing my design skills and gained a strong foundation in web design and SEO.

When I am not working I enjoy creating art, listening to music, spending time with my daughter, socializing with friends and continual learning. I like to solve puzzles and play word games. I love earth science and visiting natural wonders, traveling to beautiful Bahamian beaches, rocking out to good tunes and Karaoke.

In the future I hope to gain wisdom, develop skills and share my experience with children and people new to technology. I intend to launch 2 websites while putting my daughter through college. One site will be dedicated to selling my web design and SEO services and the other to selling my art.

I believe technology is the future while my heart remains in family and artistic expression.

 

IMD360 Bio

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

Mechanical Sculpture by U-Ram Choe

U-Ram Choe is a Korean artist who creates amazing, mechanical sculptures that look like futuristic biological organisms. He mixes science, technology and art to create sleek shiny moving sculpture. Inspired by science fiction and anime culture, he seems to mechanize natural forms such as flowers, insects, birds, and sea life.

These intricate sculptures amaze and delight the viewer as they undulate spin and whirl. They seem to be living breathing metal creatures. The viewer can get lost in the details of tiny interactive pieces or in the scientific like observation of the unique organism.

U-Ram Choe runs his own lab, United Research of Anima-Machines (URAM, after his own name). His deep understanding of robotics creates the foundation of his sculptures’ construction. With his artistic whimsy he designs his machine-creatures, equipping them with wings, fins, and propellers.

Viewing this intriguingly brilliant combination of hard metal, biological form, and movement is an opportunity for a pleasing artistic experience for art appreciators of any age. I recommend you see the work of U-Ram Choe in person if you have a chance. At least look on YouTube to see some of his wonderful work.

http://www.youtube.com/watch?v=0DIzM5Vzr5c

http://www.youtube.com/watch?v=09jPuMydVkw

http://www.youtube.com/watch?v=aFUmIV_9QGk

http://www.ebaumsworld.com/video/watch/82275205/

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.

It is important for people to socialize and people will socialize any way they can, including using technology. This is what the author means  when he says people are social animals.

Some characteristics of user behavior as it pertains to web design are as follows. People follow rules and guide lines when they interact socially online. These rules and guide lines mirror those of face to face social interaction.  Many decisions are made unconsciously. This means you must communicate not only with the logical brain but also the emotional and primal brain. People look to others when uncertain what to decide. This means reviews and testimonials from other credible users can persuade new users to engage in your site.

An example of looking vs. seeing is, the eye takes in more information than registers in the brain’s awareness.  If they look at something , it doesn’t mean they’ve paid attention to it and they don’t see every element on a page.

Summary

People are social animals. People make most decisions unconsciously. People need external validation.  People trust or distrust in a split second. People want a feeling of accomplishment. People can be easily distracted. People will choose what will suffice over what is the best option. People are more comfortable the more their experience mirrors their mental model. People don’t always get it right the first time. And finally people can look without seeing.

Opinion

This article uses simple analogies to communicate some of the complicated psychology behind user behavior. Keeping the above summary in mind when designing web sites, will allow me to benefit from this knowledge. The benefit will come in a more meaningful experience of the sites I design for the end user.

Follow

Get every new post delivered to your Inbox.