ART 229

Interface Design I @ KCC

Learn more   SCHEDULE

INTERFACE DESIGN I

Interface Design I provides a foundation of interface design skills, techniques, and principles for designing visually effective, user-friendly web sites.

Interface Design I provides a foundation of interface design skills, techniques, and principles for designing visually effective, user-friendly web sites. Through lessons, demonstrations, and hands-on projects, this course explores how the fundamental elements and principles of graphic design are applied through the design process of interactive interfaces. Students go through the analysis, information architecture, conceptual planning, and visual layout designing stages of the web design process and document their findings through client documentation and presentations.

 

VIEW SYLLABUS


MEET THE INSTRUCTOR AS GROUP:
    Wed, Jan 11      8am–10:30am    Kopiko 202A   Facilitator : TBD

CONTENT & GRADING

REQUIREMENTS:         HOMEWORK        PROJECT 1         PROJECT 2 

POINTS POSSIBLE:         300 PTS TOTAL

 

 

HOMEWORK

Weekly Homework Assignments/Process

Points Possible: 100pts

See 
Homework Laulima Assignments
See 
Homework Laulima Gradebook


PROJECT 1

Website 1: Standard Web Design


Points Possible: 100pts


See 
Assignment Sheet
See 
Assignment Example
See 
Project 1 Grade Sheet

PROJECT 2

Website 2: E-Commerce Web Design


Points Possible: 100pts

See Assignment Sheet
See 
Assignment Example
See 
Project 2 Grade Sheet

THE CALENDAR

This is a calendar of Deadlines, Skype Feedback Sessions and Critique Dates. Please add this calendar to your google account and set reminders as necessary to keep yourself aprised of any deadlines for this course. See Adding Calendar & Setting Notification Instructions, if necessary.

Assignments are due Wednesdays by 8AM on Due Date via Laulima Assignments & via Your Personal Course Website.

 

SCHEDULE

LECTURES + HOMEWORK + PROJECTS

The schedule is a weekly account of resource materials, lectures, and homework assignments for a given week.



Lectures

are updated on the start-date of each new week (Wednesdays by 8am). If something appears unlinked or not working, please contact me and bring it to my attention :)



Assignments

are due by 8AM on Due Date (Wednesdays) via Laulima Assignments and via Your Personal Course Website. See "Turning In Your Work" section for more details.



Late Assignments

will only be accepted until the following Thursday by NOON and will be docked 1 point, unless otherwise approved by instructor. Feedback will only be given on late work, when time permits.



Feedback and Critiques

may be either Written in Laulima Assignment or Discussions, via Skype Sessions, or In-Person, as noted on schedule. See "Work Turn-In & Feedback" section for more details.


PROJECT 1: BASIC WEBSITE DESIGN

Week 1.    Jan 11 – Jan 18.    Client Selection • Creative Brief • User Profiles

**MEET THE INSTRUCTOR : Wed, January 11th, 8am–10:30am in Kopiko 202A



DUE: WED, 1/18 by 8AM

See Wk 1 Laulima Assignment for Turn-In Details.
Skype Feedback Wednesday or Thursday during your slotted time

Need additional help book me during Office Hours: bookme



PROJECT 1:
Assignment Sheet | Grade Sheet | Student Sample

HOMEWORK:
This week's assignment is to choose a client and write and design the content for the Client Selection Cover Page, the Creative Brief, and the 3 User Profiles, within a single InDesign Document (with multiple pages) that you create as part of your Client Documentation. The size and orientation is up to you.




















Client Selection.
For this first project of the semester, you will need to surf the web in search for a currently existing website that you will name as your client. This does not mean you will contact them, it just means that you will redesign their Website.
Client Selection Lecture with Examples

Creative Brief.
The intricate collaborative partnership between designer and client must begin with an articulated set of objectives and goals. A creative brief is a document created through initial meetings, interviews, readings and discussions between a client and designer before any work begins. Throughout the project, the creative brief continues to inform and guide the work.
  Creative Brief Lecture with Examples

User Profiles.

Your users will drive the structure and design of the site; it is important to get to know them. The User Profiles document will allow you to understand the needs of your users and to create scenarios for them.
User Profiles Lectures with Examples


Required Reading: Chapters 1-3



Week 2.    Jan 18 – Jan 25.    Functional Specifications • Site Map


DUE: WED, 1/25 by 8AM


See Wk 2 Laulima Assignment for Turn-In Details.
Skype Feedback Wed or Thurs during your slotted time.

Need additional help book me during Office Hours: bookme








HOMEWORK:
This week's assignment is to write and design the content for the Functional Specifications, and the Site Map, within your existing Client Documentation InDesign Document from the previous week.

























Functional Specifications.
This is the stage of the client documentation where the design and client collaborate to detail the features and functionalities of the site. This could be in the form of a persisitent "booking" window, slideshows, user-driven star rating system, downloadable PDFs, etc.
 Functional Specifications Lecture with Examples.


Site Map.

A site map serves as a centralized planning tool that will help organize and clarify the content of the site. It is a page-by-page visual representation of the content of the site and how it connects. It also gives the client and designer a better understanding of the width and depth of the site. *Note you may change the dimensions/orientation of the Site Map page to accommodate Site Map content, as necessary.
  Site Maps Lecture with Examples

Read PDF lecture above first, then Watch this Video Lesson which explains further What Page Icon to Use to Represent a Page on a Site Map.





Required Reading: Chapters 4-6





Week 3.    Jan 25 – Feb 1.    Wireframes



DUE: WED, 2/1 by 8AM

See Wk 3 Laulima Assignment for Turn-In Details
Skype Feedback Wednesday or Thursday during your slotted time.

Need additional help book me during Office Hours: bookme





HOMEWORK:
This week's assignment is to layout different ideas for content sections of your Wireframes for 2 HOMEPAGES + 1 SUBPAGE, within the provided InDesign Wireframes template.

For variety's sake, the 2 HOMEPAGES MUST be very different from one another in their layout and presentation of content.
For example the header's placement of logo and navigation type/style should be different. The footer's layout and content should also be different. Feature Image and Content-wise, the choice and layout of how you present content on the homepage, should also vary from one homepage to the other. Your SUBPAGE must match the header and footer style of one of your Homepage versions, but the content should obviously be different and pertain to the chosen subpage content.

As you comp up your wireframes make sure to consider the actual content from your website, what you will place on each page and how you will organize it. Don't just create random layouts and sections that don't consider the actual content of your site or the sections that are needed to entice the viewer. Also, use real text for Navigation, Sub-navigation, Page Titles, Headings/Subheadings and Header and Footer links, and only use Lorem Ipsum for paragraph text.

**NOTE: YOU MAY MODIFY "LENGTH" OF THE TEMPLATE PAGES TO MAKE THE PAGES LONGER OR SHORTER to account for the actual content you need on a page. BUT, LEAVE PAGE WIDTH THE SAME!!

Please Review all the Lectures on the right first, then watch this video!!





























Wireframes.
Creating wireframes allows us to quickly and efficiently explore heirarhy, content, layout and structure free from any design elements. Thoroughly experimenting during the Wireframes stage will ensure that you are entering the design phase with a strong and solid foundation.

acrobaticon Wireframes Lecture with Examples
**USE THIS WIREFRAMES TEMPLATE with Graphics
(Note: Template is created in InDesign CC 2017—you may need to update your app or convert it to open).
interneticon  Lorem Ipsum Generator

*If you are struggling with layout/chunking-of-information ideas, maybe looking these at real Website Inspiration will help (remember you are not yet designing but looking at these websites might help with ideas for the organization of information).



Trunk Test.
Krug describes a strategy called the trunk test, for analyzing a site for navigability. Modifying a site to pass the trunk test will create a site that is comfortable to users and therefore more likely to be used for its intended purpose.

Trunk Test Lecture with Examples (Review this lecture and make sure that your wireframes pass the trunk test before turn-in—there is no trunk test file/assignment to turn in).








Required Reading: Chapters 7-9

Week 4.    Feb 1 – Feb 8.    Wireframes Revisions + 1 More Subpage


DUE: WED, 2/8 by 8AM

See Wk 4 Laulima Assignment for Turn-In Details.
Written Feedback will be returned for this assignment.


Need additional help book me during Office Hours: bookme



HOMEWORK:

This week's assignment is to REVISE the layout ideas for content sections of your Wireframes for 2 Homepages + 1 Subpage, within the provided InDesign Wireframes template from the previous week based on feedback. ADDITIONALLY, YOU EXPAND THE WIREFRAMES TO INCLUDE ONE MORE DIFFERENT SUBPAGE for the other version of the homepage, which you did not initially create a subpage for. (Example, if you did the "About Us" Subpage for Home A, then you should create something like the "Contact Us" page for Home B this time).




*If you are struggling with layout/chunking-of-information ideas, maybe looking these at real Website Inspiration will help (remember you are not yet designing but looking at these websites might help with ideas for the organization of information).


Note: There is not a page in your template for this additional Subpage. That means you will need to create a new page in the document to house this new Subpage.

**NOTE: YOU MAY ALSO MODIFY "LENGTH" OF THE TEMPLATE PAGES TO MAKE THE PAGES LONGER OR SHORTER to account for the actual content you need on a page. Leave the width the same.















Review Lectures/Resources (from Last Week).
acrobaticon
Wireframes Lecture with Examples
interneticon    Lorem Ipsum Generator
  Trunk Test Lecture with Examples (Review this lecture & make sure that your wireframes pass the trunk test before turn-in).











Required Reading: Chapters 10-13

 

 

 

Week 5.    Feb 8 – Feb 15.    Design Round 1 Online Critique


DUE: WED, 2/15 by 8AM

See Wk 5 Laulima Assignment for Turn-In Details.

Online Written Critique by Peers + Skype Instructor Feedback
interneticon Online Written Critique by Peers by 11:55pm on Wednesday, via Laulima Discussions
Skype Feedback Wednesday or Thursday during slotted time.


Need additional help book me during Office Hours: bookme


HOMEWORK:

This week's assignment, Design Round 1, is to DESIGN the look and layout content for two different versions of Home Page design ideas, HOME A & HOME B, in separate Photoshop files, using your wireframe layouts as your guides—all while keeping your file sized and organized with art boards, groups, and layers, as modeled in the Photoshop Website Template Examples.

For variety's sake, these 2 comps MUST be very different visually, while still matching the nature of the client. Very different means that while written content can be the same, there should not be any recycling of imagery, no type treatment similarities, nor close similarities in color palettes or layouts.

Make sure to include actual content from your client's existing webpage (NOT LOREM IPSUM). Additionally, you can search, gather and/or create usable and final content—such as text, imagery, buttons, icons, patterns, textures, etc, to use on your site.




* Name and Organize your Layers & Group Folders stucture like these Example Photoshop File:
YourName_CompanyName_vA_r1.psd
(traditional multi-page setup)
YourName_CompanyName_vB_r1.psd
(long scrolling setup)
       (where _vA_r1 stands for Version A Round 1)
       (where _vB_r1 stands for Version B Round 1)


You may choose the type of sites to do—both version can be set up like traditional multipage sites, or both can be set up as long-scrolling, or you can try one of each—its up to you.


* * NOTES:
MODIFY THE "LENGTH" OF YOUR DOCUMENT ARTBOARD OR CANVAS SIZE
of the Photoshop templates to accommodate your content and layout (do not change the width settings).

USE WEB SAFE FONTS ONLY
(see resource links on right)

CONSIDER IMPLEMENTING PARAGRAPH & CHARACTER STYLES
for consistency of typography:
•  Paragraph Styles in Photoshop.
•  Adobe Video: Settings and when to use Paragraph vs Character Styles.

















*************************************************************************
* Critique the Work of Your Peers *
*************************************************************************

Inspiration Resource Links

interneticon 
My Pinterest Resources Inspiration
interneticon 
Navigation Ideas
interneticon  Modern Site Maps in Footers
interneticon  Awwwards
interneticon  Awwwards —Best Website Typography
interneticon  Smashing Magazine
interneticon  Web Design Ledger on Typography Resources
interneticon  Agile Designers
interneticon  Subtle Patterns
interneticon  Brusheezy
interneticon  Color Resource Links

* Web Font Resource Links *
interneticon  Font Squirrel
interneticon  Google Fonts & AP
interneticon  Adobe Edge Web Fonts

Typography Resource Links
interneticon  TypeTester
interneticon  CSS Typeset
interneticon
  CSS Font Stack (Web Safe % available on each computer)
interneticon  Awesome Font Stacks
interneticon
  Word Mark It
interneticon  Font-Face
interneticon  Webtype
interneticon  15 Great Examples of Web Typography
interneticon  Expressive Web Typography
interneticon  I Love Typography—Article About Web Typography


Week 6.    Feb 15 – Feb 22.    Design Round 2 Face-to-Face Critique (w/Guest Critic)


DUE: WED, 2/22 by 8AM

See Wk 6 Laulima Assignment for Turn-In Details

Face-to-Face Group Critique: Wednesday, 2/22 @ 8am-10:30am in KOPIKO 202A
Guest Critic: Chris Garguilo


Need additional help book me during Office Hours: bookme



HOMEWORK:
This week's assignment, Design Round 2, is to REVISE the look and layout content for your two different versions of Homepage ideas, HOME A & HOME B, based on feedback from last week, and to ADDITIONALLY DESIGN a different subpage for each version, so SUBPAGE A1 and SUBPAGE B1 in existing separate Photoshop files from previous week, all while keeping your file organized with art boards, groups, and layers, as modeled in the Photoshop Website Template Examples.

**NOTE: Choose different subpages from your site to design—for instance DO NOT do Contact page for both Sub A1 and Sub B1. Instead for example you can do "About" subpage for version A and "Contact" subpage for version B.

*Note you may make adjustments to page "length" of the Photoshop templates canvas or artboards to accommodate your content and layout (do not change the width settings).

We will hold an in-person group critique after turn-in, where you will present your designs to the class and a Guest Critc. Guest critic will help you provide feedback on what direction to move forward with, Version A or B or sometimes a combination of the two. No Skype session required. But you may schedule me during office hours if you would additionally like my feedback.















CRITIQUE ORDER (~8 minutes each):
Shannon Goo
Sharlene Pennington
Stephan Bradley
Yung Hsuan Yu
Cheryl Soong
Gina Peng
Esther Choe
Kimi Lung
Mahsa Crum
Reyn Suzuki
Allyson Maria Villanueva
Coleen Lochabay
Forrest Akemann
Fumiko Kojiro










 

Week 7.    Feb 22 – Mar 1.    Design Round 3 Online Critique


DUE: WED, 3/1 by 8AM

See Wk 7 Laulima Assignment for Turn-In Details.

Online Written Critique by Peers + Skype Instructor Feedback
interneticon Online Written Critique by Peers by 11:55pm on Wednesday, via Laulima Discussions
Skype Feedback Wednesday or Thursday during slotted time.

Need additional help book me during Office Hours: bookme


HOMEWORK:
This week's homework, Design Round 3, is to REVISE the look and layout content for your EXISTING CHOSEN VERSION (A or B) of the HOMEPAGE AND SUB 1, based on feedback from guest critic, and to ADDITIONALLY DESIGN the REMAINDER OF YOUR SUBPAGES for that version, so for example SUBPAGE 2, SUBPAGE 3 and SUBPAGE 4 in existing Photoshop file for that version from previous week, all while keeping your file organized with art boards, groups, and layers, as modeled in the Photoshop Website Template Examples.

*Note you may make adjustments to page "length" of the Photoshop templates to accommodate your content and layout (do not change the width settings).




















*************************************************************************
* Critique the Work of Your Peers *
*************************************************************************
Week 8.    Mar 1 – Mar 8.    Final Website Design • Client Documentation Due
DUE: WED, 3/8 by 8AM


See Wk 8 Laulima Assignment for FINAL Turn-In Details.

No Skype Sessions or Written Feedback this week. Graded Project will be returned and graded using Project 1 Gradesheet within 1-2 weeks from turn-in via Laulima Assignment. Final Score will be reflected in Gradebook.

Anything you'd like to discuss, book me during Office Hours: bookme


HOMEWORK:

This week's assignment is to FINALIZE THE DESIGN/CONTENT LAYOUT OF ALL YOUR WEBSITE PAGES (Hompage B, Subpage B1, Subpage B2, Subpage B3 and Subpage B4) based on feedback from Round 3 Critique for FINAL TURN-IN, all while keeping your Photoshop file organized with art boards, groups, and layers, as modeled in the Photoshop Website Template Examples.


•  Also, proofread, check for consistency, and perform Trunk Test on all pages, etc.












continued FINALIZE/REVISE ALL COMPONENTS OF THE CLIENT DOCUMENTATION PACKET based on previous feedback.

•  Poofread all writing, and make sure the "look and feel" of your documentation matches your final website design, etc.
•  But in particular revise Site Map, & Wireframes* to match organization/design of the final site. *Note: You only need to revise/turn in the 2 Wireframe pages that corresponds to the final chosen version of your site.

documentationvisual

See Video Lecture on combining Pages from Different InDesign Files into one InDesign File.



SEE ASSIGNMENT FOR ADDITIONAL TURN-IN DETAILS.



 




 

PROJECT 2: E-COMMERCE WEBSITE DESIGN

Week 9.    Mar 8 – Mar 15.    Client Selection • Creative Brief • User Profiles

DUE: WED, 3/15 by 8AM


See Wk 9 Laulima Assignment for Turn-In Details.
Written Feedback will be returned for this assignment.

Need additional help book me during Office Hours: bookme



PROJECT 1:
Assignment Sheet | Grade Sheet | Student Sample

HOMEWORK:
This week's assignment is to choose a client and write and design the content for the Client Selection Cover Page, the Creative Brief, and the 3 User Profiles, within a single InDesign Document (with multiple pages) that you create as part of your Client Documentation. The size and orientation is up to you.












Client Selection.

For this Second project of the semester, you will need to surf the web in search for a currently existing E-COMMERCE website (which has Shopping Cart function) that you will name as your client. This does not mean you will contact them, it just means that you will redesign their Website. Pick a site that is modest in scale and not so robust for your first ecommerce client.
Client Selection Lecture with Examples (**NEW E-Commerce Examples)

Creative Brief.
The intricate collaborative partnership between designer and client must begin with an articulated set of objectives and goals. A creative brief is a document created through initial meetings, interviews, readings and discussions between a client and designer before any work begins. Throughout the project, the creative brief continues to inform and guide the work.
  Creative Brief Lecture with Examples  (**NEW E-Commerce Examples)

User Profiles.
Your users will drive the structure and design of the site; it is important to get to know them. The User Profiles document will allow you to understand the needs of your users and to create scenarios for them.
User Profiles Lectures with Examples (**NEW E-Commerce Examples)









 


 

 



 

Week 10.    Mar 15 – Mar 22. Functional Specifications • Site Map

DUE: WED, 3/22 by 8AM

See Wk 10 Laulima Assignment for Turn-In Details.
Skype Feedback Wednesday or Thursday during your slotted time.

Need additional help book me during Office Hours: bookme



HOMEWORK:
This week's assignment is to write and design the content for the Functional Specifications, and the Site Map, within your existing Client Documentation InDesign Document from the previous week.

.......................................


Functional Specifications.
This is the stage of the client documentation where the design and client collaborate to detail the features and functionalities of the site. This could be in the form of a persisitent "booking" window, slideshows, user-driven star rating system, downloadable PDFs, etc.
 Functional Specifications Lecture with Examples (**NEW E-Commerce Examples)


Site Map.
A site map serves as a centralized planning tool that will help organize and clarify the content of the site. It is a page-by-page visual representation of the content of the site and how it connects. It also gives the client and designer a better understanding of the width and depth of the site. *Note you may change the dimensions/orientation of the Site Map page to accommodate Site Map content, as necessary.
Site Maps Lecture with Examples   (**NEW E-Commerce Examples)


Repeat Video Lecture on Site Maps from Week 2 if you need a refresher.













*****************************************************************************
IMPORTANT!!

*****************************************************************************

As you start drafting what Features & Functionalities you might need or what pages to have for your Site Map, PLEASE CAREFULLY REVIEW THIS ** IMPORTANT E-COMMERCE CHECKLIST, so that you don't forget important features that an e-commerce website might have or could benefit from having. Also keep this list in mind as you develop your wireframes so you dont forget anything that could be essential or helpful to your user/consumer.


Inspiration Resource Links
See myPinterest E-COMMERCE WEBSITES










Week 11 / SPRING BREAK.    Mar 22 – Apr 5.  Wireframes (4 pages in Template) —  **Due Apr 5 — after Spring Break


DUE: WED, 4/5 by 8AM


See Wk 11 Laulima Assignment for Turn-In Details.
Skype Feedback Wednesday or Thursday during your slotted time.

Need additional help book me during Office Hours: bookme


HOMEWORK:

This week's assignment is to layout different ideas for content sections of your Wireframes for 2 HOMEPAGES + 2 SHOPPING SUBPAGES within the provided InDesign Wireframes template.

* For your 2 SHOPPING SUPBAGES (you will be designing 1 subpage for each version. The subpage will be different for each and sequential in nature depending on how your shopping experienced is organized). For example you should wireframe the SHOP PRODUCT CATEGORY PAGE (if your site will has one) -AND- the PRODUCTS PAGE. Or the PRODUCTS PAGE -AND- the PRODUCT DETAILS PAGE. *If you're not sure which ones you should be doing ask me :)



For variety's sake, the 2 HOMEPAGES MUST be very different from one another in their layout and presentation of content.
For example the header's placement of logo and navigation type/style should be different. The footer's layout and content should also be different. Feature Image and Content-wise, the choice and layout of how you present content on the homepage, should also vary from one homepage to the other. Your SUBPAGE'S footer and header should match its corresponding HOMEPAGE, so its clear which version it pertains to.

As you comp up your wireframes make sure to consider the actual content from your website, what you will place on each page and how you will organize it. Don't just create random layouts and sections that don't consider the actual content of your site or the sections that are needed to entice the viewer. Also, use real text for Navigation, Sub-navigation, Page Titles, Headings/Subheadings, and Header and Footer links, and only use Lorem Ipsum for paragraph text.

*Make sure to add sorting and filtering options, as necessary, to help the user organize the presentation of products.

**Also keep this IMPORTANT E-COMMERCE CHECKLIST in mind (Review from Week 10), as you draft your wireframes!!

*If you are struggling with layout/chunking-of-information ideas, maybe looking these at interneticon myPinterest E-COMMERCE WEBSITES will help (remember you are not yet designing but looking at these websites might help with ideas for the organization of information).

**NOTE: YOU MAY MODIFY "LENGTH" OF THE TEMPLATE PAGES TO MAKE THE PAGES LONGER OR SHORTER to account for the actual content you need on a page. BUT, LEAVE PAGE WIDTH THE SAME!!










Wireframes.
Creating wireframes allows us to quickly and efficiently explore heirarhy, content, layout and structure free from any design elements. Thoroughly experimenting during the Wireframes stage will ensure that you are entering the design phase with a strong and solid foundation.
acrobaticon   Wireframes Lecture with Examples (**NEW E-Commerce Examples)
interneticon  Use this Wireframes Template with Graphics (Note: Template is created in InDesign CC 2017—you may need to update your app or convert it to open).
interneticon  Lorem Ipsum Generator

Repeat Video Lecture on Wireframes from Week 3 if you need a refresher.



**Sorting vs. Filtering. (*Completely NEW LECTURE)
Most Ecommerce Websites have the ability to not only filter content, but also sort it to help the user organize and results of their searches.
acrobaticon  Sort vs. Filter
—Review this lecture and implement sorting and filter options as necessary as you Wireframe.

Trunk Test.
Review the
Trunk Test Lecture with Examples and make sure that your Wireframes pass the trunk test before turn-in.
 



Week 12.    Apr 5 – Apr 12.   Wireframes Revisions (Revise all 4 pages)


DUE: WED, 4/12 by 8AM

See Wk 12 Laulima Assignment for Turn-In Details.
Written Feedback will be returned for this assignment.


HOMEWORK:
Wireframe Revisions

Make revisions to your wireframes from last week (Wireframes for 2 HOMEPAGES + 2 SHOPPING SUBPAGES).

Remember to keep this IMPORTANT E-COMMERCE CHECKLIST in mind (Review from Week 10-11), as you draft your wireframes!!

*Make sure to add sorting and filtering options, as necessary, to help the user organize the presentation of products.













*If you are struggling with layout/chunking-of-information ideas, maybe looking these at real Website Inspiration will help (remember you are not yet designing but looking at these websites might help with ideas for the organization of information).

ECOMMERCE WEBSITE INSPIRATION:  
interneticon  **myPinterest E-COMMERCE WEBSITES
interneticon
  18 Responsive Ecommerce Websites    
interneticon  13 Award-winning Ecommerce Websites  

 

Week 13.    Apr 12 – Apr 19.    Design Round 1 Online Critique

DUE: WED, 4/19 by 8AM

See Wk 13 Laulima Assignment for Turn-In Details.

Online Written Critique by Peers + Skype Instructor Feedback
interneticon Online Written Critique by Peers by 11:55pm on Wednesday, via Laulima Discussions
Skype Feedback Wednesday or Thursday during slotted time.

Need additional help book me during Office Hours: bookme



Design Round 1 Due.

This week's assignment, Design Round 1, is to DESIGN the look and layout content for two different versions of Home Page design ideas, HOME A & HOME B, in separate Photoshop files, using your wireframe layouts as your guides—all while keeping your files organized as modeled in the Photoshop Website Template Examples.


For variety's sake, these 2 comps MUST be very different visually, while still matching the nature of the client. Very different means that while written content can be the same, there should not be any recycling of imagery, no type treatment similarities, nor close similarities in color palettes or layouts.

Make sure to include actual content from your client's existing webpage (NOT LOREM IPSUM). Additionally, you can search, gather and/or create usable and final content—such as text, imagery, buttons, icons, patterns, textures, etc, to use on your site.


Name and Organize your Layers & Group Folders stucture like these Photoshop Files:
Multipage Site Example: YourName_2ndCompanyName_vA_r1.psd
Another Multipage Site Example: YourName_2ndCompanyName_vB_r1.psd
        (where _vA_r1 stands for Version A Round 1)
        (where _vB_r1 stands for Version B Round 1)

Typically speaking ecommerce sites use a multi-page site setup, however if you feel your site's shopping area is small enough where it can work as a long scrolling page then you may set it up as such.

* * NOTES:
MODIFY THE "LENGTH" OF YOUR DOCUMENT ARTBOARD OR CANVAS SIZE
of the Photoshop templates to accommodate your content and layout (do not change the width settings).

USE WEB FONTS ONLY
(see resource links on right)

CONSIDER IMPLEMENTING PARAGRAPH & CHARACTER STYLES
for consistency of typography:
•  Paragraph Styles in Photoshop.
•  Adobe Video: Settings and when to use Paragraph vs Character Styles.

















*************************************************************************
* Critique the Assigned Work of Your Peers Below *
*************************************************************************

Reyn: Yung | Kimi | Mahsa
Yung: Kimi | Mahsa | Stephan
Kimi: Mahsa | Stephan | Allyson
Mahsa: Stephan | Allyson | Coleen
Stephan: Allyson | Coleen | Sharlene
Allyson: Coleen | Sharlene | Shannon
Coleen: Sharlene | Shannon | Cheryl
Sharlene: Shannon | Cheryl | Fumiko
Shannon: Cheryl | Fumiko | Gina
Cheryl: Fumiko | Gina | Forrest
Fumiko: Gina | Forrest | Esther
Gina: Forrest | Esther | Reyn
Forrest: Esther | Reyn | Yung
Esther: Reyn | Yung | Kimi

Inspiration Links:
interneticon  **myPinterest E-COMMERCE WEBSITES
interneticon  Vandelay Design: Beautiful eCommerce Websites * new
interneticon  Awwwards: eCommerce Websites *new
interneticon  Shopify: 30 Beautiful and Creative eCommerce Websites
interneticon  Smashing Mag35 Beautiful & Effective eCommerce Sites
interneticon  Effective eCommerce Sites


Web Font Resource Links

interneticon  Font Squirrel
interneticon  Google Fonts & AP
interneticon  Adobe Edge Web Fonts

Typography Resource Links

interneticon 
TypeTester
interneticon  CSS Typeset
interneticon
  CSS Font Stack (Web Safe % available on each computer)
interneticon  Awesome Font Stacks
interneticon
  Word Mark It
interneticon  Font-Face
interneticon  Webtype
interneticon  15 Great Examples of Web Typography
interneticon  Expressive Web Typography
interneticon  I Love Typography—Article About Web Typography

Week 14.    Apr 19 – Apr 26.    Design Round 2 Face-to-Face Critique (with Guest Critic)

DUE: WED, 4/26 by 8AM

See Wk 14 Laulima Assignment for Turn-In Details.

Face-to-Face Group Critique
Date/Time/Location: Wed, 4/26 at 8:00am–10:30am in Kopiko 202A
Guest Critic: TBD

Need additional help book me during Office Hours: bookme



Design Round 2
This week's assignment, Design Round 2, is to REVISE the look and layout content for your two different versions of Homepage ideas, HOME A & HOME B, based on feedback from last week, and to ADDITIONALLY DESIGN the two different subpages you wireframed, SUBPAGE A1 and SUBPAGE B1 in existing separate Photoshop files from previous week, all while keeping your file organized with art boards, groups, and layers, as modeled in the Photoshop Website Template Examples.


*Note you may make adjustments to page "length" of the Photoshop templates canvas or artboards to accommodate your content and layout (do not change the width settings).

Don't forget things like sub nav/sort/filter function if your user can benefit from them on the website.

We will hold an in-person group critique after turn-in, where you will present your designs to the class and a Guest Critc. Guest critic will help you provide feedback on what direction to move forward with, Version A or B or sometimes a combination of the two. No Skype session required. But you may schedule me during office hours if you would additionally like my feedback.













CRITIQUE ORDER (~8 minutes each):
Kimi Lung
Reyn Suzuki
Yung Hsuan Yu
Mahsa Crum
Stephan Bradley
Allyson Maria Villanueva
Coleen Lochabay
Sharlene Pennington
Shannon Goo
Cheryl Soong
Fumiko Kojiro
Gina Peng
Forrest Akemann
Esther Choe










Week 15.    Apr 26 – May 3.    Design Round 3 Online Critique

DUE: WED, 5/3 by 8AM

See Wk 15 Laulima Assignment for Turn-In Details.

Online Written Critique by Peers + Skype Instructor Feedback
interneticon Online Written Critique by Peers by 11:55pm on Wednesday, via Laulima Discussions
Skype Feedback Wednesday or Thursday during slotted time.

Need additional help book me during Office Hours: bookme

HOMEWORK:
This week's homework, Design Round 3, is to REVISE the look and layout content for your EXISTING CHOSEN VERSION (A or B) of the HOMEPAGE AND SUB 1, based on feedback from guest critic, and to ADDITIONALLY DESIGN the REMAINDER OF YOUR SUBPAGES for that version, so for example SUBPAGE 2, SUBPAGE 3 and SUBPAGE 4 in existing Photoshop file for that version from previous week, all while keeping your file organized with art boards, groups, and layers, as modeled in the Photoshop Website Template Examples. *Note you may make adjustments to page "length" of the Photoshop templates to accommodate your content and layout (do not change the width settings).

* * IMPORTANT NOTE * *
You must have a minimum of 2 shopping pages comped.
Eg. Category
and Products page     —or—     Products and Product Detail Page.
The rest may be any subpage of your choosing.














*************************************************************************
* Critique the Assigned Work of Your Peers Below *
*************************************************************************

Reyn: Yung | Kimi | Mahsa
Yung: Kimi | Mahsa | Stephan
Kimi: Mahsa | Stephan | Allyson
Mahsa: Stephan | Allyson | Coleen
Stephan: Allyson | Coleen | Sharlene
Allyson: Coleen | Sharlene | Shannon
Coleen: Sharlene | Shannon | Cheryl
Sharlene: Shannon | Cheryl | Fumiko
Shannon: Cheryl | Fumiko | Gina
Cheryl: Fumiko | Gina | Forrest
Fumiko: Gina | Forrest | Esther
Gina: Forrest | Esther | Reyn
Forrest: Esther | Reyn | Yung
Esther: Reyn | Yung | Kimi



 

Week 16 / Finals Week.    May 3 – May 10.    Final Website Design • Client Documentation Due

DUE: WED, 5/10 by 8AM

See Wk 16 Laulima Assignment for FINAL Turn-In Details.
No Skype Sessions or Written Feedback this week. Graded Project will be returned and graded using Project 2 Gradesheet within final grades being due via Laulima Assignment. Final Score will be reflected in Gradebook.

Anything you'd like to discuss, book me during Office Hours: bookme


HOMEWORK FOR FINAL TURN-IN:

This week's assignment is to FINALIZE THE DESIGN/CONTENT LAYOUT OF ALL YOUR WEBSITE PAGES (Hompage A, Subpage A1, Subpage A2, Subpage A3 and Subpage A4) based on feedback from Round 3 Critique for FINAL TURN-IN, all while keeping your Photoshop file organized with art boards, groups, and layers, as modeled in the Photoshop Website Template Examples.

•  Also, proofread, check for consistency, and perform Trunk Test on all pages, etc.














continued FINALIZE/REVISE ALL COMPONENTS OF THE CLIENT DOCUMENTATION PACKET based on previous feedback.

•  Poofread all writing, and make sure the "look and feel" of your documentation matches your final website design, etc.
•  But in particular revise Site Map, & Wireframes* to match organization/design of the final site. *Note: You only need to revise/turn in the 2 Wireframe pages that correspond to the final chosen version of your site.

documentationvisual

See Video Lecture on combining Pages from Different InDesign Files into one InDesign File.



SEE ASSIGNMENT FOR ADDITIONAL TURN-IN DETAILS.

 

Work TURN-iN & FEEDBACK

Due by 8AM on Wednesday Due Date via Laulima Assignments and via Your Personal Course Website

HOMEWORK TURN-IN
Homework is due on the listed end-date of each week (the Following Wednesday) by 8am via the appropriate Assignment in Laulima and via Your Personal Course Website as specified in each assignment in Laulima.

**Peer Written Critiques**
Peer written critique dates require additional participation via Laulima Class Discussions by 11:55pm on Wednesday due date.

Late Assignments
will only be accepted until the following Thursday by NOON and will be docked 1 point. Feedback will only be given on late work, when time permits.




Need More Help with Laulima, visit:




RECEIVING FEEDBACK
You will receive feedback in one of the following formats: in writing in laulima assignment, in writing from your peers in laulima discussions, in person with a guest critic, and via your set 15-minute weekly Skype sessions with the instructor.

The type of feedback you will recieve on your homework submission will be noted each week in the schedule.

Or for a summary of dates and the type of feedback you will receive you can also, click here.



THE STUDENTS

Check out the STUDENT EXAMPLE.

And check out peer work below.





RESOURCES & INSPIRATION

Below are some examples. For more inspiration here are a few relevant resources:
Web Design Theory       Web Design Inspiration   Ecommerce Sites   Web Typography       Wireframing      UI Kits       Responsive   

OFFICE HOURS + Get in toucH

Have a question/concern or need some feedback—feel free to get in touch.

 

Contact
Cell: (808) 343-9565
Email: ailed@hawaii.edu




Skype Office Hours
Wednesdays: 4:30pm-6:30pm
Via Skype: ailedg

  Get img

Skype & Booking Instructions

Computer Lab Hours
Koa 102 & 103: Schedule