Thurs, 4/17 - Main Points to Glean from Design 5405 - Web Communications

Final Project Presentations Continued

Here are the final clickable color prototypes:

614 After Hours

Fisher Collect

Flip Side

Food For Thought

osUdate

Oval Portal

Wut the Fork

Main Points to Glean from Design 5405: Web Communications

Creating the web is a Collaborative process. Creating the web in teams of specialized individuals who each have specific technical or content knowledge is vital to the success of a web site. Creating a professional web site or software on a broader scale requires a project manager or director, art director, front-end UI/UX designers, graphic designers, programmers, admins who specialize in security and servers or systems analysis, copywriters, etc. Even motion designers and choreographers are hired on projects as the animations/motion of elements becomes important with the advent of touch screens.

User-centered design is the design process vital in creating the web. Idea generation, information architecture, research, competitor analysis, creating personas, wireframing, usability testing, and prototyping is vital to creating a finished product.

Here are some diagrams which illuminate the user centered design process in their specific workflow/projects:

The web is constantly evolving. It is important to keep up on current web practices as new practices are made standard, as technology progresses as far as computing power, availability of web access and web devices, graphics and the technology used to create graphics are improving, and as new web languages are born. Thus it is a different type of animal - it requires keen sense of design, technical skills (coding), logic, insight/research/analysis into what prior examples and web practices already exist, creativity, and an eye for business.

The ultimate judge of your web designs and work should not be for a grade in a class, but your portfolio, which is what employers will be looking at. I encourage you to keep tweaking and progressing your designs, as well as learning some coding! You may even enlist or hire outside help such as programmers to help create the back-end of your product and realize it! Creative skills and technical skills are valuable assets in the workplace, even if you're not becoming a web designer. It's good to showcase these skills you have learned - put it on the web! Connect it to your LinkedIn, portfolio site, or professional site (or create a portfolio/professional site). You could host it for free on U.osu.edu. I guarantee this skill will be useful.

Anyone with a good idea can create a successful web business. You don't have to be a world-class designer or programmer to start a successful web business (although it helps). You just have to have good ideas you believe in and that others believe in and want to invest time and money into. Some of the best CEOs of startup companies majored in psychology. Why? Because they had keen insight into the mind of THE USER!!!!!! They could predict & address what the user's wants and needs were more successfully. For instance, Mark Zuckerberg was studying psychology and computer science at Harvard before he dropped out to start Facebook. You all created mini-startup companies over the course of a semester - people would pay good money to have those realized into a final working product!

Consider participating in Hackathons or project crowdfunding tools like Kickstarter!

I encourage you to keep flexing web design skills and creative skills. Keep progressing, learning, and creating in some way, even if you don't continue through life as a professional web designer! Humans by nature like to create and it keeps your mind sharp and your spirits up. Whichever medium you choose to create with, never stop creating and learning!

Thanks for having me! I really enjoyed teaching this course!

Tues, 4/15

Final Project Presentations

Presentation order is reverse of last time (all groups should be prepared Tuesday just in case):

• Rhayssa, Anna, Gina
• Anthony M, Katie, Nicole
• Anthony Z, Christine
• Caitlin, Erica, Ryka
• Lee, Leandra
• Mohammed, Morgan, Mallorie
• Payton, Michelle, Yunqi

Rubric for the presentations are the same as last time, but will be 3 points for each category:

• Organization/Preparedness
• Content
• Demonstration of Material / Critical Analysis
• Clarity, Legibility, Conciseness of Information
• Participation

Remember, your presentation is on the last half of the class. You can summarize some of the info from the first part of the class that you covered in your mid-semester presentation to introduce this final presentation, but focus on the Wireframes, Usability Testing, and Color Prototype.

The presentations last time were great - But some things to consider - condensing of information on each slide, and legibility of graphics and text would improve your presentations. Make the text as big as you can, and reduce the words on each slide!

You may consider taking screenshots of your wireframes and prototypes and put them into your presentation, so you are not clicking through navigation when you talk about each page.

Presentations should only have simple, short points to drive the message home, lots of visuals, and you should be explaining the rest. You may use whatever tool you like to present with; Powerpoint, PDF, Prezi, even straight from the blog if you format it, etc. Keep it to 15 minutes.

Grades for presentations will be updated this week, as you finish them.

All grades for final presentations and individual participation will be updated next week

We will not need to utilize finals week - You will be free after Thursday!

Web Trends - The State of Websites in 2014

Check this link out - it has some interesting data visualization and talks about growing trends in web practices (these features differentiate "old" web design from new web design). The internet is moving away from less-usable browsers like IE and more towards Chrome, using Flash less, increasing sizes and number of images, using custom web fonts, implementing fancy scripts and responsiveness, and ditching the GIF for the PNG:

Brand & Capture | The State of Websites in 2014: Stats & Facts You Need to Know

Thurs, 4/10

Clickable Prototype Due, Usability Testing & Analysis Due

We will begin class by conducting another usability test of your final, clickable prototype (considering your outside-of-class usability tests were probably with your wireframed version).

Use your updated script - you should have updated it twice already (and adjust if needed).

Tack the results on the end of your blog post for your outside-of-class usability tests with an if___then____ because____ statement paragraph and analysis.

In the remaining time, we will conduct mini-critiques. Each group will show their final prototype, click through the design, and walk us through the design process and choices they have made since the black & white prototype versions. Each group will have 5 minutes each to present it and receive comments/suggestions for improvement.

Any remaining time will be used for presentation preparation, but most of you will likely have to meet outside of class this weekend for that.

Presentation order is reverse of last time (all groups should be prepared Tuesday just in case):

• Rhayssa, Anna, Gina
• Anthony M, Katie, Nicole
• Anthony Z, Christine
• Caitlin, Erica, Ryka
• Lee, Leandra
• Mohammed, Morgan, Mallorie
• Payton, Michelle, Yunqi

Tues, 4/8

Last Work Day - Clickable Color Prototype Work Time & Preparing for Final Presentations

Thurs, 4/3

Clickable Color Prototype Work Time

Tues, 4/1

Work Day - Guidelines for Visually-realized, Color Clickable Prototype

Must be clickable (navigation exists between all pages of site), built off of your wireframe

Must include final graphics - your logo in the header, your branding, slogan etc.

Must include final copy - no more lorem ipsum

Must have added CSS style and significant improvement in the CSS from wireframe version.

Color. Look to the Visual Hierarchy you have already established to decide on color schemes, or you may choose to use a tool such as the Color Scheme Designer

Text styles added since wireframe version - body, h1, h2, h3 header styles. Implement a web font, add color, change sizes, letter-spacing, etc.

Again, complex functionality can be "simulated" with graphics, simple functionality (such as dropdowns/secondary navigation, bookmark functionality, responsiveness (I see some designs that tackled this), forms that exist on the page but don't necessarily integrate all functionality yet, etc. can be added with HTML/CSS if you have time. I don't expect this but I know that some of you enjoy coding... as long as it doesn't detract you from the aforementioned goals you should be accomplishing.

Remember to be conducting your 3-5 Usability Tests, due April 10, the same day as your Wireframes/Final Prototypes. The Usability Test guidelines were explained last class time.

Remember that on the 10th, the 3-5 Usability Tests and analysis for each are due on the blog, and the final versions of the Wireframes and Prototypes are due in SEPARATE zip files (if you haven't already uploaded the wireframes), and can be uploaded by one member of your group.

You will then have one weekend to prepare for final presentations. Final Presentations on the last half of your projects will be conducted the last week of class - we will do reverse order of last time.

The presentations last time were great - But some things to consider - condensing of information on each slide, and legibility of graphics and text would improve your presentations. Make the text as big as you can, and reduce the words on each slide! Presentations should only have simple, short points to drive the message home, lots of visuals, and you should be explaining the rest. You may use whatever tool you like to present with; Powerpoint, PDF, Prezi, even straight from the blog if you format it, etc. Keep it to 15 minutes.