Seize The Future Workshop: Wordpress Fundamentals & UX/UI Crashcourse

Presented at Cavite State University, Carmona Campus. Nov 23, 2017

Sieze the Future Workshop was attended by 150+ aspiring designers and programmers. Giving the chance to engage to some of the best students within the university. My mission is to drop all the knowledge I have about UX/UI from the 7+ years of my career. Also, inspire them to innovate and maximize the resources we have in the PH.

1. WORDPRESS FUNDAMENTALS JAYCHRIST TEVES SEIZE THE FUTURE – CVSU CARMONA 2017
3. What is WordPress? • WordPress is a web software to create a blog or website • Highly flexible Content Management System (CMS) • Open source project (Free) • Huge community developing plugins, widgets, and themes
4. How does it work? • Install WordPress on your server in about five(5) minutes or use the cloud-based WordPress.com • Edit and manage your content in an easy to use web interface • Built on the widely popular PHP and mySql platform
5. Why use WordPress? • No need to learn HTML, CSS, Javascript, or other web-based languages • Open source, so it’s constantly being updated and improved • Not locked into one system, easily export and import data • Widely popular with easy to find support and third party enhancements • Customized your blog or site to meet your needs and design
6. LET ME SHOW YOU THE BASICS OF WP
7. FIVE KEY FUNDAMENTALS OF A GOOD WEB DESIGN JAYCHRIST TEVES SEIZE THE FUTURE – CVSU CARMONA 2017
8. ONE: DESIGN FOR YOUR AUDIENCE
9. LET’S TAKE A LOOK AT THIS TWO VERY DIFFERENT SITE
12. “When designing a website, always make sure that you have the correct demographic in mind.”
13. TWO: MAKE IT MEMORABLE
15. “but a design does not have to be striking to be memorable.”
16. THREE: DON’T OVERWHELM
18. “Traffic has a value, and any website with purpose wants to do something with that traffic when it arrives.”
19. FOUR: DON’T DISCRIMINATE
20. The key is “responsive design” – ideally, your site’s theme should adapt to any kind of device.
21. FIVE: MAKE IT QUICK
22. Website Design = Creativity + Structure
23. Thank you! Now it’s time for Q & A. Part One: Worpress Fundamentals LEARN MORE @ JAYCHRISTTEVES.COM AND CHECK MY WORK IN PROGRESS ON:
24. UX CRASH COURSE: EIGHT FUNDAMENTALS Basic UX Principles: How to get started JAYCHRIST TEVES SEIZE THE FUTURE – CVSU CARMONA 2017
25. INTRODUCTION & KEY IDEAS 1. WHAT IS UX? 2. USER GOALS AND BUSINESS GOALS 3. THE FIVE MAIN INGREDIENTS OF UX HOW TO UNDERSTAND USERS 4. WHAT IS USER RESEARCH? 5. HOW TO ASK PEOPLE QUESTIONS 6. CREATING USER PROFILES 7. DESIGNING FOR DEVICES 8. DESIGN PATTERNS >> UX / UI ACTIVITY
26. ONE: WHAT IS UX? • Everything has a user experience. Our job is not to create the user experience. It is our job to make it good • A user’s experience is just the tip of the iceberg • “Doing” UX
27. TWO: USER GOALS & BUSINESS GOALS • User Goals • Business Goals • Align the goals
28. THREE: FIVE MAIN INGREDIENTS OF UX 1. Psychology 2. Usability 3. Design 4. Copywriting 5. Analysis
29. FOUR: WHAT IS USER RESEARCH? • Subjective Research • Objective Research
30. FIVE: HOW TO ASK PEOPLE QUESTIONS 3 basic types of questions: 1. Open Questions 2. Leading Questions 3. Closed/Direct Questions
31. SIX: CREATING USER PROFILES • Let’s list down what personas/profiles are NOT: Personality Types Demographics Character in your “brand story” Stereotypes based on your experience Shallow or 1-dimensional Concepts Predictions
32. It describes the goals, expectations, motivations, and behaviour of real people. Why do they come to your site? What are they looking for? What makes them nervous? And so on. WHAT IS PERSONA/PROFILE?
33. Persona A is a female, between the ages of 35-45 with an above average income and education. They have at least one child and own at least one new vehicle. They are outgoing and career-oriented, and tend to be right- brain thinkers. BAD PROFILE
34. WHY IT’S BAD? Because it doesn’t allow you to say “no” to any feature ideas. What sort of features does a female between 35- 45 need? It could be anything!
35. Persona A is an experienced manager, mostly interested in one or two areas of expertise. They visit often, but they are pressed for time, so they focus on “collecting” content to read on the weekends. They tend to be prolific social media sharers, mostly to Twitter and LinkedIn. They consider themselves thought-leaders, so public image is important. USEFUL PROFILE
36. Now you have a lot of information to use! You know that fluffy content will not be popular, self-curating will be a big deal and you have a basis for setting up content categories. They need easy access to sharing, and only certain types of social sharing will be relevant. WHY IT’S USEFUL?
37. THINK OF “IDEAL” USERS. SEVERAL OF THEM!
38. SEVEN: DESIGNING FOR DEVICES Step 1: How does it like to be touched? Step 2: Start small Step 3: What special powers does this device have? Step 4: Consider the software. Step 5: Be responsive. Step 6: Think about more than one screen at a time.
39. EIGHT: DESIGN PATTERNS “A design is not necessarily good just because it’s common. To be a “good” Design Pattern, a solution must be common and usable.”
40. EXAMPLE OF DESIGN PATTERN Now, there are hundreds of design patterns and they are changing all the time as devices and technologies evolve, so I can’t really make you a list. But, here’s a few of it that I feel a great fit for this lesson. Source: www.goodui.org
41. Idea One: Try A One Column Layout instead of multicolumns. Source: www.goodui.org
42. Idea Two: Try Giving a Gift instead of closing a sale right away. Source: www.goodui.org
43. Idea Three: Try Merging Similar Functions instead of fragmenting the UI. Source: www.goodui.org
44. Idea Four: Try Social proof instead of talking about yourself. Source: www.goodui.org
45. Idea Five: Try Repetition instead of showing it just once. Source: www.goodui.org
46. Idea Six: Try Distinct Clickable / Selected instead of blurring them Source: www.goodui.org
47. Idea Seven: Try Recommending instead of showing equal choices. Source: www.goodui.org
48. Idea Eight: Try Undos instead of prompting for confirmation. Source: www.goodui.org
49. Idea Nine: Try Telling Who It’s For instead of targeting everyone. Source: www.goodui.org
51. Thank you! Now it’s time for Q & A. Part Two: UX CRASH COURSE: EIGHT FUNDAMENTALS LEARN MORE @ JAYCHRISTTEVES.COM AND CHECK MY WORK IN PROGRESS ON:
52. UI or UX ACTIVITY: LET’S PUT YOUR DESIGN THINKING INTO A TEST. READY OR NOT. LET’S GO
54. TASK: CREATE A WIREFRAME / SKETCH FOR RANKING FILM. DESKTOP VER. ONLY Ranking Films is a website that allow multiple users to vote or arrange their own list and add them on their favorites.
55. PERSONAS The applications will mainly be used by Movie Reviewers, Movie Enthusiasts and General Public. Below is brief description. Movie Reviewers – Throw comments, discuss movies with his technical background. Can create list, view and share list. Movie Enthusiasts – View/Create list, share and edit list and upvote movie General User — Upvote, Watch movies, create and edit list and can share list.
56. ASSUMPTIONS The application should have a simple interface. The customer puts minimalism and simplicity on the ground that it will be used ANYWHERE in the world. Application consists of modules that the user can switch. These modules are: Top movies, List of 2017, Top Movies of 2017 and Ranking by Votes
57. AS A DESIGNER As a designer, you have the freedom to add colors you want, fonts or shapes. The general layout and logic of the application should be preserved. The customer wants to use his brandy blue in the project: #0066FC.
58. YOU HAVE 15MINS TO SKETCH THE WIREFRAME READY? GET SET. GO!
59. PROTOTYPE PREVIEW
61. Thank you! Have an awesome week. LEARN MORE @ JAYCHRISTTEVES.COM AND CHECK MY WORK IN PROGRESS ON:
62. References TRAINSIMPLE (2017) Wordpress 3.X fundamentals. Retrieved from http://www.trainsimple.com EWER, T. (2012) The 5 key fundamentals of wordpress site design. Retrieved from https://managewp.com MARSH, J. (2014) UX crashed course: 31 fundamentals. Retrieved from http://thehipperelement.com KURTULDU, M. (2017) Basics of UX. Retrieved from https://developers.google.com DANCE, J. (2014) 7 UI/UX Principles to help create a fresh experience. Retrieved from https://www.freshconsulting.com JAKUB & VLAD LINOWSKI INTERACTION DESIGN (n.d) A Good User Interface. Retrieved from http://www.goodui.org/ BEGINNER'S GUIDE FOR WORDPRESS / Start your WordPress Blog in minutes (n.d) Retrieved from http://www.wpbeginner.com/