When You know better, you do better.

banner_ad

 

This year, I will be introducing a new course in my GDPW program at Humber College called UI Design. Students will explore design techniques for web and mobile devices while adhering to web standards and experimenting with design trends. For the major project, I decided to build a simple web application that would randomly select a meal – from a database – depending on the user’s category of choice. (ie: breakfast, lunch or dinner) I asked my good friend, and fellow instructor,  Thomas Borzecki (@iborg) to create the database and produce the code, while I created the concept, functionality and design objectives of the project. Each student will be given a bare-bone application which will need to be styled with CSS. They must consider user experience, device deployment and utilize various design techniques to create a useable and successful application. Each student will be responsible for designing and creating a logo for their app, develop a minimum of two responsive  layouts – as well as – creating a web ad to promote the new application online.

*Don’t worry WDDM, I’ll be giving you this project too. ;)

Check out my example of the meal application project , which I named “Foodify.” :)

Try Foodify!

dynamicgraphicstyles

 

The process of creating a good user experience is to begin with planning out a solid information architecture. The purpose for creating this architecture is to provide organization of a site and navigational flow. To create such order, a sitemap is  required and created before the prototyping process. Simple sitemaps can be created using Adobe Illustrator by way of utilizing predefined shapes in the symbols panel and the text tool for labelling site pages. However, the task may become redundant, and time consuming especially when creating a large scale website or web application. In this tutorial, I will explain how to utilize Illustrators Appearance panel and Graphic Styles to create dynamic page symbols to speed up the creation of a simple sitemap diagram.

Read more →

I came across this site earlier today, which is filled with some nice UI’s for web and mobile projects. Not only can you download the PSD files but they also have HTML5 and CSS versions as well.

Visit UI-Cloud

 

 

DOWNLOAD IT!

 

LiveView is a specialized remote screen viewing application intended as a tool to help designers create graphics for mobile applications, it has also proven to be useful for creating quick and dirty simulations, demos, and experience prototypes.
Read more →

After seeing the documentary Helvetica in class, answer the following questions by typing your answers in the InDesign document provided:

DOWNLOAD CS6 FILE DOWNLOAD CS4 FILE

Read more →

About This Episode

Microsoft uses Digital Publishing Suite to build interactive and captivating advertisements for Windows 8 and the Surface. Placed in Wired magazine, the advertising content fits in with the editorial designed for technophiles. In this app of the week video, see how the ads use 360 degree rotation, video, and HTML to capture and hold readers’ attention.

 

Watch The Video

 

 

Do is the Social Productivity App for Your Team. Easily create and share tasks, projects and notes with your team so you always know what needs to get done, no matter where you are.

Get Do

Watch the trailer —>

Read more →