User Experience Interface Design

Welcome to the UX/UI Design Fundamentals Prep Course for the Bitmaker Labs User Experience & Interface Design 12 week immersive.

This course is intended to develop you as a strong Product Designer with front-end development knowledge. You’ll examine the fundamentals of user-centred design, including user research, information architecture, interaction design, UI design, and usability testing. By the end of the course, you will be able to design and build basic prototypes using Adobe Illustrator, HTML, CSS, basic JavaScript and jQuery.

Structure of this Prep Course

There are five main parts to this prep-course. They are not intended to replace the actual curriculum, but are just here to get you started. It’s essential that you complete each part in order:

Part 1: An Introduction

Part 2: Tools of the Trade

Part 3: Researching Design

Part 4: Learning the Basics of Code

Part 5: Design and Code Your First Homepage

Part 1: An Introduction

Once the course gets started, we’ll have a lot to cover, so it’s important to get a good understanding of the fundamentals to start strong.

While you complete this prep course, you might have questions and may need a hand— that’s awesome. These are three resources to help you out.

1. Designer News: https://news.layervault.com/

Designer News, a community of people in design and technology. Launched on Dec 31, 2012 as a place to discuss and share interesting things in our industry.

Keep an eye out on Designer News to get insights on activity in the design community.

2. Stack Exchange: http://ux.stackexchange.com/

User Experience Stack Exchange is a question and answer site for user experience researchers and experts

3. Quora: http://www.quora.com/User-Experience

A participation-based question-and-answer website where questions are created, answered, edited and organized by its community of users.

Your most important support resource: us each other

Get to know your classmates, and work through designing things together. That’s what the entire course is about. Connect through Twitter, Facebook, or Google+. Open communication is key.

Feel free to reach out to @bitmakerlabs or @tailoredUX with the hashtag #DesignPrep for questions about this prep course over Twitter. We’ll make sure you’re using your resources, but will be happy to point you in the right direction and help out along the way.

If you have questions about enrolling in the course, or find yourself having a hard time with the prep course, don’t hesitate to reach out to Bitmaker Labs (design@bitmakerlabs.com) or tailoredUX (design@tailoredux.com) with the subject “Design Prep”.

Part 2: Tools of the Trade

We’ve broken down this section of the tutorial between all the tools you’ll need to know to make sure you’re well equipped with a jump start into getting down to design & development from Day 1.

1. Get a sketchbook / notebook, a great pencil, and an eraser.

This is the most important part of generating great ideas in design. You don’t have to get a fancy sketchbook, or a fancy pen, so don’t feel the need to splurge. You can pick something up from:

DeSerres: http://www.deserres.ca

Currys: https://www.currys.com

Or the Dollar Store: I’ve loved my Dollar Store notebooks

I recommend to start by getting a big Rodeo notepad to give you room to think things through on paper.

2. Adobe Creative Cloud

It’s important to get a firm understanding of Adobe Illustrator and Photoshop for the work we’ll be doing in this course. We’ll learn how to communicate workflows and create beautiful interfaces.

You can get Creative Cloud here: https://creative.adobe.com/

3. InVision App

Arguably the most important tool in our toolbox, the InVision App let’s you share work, build interactive prototypes with images, and get feedback from users, colleagues, and friends.

Create an account here: http://www.invisionapp.com/

4. Dribbble

Inspiration comes from great people and places. Sign up for a Dribbble account to get inspired by interesting interfaces. Dribbble is a heavily UI focussed site, and helps you get some great ideas for UI’s and Branding. It’s also a great tool to get freelance work if you’re interested in UI focussed work.

5. Google Chrome

It’s free, fast, and easy to use. We’ll be using it to preview work, and manipulate designs live in the browser with built in inspector tools.

Download Google Chrome here: http://tinyurl.com/qxfc8kh

5. Get the Panda App extension for Chrome

Panda App shows is a quick way to see the most popular shots on Dribbble. Every time you open a new browser tab, you’ll get a fit of inspiration.

Download the Panda Chrome extension here: http://usepanda.com/

7. Dropbox

Create a dropbox account. We’ll be using it for storing *everything* and publishing your first site:

8. Sublime Text

Our favorite text editor! Armed with a number of time saving shortcuts and great syntax highlighting, Sublime Text is a very easy to use text editor. It’s also the industry standard for web developers. The free trial works just fine, although it frequently prompts you to purchase.

Download Sublime Text here: http://www.sublimetext.com/

9. Medium

Medium is a blog publishing platform. You’ll need this for your prep course.

Part 3: Researching Design

So what is UX?

The definition of User Experience Design, UX, or Experience Design, can be really controversial. UX is a way of thinking, can involve (but doesn’t necessarily have to) use “Design Thinking” (which is a major topic in and of itself), and can be approached in a lot of different ways.

During the course, we’re going to focus on practical applications of “UX” to web and mobile apps, and cut through the fuzziness of the meta conversation around UX. Our definition for UX is through the perspective of its’ application in designing software, or digital products.

In preparing for this, we will research and reflect ourselves on what we believe the definitions are for User Experience, and the disciplines that surround UX that are practiced in their own right:

Section 1: User Experience Design

Section 2: User Research

Section 3: Information Architecture

Section 4: Interaction Design

Section 5: User Interface Design

Section 6: Usability

Your first task is to research and write about these elements of UX Design:

Research on each of these topics, and structure your findings in any way you’d like.

But do write them down on a piece of paper, or post-its, or a notebook.

Then write a series of blog posts on Medium with your findings. Take pictures of your research and include them in your posts.

To help you with structuring your topics, and get you thinking about questioning design, here are the topics of your blog posts. The ultimate point is to take away the ambiguity so that we’ll all be talking the same thing when we kick off the course, and actually tangbile conclusions to with each other.

Blog post #1: User Experience Design

What is UX? Who defines UX? Whose job is “UX Design”? Are there “UX Designer” jobs out there? What are the differences between them? Use images in your post talking about this, and write about them.

See Gube, Jacob (2010). What is User Experience Design? Overview, Tools and Resources. Published in Smashing Magazine http://bit.ly/1iRrob9

Blog post #2: User Research

What is User Research? Are there any jobs dedicated to solely User Research? What does a User Researcher do for product design?

See Kuniavsky, Mike (2003). Crafting a User Research Plan. Published in Adaptive Path http://www.adaptivepath.com/ideas/e000107/

Blog post #3: Information Architecture

What is Information Architecture? What’s a job description for an Information Architect? What does an Information Architect do day to day? What does Information Architecture look like? Use images in your post talking about this, and write about them.

See Wodtke, Christina (2009). The Elements of Social Architecture. Published in A List Apart. http://alistapart.com/article/theelementsofsocialarchitecture

Blog post #4: Interaction Design

What is an interaction Designer? What’s the job description of an Interaction Designer? What does an Interaction Designer do day to day? What does interaction design look like? Use images in your post talking about this, and write about them.

See Maier, Andrew (2009). Complete Beginner’s Guide to Interaction Design. Published in UX Booth. http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/

Blog post #5: UI Design

What is UI Design? What does a UI Designer do day to day? What does UI Design look like? Find examples of 5 beautiful home pages for design agencies. Find examples of 5 beautiful home pages of designers. Use images in your post to reflect on why you liked them.

See Usability.gov (2011). User Interface Design Basics. Published on Usability.govhttp://www.usability.gov/what-and-why/user-interface-design.html

Blog post #6: Usability

What is Usability? Whose job is it to manage the usability of an application? What’s the difference between “User Research” and “Usability”? What are the different types of usability testing you can carry out? Hint: start with Heuristic Testing.

See Nielsen, Jakob (2012). Usability 101: Introduction to Usability. Published in NNGroup.com. http://www.nngroup.com/articles/usability-101-introduction-to-usability/

Note: your research skills, and the way you approach thinking about design is the #1 thing that will help you be successful in this course. These blog posts have one real purposes: challenge your research skills and how you communicate your work.

We’d like you to publish each blog post on Medium and share with your peers, and with us over Twitter.

Part 4: HTML & CSS

We don’t like to think of things in terms of hours, or tasks. We’d just like you to take the time to really dive into, and have fun with a web environment that teaches HTML & CSS.

Our UX/UI Fundamentals course will cover the same concepts that are introduced in this Code Academy course. The magic will be in applying them to real, hands on projects with a design focus.

To prepare, CodeAcademy has a great interactive tutorial to run you through the basics:

http://www.codecademy.com/tracks/web

Completing this code academy prep course is mandatory to start our program. Send section completion screenshots to design@bitmakerlabs.com

Part 5: Design & Code Your First Homepage

After you’ve completed the HTML/CSS course on CodeAcademy, you should be familiar with the basics of how to build a profile page for yourself.

1. Create a narrative

Your profile page should answer the following questions:

i. Who are you? Where are you from?
ii. What do you currently do? What do you want to do?
iii. Let’s see you! Do you have an avatar / picture?

iv. Have you done any type of design related work?
v. Have you built anything lately?
vi. Have you completed a non-design related project?

Answer these questions for that work:

i. Show us a picture / image of it
ii. Give it a title
iii. Describe what it is?
iv. What did you learn from this project?
v. How do you think it relates to UX Design?

2. Sketch a rough layout on paper

Sketch how you’d lay this content out on a single page site. Use your blog post #5 as inspiration and look for examples on Dribbble of designers home pages. Mine for example is pretty old right now (I can’t wait to design a new one with you when the course starts!), but it still tells a pretty good story.

3. Design directly in code

Once you’re done designing, using your sketches of the layout you’d like, and using the inspiration from your research in blog post v, develop a basic 1 page layout with your answers from task 1. Pay attention to things like: font-size for headers, sub-headers, and body copy, and font weight for all of these things as well.

We don’t want you to dwell too much on the prettiness of the colours, so use when deciding on a colour scheme, use this for inspiration (and actual colours!)http://flatuicolors.com/

4. Publish your site on Dropbox

Follow the instructions on this page to host your site on dropbox. It’s the fastest way to get your page out there. Share it on twitter with the hashtag #helloworldUX

http://www.maclife.com/article/howtos/how_host_your_website_dropbox

That’s it!

This all completes your prep course requirements for the User Experience & Interface Design Prep Course.

If you have any questions about the full course, feel free to e-maildesign@bitmakerlabs.com.

If you’d like to speak to the designers, you can find us on twitter here: @tailoredUX,@mustefaJ, and @sidramatik. We’re happy to chat, and look forward to seeing you in July.

Source

1980kJune 15, 2014interactivedesign, ui, userinterface, design, designmobile, mobile, web