Advanced Web Page Scripting – Outcomes

The following is a movie of a sample site created by a student incorporating background video:

Coding strategy:

LESS -> CSS

Font Awesome and iconographic design

Twitter Bootstrap and jQuery


Design for Mobile – Student Outcomes

Projects must be country specific, and students spend a great deal of time researching the target country to ensure that the mobile app they are designing is relevant to the indended audience.

Depending on course composition, mobile design may be weighted to design, Ux, or development. Here is a sample submited from a more design-centric student:

littlebook_campion_print_edit-design-mobile

A Customer Journey from another project, in this case a job app aimed at Croatian job-seekers:

design-for-mobile-customer-journey

A completed group project, this time an app that allows visitors to Thailand locate medical services quickly and easily:

NOTE: a large file, may take some time to load!

design-for-mobile

 


Information Architecture – Outcomes

Early on in the course, students conduct content inventories on existing websites:

After choosing a project, they do user testing (card-sorting methodology) to generate a folksonomy, here shown as a mindmap:

Further development includes wireframes:

toprint_1

All the results are organized into a final presentation:

camopion_homekeeping_presentation

Intermediate Web Design – Outcomes

During this course, students need to work in a codeschool to improve their scores.

For the Final, students have to present a coded HTML5/CSS3 website. The image below is a screen capture. The actual site uses CSS3 animation to highly the cards in the grid:


Fundamentals of Web Page Scripting – Outcomes

Students learn the basics of HTML5 and CSS, plus some Information Design and architecture during the first part of the course. This leads to some fairly basic websites like the one below:

By the Final, students are creating presentations incorporating basic Design and Ux principles:

final_presentation_campionedit

Another example:

final_presentation_Honc, Michelle

Final pages are also a bit more sophisticated, like those below:

Another example:


Experience Design – Outcomes

A customer journey, individual project:

The following was a complete Ux presentation, done as a group project by several students for a job board website.

ux-presentation

Students also built a code prototype using PHP/MySQL to emulate job board functions. Here is a shot of the homepage:

 


User Experience 3: Project Dev – Outcomes

The following is a completed Ux design document for Golden Tours a travel site aimed at seniors. The first document is a mission statement/design brief for the project:

golden_tours

The next PDF shows outcomes, including Ux deliverables and final website design. Here is the Business Model:

 

 

A sample Customer Journy map from the project:

Interaction Diagrams:

User Flowchart:

 

Test results (heatmaps):

Portfolio site for this student at: http://lucianaflora.com


User Experience 2: Prototyping – Outcomes

The following PDF compiles some students deliverables from the second half of the class: style guides, customer journeys,  and user testing results with a dashboard infographic summarizing at the end.

easymealspro

The next PDF shows an Interaction Diagram from another student for an exercise app:

yoga-nova-Userflow

Advanced Web Design – Outcomes

The following is a completed design document for a sophisticated web design requiring branding, layout, graphic design, and HTML, CSS, and JavaScript coding. The design is a refactoring for an existing website, using the Atomic Design design theory:

King Oak College

A screen capture of the final site (mp4):


The following is a website for a Game Development student, with a smaller expectation of visual design competency (click for code):

Another example for a student focused to digital marketing and promotion:


Interactive Communication 1: Planning and Research – Outcomes2

The following outcome is a first draft for a design project, submitted by an advanced student:

int.comm.final_02