HOMEWORK | Week 7 | Review

• Create a CHILD THEME for your theme and install it. Add child theme to the new name. Take a screen shot and upload it to your blog.
• Change at least FIVE attributes in the style.css on your child theme. Take screen shots before and after, showing the difference and upload to your blog.
• Finish loading ALL content to your client’s site.
• On week 8 give me the URL to your blog, your client’s URL where the WordPress site is located and your Delicious account.
• On your del.icio.us account tag three Web Sites that focus on WordPress and WordPress child themes or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 7, etc. in your comments section so that I can keep track of your comments. *Make sure you also add the tag: msuinteractivemedia AS WELL AS add additional tags.
• Be prepared to present your client’s site to the class for CRITIQUE on week 9. The FINAL and completed site will be due on week

Tips To Make You A Better Web Designer

Be Methodical

• Understand the Site’s Content, Processes and Purpose
• Prioritize and Look for User Paths
• Organize the Information

Think Out of the Box

Final WordPress Project Requirements

Documentation and Information Architecture

• Accurate sitemap
• Accurate wireframes for three (3) pages – hand drawn wireframes are NOT acceptable. Wireframes needed for home page and two (2) interior pages

• Wireframe layouts need to be intuitive to read and be close to the scale that it will appear in the web browser.
• Images should be represented as a box with an X.
• Use plain boxes to show the placement of “side bar” content areas.
• When using elements such as drop down menus or text field boxes, make sure they are recognizable and always treated the same within your wireframe layout.
• Screen shot of your Dropbox with folders and site structure.
• Screen shot of your Google calendar.
• Screen shot of original theme and then theme with CSS changes.
• Screen shot of your plugins.
• Screen shot of your widgets.

Admin Panel Requirements

• PRIVACY- In your Dashboard Settings, check that Privacy is set to visible.
• EMAIL- Check pages with email addresses, are they all working correctly?

• SEO – are all pages correctly titled with meta descriptions?
• BLOG – do you have categories and tags set up and are you using them?
• Change the Date and Time options. UTC time is not your time. Adjust your timezone offset and specify which day of the week the calendar should start on. Date and time adjustments can be located under “General Options”.

Navigation Requirements

•Homepage
•Artist statement/Bio
• Resume
• Portfolio image gallery
• Skills
• Contact page with working email form or link – social networking icons on contact page

Any additional pages your “client” requested.

• One section without subpages (like a homepage or contact page)
• One section with 2 to 3 subpages (like about and then a drop down menu that includes resume, skills)

• Custom menu created in WordPress 
• Logo links to the home page
• Links and link states are consistent and easy to identify

Content Requirements

• Check spelling on every page. Get someone else to read your website’s copy.
• Ensure that each page has clear purpose.
• Check for consistency in your copy, including capitalization, variation in words (e.g “Web Site” or “Website”), first or third person, singular or plural, etc. Ensure your tone of voice is consistent across all your pages and your audience is being addressed in the same way.
• Try to reduce the amount of text by keeping it on-point. Users don’t like to scroll.

Coding

• 3 Link types (link to external website, email, target=blank/opens in a new window)

All links to external websites should have the target=blank code.

• The resume page should be coded AND not an image or a pdf. There should also be a link at the bottom of the resume page to download a pdf of the resume.

No broken links.

Favicon

Don’t forget to add a Favicon. A Favicon is useful to brand your website in a subtle way. If you are using WordPress, you can learn how to add Favicon for your website here.

Functionality

Does everything work? Test everything thoroughly. Check all yourself and get your partner to test your website.

• Check all forms (e.g. contact us. blog comments, login, registration, email subscription, e-commerce cart).
• Check search functionality including relevance of results.
• Test how your website run on all screen resolution and ensure it still works fine.

Images

• GIF
• JPG
• PNG

No PSD’s. All images should be resized to fit correctly. 72dpi at the correct dimensions.

Images should have titles and alt titles.

No broken image links.

Plugins

At least five plugins installed. All plugins should be working and up to date. There should be NO disabled plugins on your plugin page.

Install a security plugin and remove and change ADMIN login name.

Activate Askimet or related SPAM plugin.

Protect your blog. Activate the bundled Askimet plugin using your Wordress API key. Don’t have one yet? Signup for a WordPress.com account and they will email you an API key.

Widgets

At least three sidebar widgets installed.

SEO

• Check your meta description and keyword tags for each page Ensure they are related to the page’s content.
• Make sure the each page has title tag that is descriptive and relate to that page’s content and includes your keywords.
• Include keywords in images alt text and file name.
• Set up a Google Webmaster Tools account and submit your site.

Execution

• Pleasing color palate with rollover links
• Use of lists 
• Use of headers (H1-H6)
• “Friendly” URL’s
• Effectively placed HTML text and CSS (your site should not be all images)
• There should be significant CSS changes to your WordPress theme – Change at least TEN attributes in the style.css on your child theme. List your changes in your Word doc.
• Make at least THREE changes in the CSS to anything that relates to positioning. List your changes in your Word doc.

Checklist 

1. Include a site title, add email address
2. Change your password
3. Change the tagline
4. Set a date and time format
5. Modify Reading and Writing settings
6. Edit Discussion settings
7. Modify Permalinks structure
8. Edit or delete the preinstall blogroll
9. Add some categories to the blog page postings
10. Install plugins
11. Check blog and test plugins
12. Create a favicon.ico

Page Layout

1. Appealing to target audience
2. Consistent site header/logo
3. Consistent navigation area
4. Informative page title that includes the company/organization/site name
5. Page footer area — copyright, last update, contact e-mail address
6. Good use of basic design principles: repetition, contrast, proximity, and alignment
7. Balance of text/graphics/white space on page
8. Good contrast between text and background
9. Home page has compelling, interesting information above the fold (before scrolling down) at 1024×768

Color and Graphics

1. Use of different colors in page backgrounds/text is limited to a maximum of three or four colors plus neutrals
2. Color is used consistently
3. Color has good contrast with associated text
4. Color is not used alone to convey meaning (accessibility)
5. Use of color and graphics enhances rather than distracts from the site
6. Each graphic used serves a clear purpose

Content Presentation

1. Common fonts such as Arial or Times New Roman are used OR no more than one web font used. Make sure your using WEB SAFE FONTS.
2. Techniques of writing for the Web are used: headings, bullet points, short sentences in short paragraphs, use of white space, etc.
3. Fonts, font sizes, and font colors are consistently used
4. Content provides meaningful, useful information
5. Content is organized in a consistent manner
6. Information is easy to find (minimal clicks)
7. Content is free of typographical and grammatical errors
8. Content provides links to other useful sites
9. If standard link colors are not used, hyperlinks use a consistent set of colors to indicate visited/non-visited status

Miscellaneous:

• The website page design must contain all of the information that is normally found on a web page.
• The selection of type styles, typefaces and box package size and format should be consistent with the home page.
• The pages must demonstrate unity by using common themes that demonstrates they are from the same website.

Project Submission and Printout:

• The three website wireframes frames must be uploaded to your blog,  and all files placed in a DropBox folder that you share with me. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester on a DVD.
• Word document, research, sketches, design iterations and final design in the following formats: .psd, .jpg and .doc should be uploaded to your blog and your DropBox folder and labeled as follows:  Last Name_First Name_Date_Project _WordPress.
• The wire frames will be turned in as a .jpg files or a .pdf files. The written description and research for the project in Microsoft Word will be turned in .doc format and the project sketches will be turned in .jpg format.

Items That Must Be Turned In On Week 11:

1. Create a folder in DropBox called WordPress Project_Last name_First name.
2. Inside that folder place your sitemap, wire frames, screen shots.
3. When logging in to week 11, leave me a link to the DropBox folder where you placed all your project info.
4. I also need a Word doc inside your DropBox folder that lists your client name, url, admin username and password.

Requirement Summary

1. A Microsoft Word document with the following information must be included with your final project submission. It must include a written description explaining the web development process, principles, and elements you used in designing your site. Include information on “client relations”, “client communications” and how the client/designer relationship could be improved for future web work.
2. The write-up should specifically define the what and why of each element designed and why you designed it that way.  The Word document will be graded both for content and grammar. It should be a minimum of 300 words and written in essay format.

WordPress Project: Written Description Should Include:
Write a description of the WordPress website design process and the thinking behind its design. The following items should be included in your project description: Remember to include your full name, date, WordPress Project and project title (the name and url of your client) in the document. The content of the WordPress Project Written Description must include the following:

1. Why did you select the theme you chose?
2. What research did you do to find themes with designs and functionalities that fits your clients needs?
3. What did you do to assure that the wireframes would be consistent with the home page?
4. What elements are your center of interest on your additional pages and why?
5. Describe the flow throughout the various parts of your web page designs.
6. What elements did you use to create unity between the home page and your additional pages you designed?
7. How successful do you think you were in meeting the design needs of a consistent and fluid website?
8. What problems did you encounter while creating your site and how did you solve them?
9. What would you do differently, if you could start over?

NOTE: If you need help with Punctuation and Grammar Rules, review the Owl website, sponsored by Purdue University: http://owl.english.purdue.edu/handouts/grammar/index.html.

Critiques

Do you Want a Critique or a Hug? How to gain valuable criticism on your design 

• How To Respond Effectively To Design Criticism
• How to Write a Critique

Critique Goals:

1. Obtain specific kinds of feedback.
2. Discuss the user flow through a design. (Similar to a cognitive walkthrough).Explore: Color, shape, function, font, style, concept, execution

Break up into groups of four students

The Fundamental Elements of Design from Erica Gorochow on Vimeo.

* WordPress project must be submitted with following items: Research & WordPress Themes, Wireframes, Word Document and Final WordPress Website Designed and live  You will be graded separately on each phase of your projects. You are required to submit all research, inspiration, sketches, preliminary comps, word document and final design as digital files on a DVD.  The DVD must have your name and the name of your “client”.

You must provide a working URL to the site you designed.

HOMEWORK | Week 9

• Write a written critique of one of your classmates WordPress site. The critique must be a minimum of 300 words and cover
• • Balance
  • Rhythm
  • Proportion
  • Dominance
  • Unity
  • Color
  • Layout
  • Navigation
  • Flow
  • Images
  • Font and headline and text choice
  • Widgets
  • Usability
  • Functionality
  • Overall design
  • *****Your review must be posted on your blog no later than Friday at noon to give the person your critiquing time to make adjustments to their site prior to next weeks class.
• Take into consideration the critique your classmate writes about the site YOU are building and make your final design and coding changes.
• You will be presenting your clients WordPress site to the entire class on Week 10.
• The FINAL and completed site will be due at the beginning of class on week 11. You must give me a dvd along with a print out of your Word document.