Web Design and Usability AVT 415

Class 28: Project 3 Crits/Final Day of Class

Mon, 02 May 2016 00:00:00 +0000

Project 3

Critiques for Project 3

Due on Friday May 6th at 6pm
Submit your final link to the Slack Channel #projects

Class 27: Final Workshop

Wed, 27 Apr 2016 00:00:00 +0000

Workshop

Last day of in class workshops

Keeping Your Database Synced

Exporting, importing and keeping your database synced from local > staging > production is one of the trickiest parts of Wordpress development. Here are a few resources to help you.

WP Sync DB
Syncing via plugin is one of the most user friendly ways to complete this process.

Export and Import Manuall via PHPMyAdmin
Can be tedious, but useful in a pinch

Backing Up Your Site

Plugins
BackupWordpress

Other useful plugins

Yoast SEO
W3 Total Cache
Contact Form 7
Jetpack

Set Up Google Analytics
The basic code setup should have come with the Initilizer document, just need to place your tracking code.

Facebook Open Graph for Websites
Facebook Open Graph Debugger

One on One Meetings to go over progress/coding help: http://doodle.com/poll/nzvymfrz7hqyxfm6

Class 26: Workshop and Snippets

Mon, 25 Apr 2016 00:00:00 +0000

Workshop

Only one week until you projects are due. I hope everyone is ready to put in one final big final week of work to finalize your sites.

Snippets

Masonry
Bootstrap + Masonry : http://codepen.io/thehonestape/pen/yOxVYq
Bootstrap + Masonry (no-margins): http://codepen.io/thehonestape/pen/GZXNdv

Forked from David Desandro’s Codepen and modified to appear as thumbnails.

Must have Masonry installed.

Look at their documentation for information.

Hide Navbar, Show When Scroll Up
Headroom : Auto hide navbar until you scroll up
Bootstrap Auto-Hiding Navbar

Page Transitions
http://smoothstate.com/
_{^{some known issues with wordpress plugins}}

Creating Pagination on Static Websites
Next and Previous Pages for Static Sites

One on One Meetings to go over progress/coding help: http://doodle.com/poll/abcsdn8ptn9e8hm4

Class 25: Cross Browser Testing & Project 3 Workshop

Wed, 20 Apr 2016 00:00:00 +0000

Cross Browser Testing

Not all browsers are created equally, therefore you must be cognizant of what works on different browsers

Tools
Can I Use

Free Testing
Browser Shots
Browser Sandbox
View Like Us

Paid Testing
Browser Stack

Native Tools
All your browsers
X Code

Cool Dev Tools to Help You Develop
LiveReload for Atom
Emmet
Emmet for Atom
Atom Autoprefixer
Atom Beautify

One on One Meetings to go over progress/coding help: http://doodle.com/poll/mkmstfz75hhqw4nt

Class 24: Project 3 Workshop

Mon, 18 Apr 2016 00:00:00 +0000

Studio

All of you should be in the development phase of your project. We will be working in class, answering questions.

One on One Meetings to go over progress/coding help: http://doodle.com/poll/axmu2686e96kinhu

Class 23: Showing your work - Portfolio Workshop

Wed, 13 Apr 2016 00:00:00 +0000

Showing your work

Awesome. You are making a portfolio website. You have your wireframes and style tiles ready. Let’s take a quick step back and think about how to display our work.

Photographing your print work
Shoot print work for your portfolio
How to Photograph Your Portfolio Work in 6 Simple Steps

Mockups
Graphic Burger
Pixeden

Showcasing web design work

Be sure to include your web design process, not just the final solution. This can include pictures of thumbnails, sketches, wireframes, etc.

In context
Device Mockup
Device Mockup
Startup Stock

Abstract/Flat
Flat Apple Devices MockUp

One on One Meetings to go over progress/coding help/life advice.

Class 22: Portfolios: Patterns in Code

Mon, 11 Apr 2016 00:00:00 +0000

Helpful examples and bits

The internet is full of awesome and awful examples, bits of codes and tutorials. I want to provide you with some of the better ones in case you need inspiration/help implementing something you want to do:

Simple Thumbnail Gallery
Cool thumbnails

Sites
Cody House
Codrops
Little Snippets
Patterns on Codepen

Go back and look at the Patterns lecture for any additional information

One on One Meetings to go over your wireframes and style tiles. Will pass around doodl on slack

Class 21: Portfolios: Inspiration, Aspiration, and Limitations

Wed, 06 Apr 2016 00:00:00 +0000

Porfolio Inspration

Let’s begin by breaking up and examing the most common portoflio website patterns.

Story > Writing > Design Work > Call to Action (CTA)
Most of the emphasis is on the designer’s story and their thoughts/writings, followed up finally by their design work examples.

Tobias van Schneider
Still very visual but the order puts the designer’s story and writings first.
Joel Califa
Has no images of actual design work on the homepage. Puts the designer’s story and experience first then mentions actual design work in link form towards the bottom.
Jessica Hische
Sean Goodwin
A Mason student who interned for us at Workhorse. Sean is most interested in UX and product design, so his portfolio is heavy on story and process.
Klare Frank

Design work > Biography > CTA
Probably the most common portfolio…a large grid of images of work.

Biography/CV (here as a classification…you will have to show work on your assignment)

Aspirations

After looking at these and other examples. Think about your work and the work that you want to do. Take your research and begin to sketch out the vision for your portfolio.

Limitations

Focus on concepts, reading order, user-flow instead of features or specific interactions. This is a good opportunity to self edit: remove projects from your portfolio, simplify interactions, edit out features.

Due on Class 22, Monday, April 11

Completed wireframes and style tiles for your site

In PDF format: Page 1: Cover page Page 2: Final wireframes Page 3-5: Style tiles

Submit your assignment here: Submit Assignment Link

Assignment 5: Portfolio Wireframe and Style Tiles

Wed, 06 Apr 2016 00:00:00 +0000

Assignment 5: Due Monday April 11

Completed wireframes and style tiles for your portfolio site

In PDF format: Page 1: Cover page Page 2: Final wireframes Page 3-5: Style tiles

Submit your assignment here: Submit Assignment Link

Project 3: Portfolio

Mon, 04 Apr 2016 00:00:00 +0000

Project 3 Assigned

Project 3 Is Here.

Web Design and Usability AVT 415

Class 28: Project 3 Crits/Final Day of Class

Project 3

Class 27: Final Workshop

Workshop

Keeping Your Database Synced

Backing Up Your Site

Other useful plugins

Your Sites Social and Analtyics Settings

Class 26: Workshop and Snippets

Workshop

Snippets

Class 25: Cross Browser Testing & Project 3 Workshop

Cross Browser Testing

Class 24: Project 3 Workshop

Studio

Class 23: Showing your work - Portfolio Workshop

Showing your work

Class 22: Portfolios: Patterns in Code

Helpful examples and bits

Class 21: Portfolios: Inspiration, Aspiration, and Limitations

Porfolio Inspration

Aspirations

Limitations

Due on Class 22, Monday, April 11

Assignment 5: Portfolio Wireframe and Style Tiles

Assignment 5: Due Monday April 11

Project 3: Portfolio

Project 3 Assigned