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

D663e7e3088a88f940c785d75c2d08d1?s=47 Jaychrist Teves
November 23, 2017

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.

D663e7e3088a88f940c785d75c2d08d1?s=128

Jaychrist Teves

November 23, 2017
Tweet

Transcript

  1. WORDPRESS FUNDAMENTALS JAYCHRIST TEVES SEIZE THE FUTURE – CVSU CARMONA

    2017
  2. None
  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

  10. None
  11. None
  12. “When designing a website, always make sure that you have

    the correct demographic in mind.”
  13. TWO: MAKE IT MEMORABLE

  14. None
  15. “but a design does not have to be striking to

    be memorable.”
  16. THREE: DON’T OVERWHELM

  17. None
  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
  50. None
  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
  53. None
  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

  60. None
  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/