Fall 2020
Fall 2020 NMA In-house Internal Internship Website Home Page
Fall 2020 NMA In-house Internal Internship Website Home Page
FALL 2020
Please refer to these short lists of small project-related sub-tasks as a quick overview of the major projects and sub-tasks to work on. Please feel free to add your own ideas to this growing list. Items in bold have been given the thumbs up and can be found in the list below with accompanying details for each.
In-house Internship Project Brief
In-house Internship Google Site
New NMA Brochure (emailable pdf)
KapCC In-house Style Rules (via a "Mini" Style Guide)
KapCC Lo-fi Mega Menu Wireframe Interactive Prototypes
KapCC Academic Program Page Redesign (Content + UI)
KapCC Heuristic Evaluation Test
KapCC Top-Level Pages Content Doc
KapCC Top-Level Pages Lo-fi Wireframes Exploring Content Options
NMA In-house Style Rules (via a "Mini" Style Guide)
NMA Custom Hero Designs (UI & Coded)
NMA Short Video Clips (5-10 seconds)
NMA Custom Animated Icon Set
NMA Program Content Doc
NMA Site Lo-fi Wireframes Exploring Content Options for all Pages, Sub-Pages, and Sub-Sections
Hi-fi Custom Site Sub-Page and Sub-Section Designs (custom visuals + copy)
NMA Student Project Site (NEW)
FALL 2020 DELIVERABLES
Please refer to the detailed list items below as the pre-approved sub-tasks that you can begin working on immediately. Please feel free to add your own be sure to keep in mind that they each should be potential "bite-sized" sub-tasks with clear deliverables.
KAP CC SITE
BRIEF DESCRIPTION:
Establish a shared "mini" style guide that all team members can access, refer to, and contribute to as we make style-guide related decisions as a team, such as fonts, colors, logos, type specimins, etc. This is a crucial shared resource should be a "living resource" that "grows" and "changes" and will be continual referenced and contributed to over time.
RESOURCES:
KapCC Style Guide DRAFT (pdf) designed by a previous intern (unofficial)
KapCC Style Guide Example (Google Doc) that I created years ago as a template example (unofficial)
DELIVERABLES:
Create a KapCC "Mini" Style Guide - where do style guides exist and what exactly are they? websites? In most cases the answer is yes: a website. It could also be a sub page to the parent web site. In any case, for now, this needs to exist somewhere and it needs to be accessible by not only us, but potentially the entire campus (e.g. if we one day remove the word "Mini" from the title). My advice is to start small by researching how other companies use, create, and share style guides. Should we create a new Google Site for this? Will this work for the long term as a goal of delivering it to the client (e.g. Raph) after the internship is over?
Add Content - what elements should be included? What do we need (as interns) and what will the KapCC website stakeholders (Raph, other website content creators, KapCC administrators/staff/faculty, etc.). Below are examples:
Colors (w/ both visual representations and and easy to copy-paste text/code snippets for hex, RGB, etc)
Fonts (be sure to think about both website and print collateral along with the users across campus, e.g. Adobe Fonts = OK for high level users, but what about your average admin/faculty/staff member? Google Fonts = Good for things like Google Docs, but what about those that use MS Office Products to create pdfs for the website? For this, consider a tiered approach with recommended system fonts as a fall back. Also, be sure to consider a limited "Swiss Army" set for multiple purposes, such as a couple of Display Fonts for large Headlines, perhaps one serif and one sans at minimum, how about a condensed font that works well in small/tight spaces, or one that specifically works well for buttons, etc. Not only identify the best fonts for these, but then use them and show us visually how to do it).
Type Specimens (start a collection of existing ones that are working well, recreate them and label them with the type details such as font, font size, font color, leading, etc., and be sure to have fun with this by creating new type specimens
Document Everything - be sure to include within it a documentation system, even if you start with simply an "updates" section with a log of major changes. Then consider what else should/could be documented and helpful as part of a Style Guide? How about "New Features" list of potential new content an features that should be considered as part of the the style guide, such as visual "Do's & Don'ts" examples, or list of visual precedents (e.g. campus annual reports, campus banners/signage, etc.).
BRIEF DESCRIPTION:
Take a critical look at the existing KapCC Academic Programs Listing page (https://www.kapiolani.hawaii.edu/academics/programs-of-study/) and next consider how this page should be redesigned. Be sure to think in terms of content strategy (how should the content be organized and structured?), user experience (how and why do different users use this page and how do they each feel about it? how could a redesign improve their user experience?), and visual design (what design patterns could/should be used? what visuals and graphical elements, such as icons, might help?)
RELATED RESOURCES:
WAC SlideDeck from Feb 2020 (be sure to read closely and note the "data table" design pattern with icons.
DELIVERABLES:
Low Fidelity Wireframe Prototypes - create as many as possible to explore possible content strategies, design patterns, and page layout options.
High Fidelity UI Mockups - to further test the effectiveness of different design patterns, be sure to explore different high fidelity polished visual graphics and UI elements, such as different icon designs.
BRIEF DESCRIPTION:
Take a critical look at the existing KapCC primary (top) navigation system and next consider how the navgiation of the site could (read: should) be redesigned. Be sure to think in terms of content strategy (how should the content/nav items be re-organized and structured?), user experience (how do different users use the nav and how do they each feel about it? what about mobile users?), and visual design (what design patterns could/should be used? we know that there is a strong interest in using a "mega menu" but how? what sub-patterns and design elements could be used, such as icons? CTA buttons? Photography/images?)
RELATED RESOURCES:
DELIVERABLES:
Low Fidelity Wireframe Prototypes - create as many as possible to explore possible content strategies, design patterns, and page layout options.
High Fidelity UI Mockups - to further test the effectiveness of different design patterns, be sure to explore different high fidelity polished visual graphics and UI elements, such as different icon designs.
NMA SITE
BRIEF DESCRIPTION:
Establish a shared "mini" style guide that all team members can access, refer to, and contribute to as we make style-guide related decisions as a team, such as fonts, colors, logos, type specimins, etc. This is a crucial shared resource should be a "living resource" that "grows" and "changes" and will be continual referenced and contributed to over time.
DELIVERABLES:
Create a NMA "Mini" Style Guide - where do style guides exist and what exactly are they? websites? In most cases the answer is yes: a website. It could also be a sub page to the parent web site. In any case, for now, this needs to exist somewhere and it needs to be accessible by not only us, but potentially the all NMA faculty and staff (e.g. if we one day remove the word "Mini" from the title). My advice is to start small by researching how other companies use, create, and share style guides. Should create a new Google Site for this? Will this work for the long term as a goal of delivering it to the client after the internship is over?
Add Content - what elements should be included? What do we need (as interns) and what will the NMA website stakeholders (full-time instructional faculty, lecturers, counselor, lab manager and monitors, students, etc.). Below are examples:
Colors (w/ both visual representations and and easy to copy-paste text/code snippets for hex, RGB, etc)
Fonts (be sure to think about both website and print collateral (e.g. Adobe Fonts = OK since most within NMA are high level users with Adobe Creative Cloud accounts and access to Adobe Software, but what about things like Google Docs and Google Forms and other things like that that might be a part of the website? Google Fonts = Good for things like Google Docs. With that said, consider a tiered approach with recommended system fonts as a fall back. Also, be sure to consider a limited "Swiss Army" set for multiple purposes, such as a couple of Display Fonts for large headlines, perhaps one serif and one sans at minimum, how about a condensed font that works well in small/tight spaces, or one that specifically works well for buttons, etc. Not only identify the best fonts for these, but then use them and show us visually how to do it).
Type Specimens (start a collection of existing ones that are working well, recreate them and label them with the type details such as font, font size, font color, leading, etc., and be sure to have fun with this by creating new type specimens
Document Everything - be sure to include within it a documentation system, even if you start with simply an "updates" section with a log of major changes. Then consider what else should/could be documented and helpful as part of a Style Guide? How about "New Features" list of potential new content and features that should be considered as part of the the style guide, such as visual "Do's & Don'ts" examples, or list of visual precedents (e.g. campus annual reports, campus banners/signage, etc.).
BRIEF DESCRIPTION:
We need custom "Hero" sections designs. Lots of them. The newly redesign NMA website is going to be a multi-page website that will have Hero sections for each sub page. We also might need several for the home page if we have a rotating slider/carousel. Furthermore, we might opt to swap them out and change them periodically throughout the year, so this is a great opportunity to put your creative juices to work and have some fun! Be sure to think in terms of copy writing (be sure to write "creative" ("clever" "witty" "fun") headings and accompanying text. Do not play it safe and do not forget about the CTA button text (no "Click Here" buttons!), visual graphics (we are a visual program, so the visual backgrounds should be visually impactful and creative), and functional (be sure to design hero sections for both ID and animation, along with the each of the main sub pages, such as the "Degree Info" page and the "Admissions" or "How to Apply" page and the "Contact Us" page.
RELATED RESOURCES & EXAMPLES:
Hero with Animated Text (Staircase "Steps to Career" Concept)
Hero with Animated Text (Rotating Subjects of Study Concept)
DELIVERABLES:
Visual Hero Designs - design as many hi fidelity UI mockups as you can! Have fun.
Coded Hero Designs- at some point we are going to need these coded and they'll need to be coded in a way that will allow us to easily drop them into the site and swap them out. This is not easy, but one way to begin doing this is to use CodePen to create separate pens for each of the Hero designs that you think are worth coding, especially if animation is a part of the design or a video background or an interactive feature,
BRIEF DESCRIPTION:
Put together a series of short (5-10 seconds each) video segments that highlight different parts of the NMA program. They can be process shots, screen recordings, animations (or short clips of existing animation), or anything at all that you think can be used to showcase the NMA program in various ways, such as a) as looping video backgrounds to a website Hero section (see the "NMA Hero Designs" sub-task) or they can be used as content for different parts of the site (e.g. clips of someone sketching logos as part of an identity design sub-section of a sub page on the interface design program, or a time-lapse screen-recording of someone coding a website for the front-end coding sub-section, etc.). Have fun!
RELATED RESOURCES:
DELIVERABLES:
Short Video Clips - (5-10 seconds each) create as many as you can. Save them out as .mp4 files and save them inside of your Google Drive folder.
BRIEF DESCRIPTION:
Design a series of custom icons for the NMA program and then animate them for the website using CSS.
RELATED RESOURCES:
Visit Stripe.com and scroll down to see how they use animated icons.
DELIVERABLES:
Custom Icon Set - (UI Only) design as many as you can. Work in Illustrator and be sure to backup your .ai file in your Google Team drive. To share/present, save out each set as a image (.png) with all icons laid out in a grid.
Animated Icons Ready for Code Implementation - depending upon the visual style of the icons, you can either work in a program like After Effects and save them out as animated gifs (.gif) or you can explore different options such as SVG animations (.svg) and other web animation options, such as hand-coding the animations manually (e.g. svgs or sprites).
BRIEF DESCRIPTION:
Populate the NMA Student Projects website with student work. See thee WIP wireframes here along with this list of students.
DELIVERABLES:
PHASE 1:
Chris to set up the site - http://nmaprojects.site
Initial Set of Student Projects - starting with the award winning projects, manually add them to the site.
Animation:
Raleigh Harris's Up in Smoke - MELISSA
Hannah Woodward's Frog Birthday - MONY
Tyler's Microphone project - CHRIS
Storm's Peas project - MELISSA
ID:
Liana's This is Love Trilogy Book Covers - VENICE
Chrsti Gonzales's Luna Beans - MIYUKI
Tomy's Honolulu Zoo logo - AI
Ariana's Musician Assoc. of Hawaii Logo - ANTHONY
Cheryl Soong's Brightside app
Melissa's Digital Art Site
David's Type Always
Kimi's On The Street - YIWEN
Mahsa's Shrubbery
Initial Set of Students - starting with the same students above (that won awards) create student pages for each of them.
ADD YOUR OWN (TEMPLATE to DUPLICATE)
BRIEF DESCRIPTION:
Provide a brief overview of the sub-task.
DELIVERABLES:
Deliverable Title - describe this specific sub-sub-task as a deliverable (exactly what should the intern be working on?) Be sure to include the format expected and where it should be saved/posted/shared.
Another Deliverable Title - include as many deliverables as required.
The Project Brief is our primary planning document for the NMA in-house internship. Within it are all major project-related plans, goals, and details.
This shared Google Team Drive folder contains all internship-related documents from all NMA in-house internships (past & present). Please place any universal assets that might be helpful to others in the Shared-Resources folder, any project-related resources into the appropriate Project Folder, and any personal work-in-progress files into your personal Team Member Working Folder.