Brian Dys

Category: UX Design

  • Questions from a Graphic Designer

    I’ve received a message in ADPList from a graphic designer who’s interested in UX design, asking curious questions about the field. It’s a good start for anyone exploring to ask many questions!

    Hi I’m a graphic designer who is exploring UX/UI design field. Here are my questions:

    Do UX/UI designers have to learn HTML/CSS to create an app/website?

    Short answer

    No, because you can manage your expertise in the world of UX itself and find partners that will focus on frontend development (HTML/CSS/JS) to create an app/website.

    Long answer

    Creation, design-wise: No, because at this point you’re at the conceptual / mock-up fidelity phase (i.e., design)

    Creation, design-wise: Yes, because knowledge in how to implement your designs will make you a better designer; you will know the limitations and possibilities of the actual website you’re designing; also when prototyping, you can use HTML/CSS/JS

    Creation, technical implementation-wise: No, because there are tools that export directly from design to code; there are also drag and drop website builders like Google Sites (optimization for a performant website, is another topic, though).

    Creation, technical implementation-wise: Yes, because frontend development is close to UX design in terms of process (design then implementation)

    A different answer

    It depends — you can simply wait to discover where the road of exploring UX design will take you. Me, for example, I started with my interest in HTML & CSS that’s why I got into web design, and eventually UX design.

    Does a UX designer design the app/website alone or is it by a team?

    Alone: as mentioned above, you could be a UX designer and a frontend developer rolled into one.

    Team: also, there are projects that can be launched more efficiently and effectively when done by a team (two heads are better than one).

    Is it necessary to make case studies for portfolio or can it just be designs of screens?

    Context is always the key to any portfolio item that you will showcase: what are you trying to say to your audience? Which knowledge and skills are you highlighting in that portfolio item? That can definitely be contained in a case study, regardless of its depth and detail. Context tells a little bit more about you and the project you worked on, to your audience.

    It also doesn’t have to be a case study. However you will manage to put context into your work. How will you get the message across? If screens can accomplish these things, then it’s all good.

    What are some useful tips to get started on UX design?

    It’s ok to take one step at a time to understand the fundamentals of UX. This book, The Elements of User Experience by Jesse James Garrett greatly helped me. Might be a good read for you too, as a start.

    Got the autograph of UX Rockstar Jesse James Garrett #uxweek15
    Got the autograph of UX Rockstar Jesse James Garrett #uxweek15

    Good luck on your UX design journey. Remember to have fun! 😎

  • Extracting Colors from Netflix Logo Animation

    Netflix Logo Color Band
    Netflix Logo Color Band
    A process of pixelating the color bands using Adobe Photoshop.
    Netflix Logo Color Band - Pixelated
    Netflix Logo Color Band – Pixelated

  • Nature’s Apothecary Packaging Design

    Nature's Apothecary
    A top view picture of Nature’s Apothecary box.

    Jaycelle partnered with Nature’s Apothecary to promote their Tea Starter Kit. They’ve got nice visual design on the box, leaflet, and on the tea containers too.

    Nature's Apothecary - Box (front)
    A scan of Nature’s Apothecary – Box (front)
    (more…)

  • Protected: Feedback: Roomie | NS 10 Feb 2021

    This content is password protected. To view it please enter your password below:

  • Changing colors via selective color in Photoshop

    Jaycelle requested me to change the color of her blouse from red to mustard. It’s easy with an app, that’s true. However, before all those algorithms and automations, there was a semi-manual way of doing it — using selective colors in Photoshop.

    Music: Tweakers by Brian Dys

  • Enhancing signatures in Photoshop

    Got a scanned or photographed signature with a messy background? Here’s an easy way of enhancing it to be in PNG with a transparent background.

    In Adobe Photoshop:

    1. Resize the long side of the image to 1920px or higher
    2. Image → Adjustments → Threshold
    3. Select black-only via Alpha Channel
    4. Make BG transparent and save as PNG

    Music: Scrap by Brian Dys

  • Contrast polarity

    I have learned a new term today in terms of light mode – dark mode in user interfaces: contrast polarity. Basically, a positive contrast polarity is a light text on a dark surface (light mode) — just like the physical black ink on white paper. Negative contrast polarity, on the other hand, is the reverse — dark text on a light surface (dark mode).

    Now, where else can you use this term? In CSS class-naming, of course!

    See the Pen Contrast polarity (light – dark mode) by Brian Dys Sahagun (@briandys) on CodePen.

  • UX Workshop with Elizabeth Baylor – Day 1

    The design team at PayMaya had the opportunity to have a two-day workshop with Elizabeth Baylor—a senior UX researcher at Google.

    Day 1 topics covered the following:

    • UX Process
    • Usability and Usefulness
    • Generative and Confirmatory Research

    The Curse of Knowledge

    We assume that others think like we do but that is only an assumptions. Here is where research comes in handy—to test our assumptions.

    UX Process

    Two keywords in UX: effective and delightful. People’s experiences in using a product or service must be effective (doesn’t waste time while achieving their goals) and delightful (makes them feel good while doing it).

    In UX Research, the effectiveness and delightfulness of solutions must be backed by insights and data. Success metrics is measured.

    1. Discover
    What’s the problem?    		2. Explore
    Conceptualize on the possible solutions
    4. Iterate
    Polish the solution    		3. Design
    Implement solution based on a concept that works

    When you’ve invested time in discovery and exploration and the solutions failed during implementation, it is easier to look into the implementation phase for improvements rather than attributing the failure due to a bad concept.

    During the design and iteration phase, you’re already testing for usability and polishing the solution.

    Usability and Usefulness

    During the Discovery and Exploration phases, it is better to test for usefulness, then during the Design and Iteration, the usefulness and usability. Test them separately in order to easily attribute where the problem lies

    1. Discover
    Usefulness    		2. Explore
    Usefulness
    4. Iterate
    Usefulness and usability    		3. Design
    Usefulness and usability

    Usability (Problem)

    Imagine an ice cream dropped and melting on the group—generally inedible and it’s a problem when the goal is ice cream consumption.

    Can users successfully reach their goals while using the product or service?

    Six to eight users (anyone) could be recruited to test the product—enough to uncover 85% of usability problems.

    Usefulness (Preference)

    Imagine your favorite ice cream flavor—each person has his/her own. Flavor, in this example, is a preference.

    In testing for usefulness, sampling matters. Recruit who’s in scope and know who’s out of scope. Identify your primary and secondary target users.

    Generative and Confirmatory Research

    Generative: Discovering new ideas

    • Literature review
    • Contextual inquiry (observation)
    • User interviews (open-ended, ethnographic)
    • Focus groups
    • Free listing
    • Card sorting (open, unconstrained)
    • Photovoice
    • Diary studies

    Confirmatory: Selecting right idea

    • Behavioral observations (quantitative)
    • Structured interviews
    • Rating and ranking tasks
    • Card sorting (closed, constrained)
    • Usability studies
    • A/B testing
    • Surveys

    Conclusion

    Test your assumptions.

    Put pain points to a test.

    Avoid self-centered design.

    You are not the user.

    Your solution is only as good as your understanding of the problem.

    Research’s effectiveness lies in the right sample and the right method.

  • On Dimensions of CSS in a Style Guide

    Absolutes

    On the concept of “absolutes”: If a color is the same as CSS named colors, name it as is or use the name itself:

    --color-red: #ff0000;

    If you “invented” a color or base it on an existing brand color, “invent” a name for it, but always attach the name of the basic color:

    --color-coagulated-red: #c93434;
--color-facebook-blue: #4267b2;

    Generics

    On the concept of “generics”: Use these colors as basis for primaries, secondaries, accents, etc.:

    --primary-color: var(--color-facebook-blue);

    Specifics

    On the concept of “specifics”: Use the “generics” to identify colors of UI elements:

    .submit-button { background-color: var(--primary-color) };

  • Beware the Pixel Police

    I saw what you did there. The padding between form fields is 24 pixels. Please remove 8 pixels from that gap. Make sure to use the components provided.

    Chief of Pixel Police

    Well… yeah… it’s your fault. Components are ready-built — why can’t you just use it with all its pre-built goodnes. Why take matters into your own hands and decide 24 pixels here and 32 pixels there. Don’t ever do that next time. If you do, make sure to just move 1 pixel at a time to avoid detection. My brain whispered to me.

    Beware the Pixel Police
    Unsplash Photo

    Can sarcasm be used for fun? Sure can! Actually, I don’t have any beef in using components, no matter how they scream for adjustments. But, hey, we are designers. We design — that’s what we do. We take, we break, and make it new again, in a different light. Better, I hope.

    Riding on CSS

    And this post is really about answering the question, “Can I really design in my browser?” Because I was thinking of using Figma in creating the visual design of the warning “Beware the Pixel Police”. But Figma also uses CSS, so I thought I’d just go straight up using CSS.

    Get the style

    You may check out the HTML and CSS in CodePen: