Brian Dys

Author: Brian Dys

  • Are there professional Web designers who don’t know to use Photoshop?

    What are other web design tools available out there other than Photoshop?

    Web design has evolved from being focused on graphics down to being focused on content and experience. Even imagine the time when web design was done using Flash.

    This is one of the reasons why in the past, that a photo-editing application like Photoshop was a perfect tool for web designers-we can create elaborate graphics and at the same time export HTML and CSS.

    Web designers can still choose to do it that way, only that there are already a wide variety of applications that specifically cater to web and mobile design – and up to a certain point – development. Even Adobe has XD to contend with Sketch and InVision DSM.

    So, yes, there might be web designers who didn’t find a need for Photoshop in any of their web projects. And that’s ok.

    Originally published in Quora

  • Is it required to follow a design guide when designing a product? Isn’t it more important to give the user a better experience than sticking to the design guide?

    Ideally, design guides, brand guidelines, style guides, etc. are based on research.

    They did not appear in a vacuum.

    Collaborate with the people who made the guides and find out if you are aligned with the same objectives.

    The user and business objectives are the guidelines for the team, whether in UI design or frontend development.

    Originally published in Quora

  • What’s the difference between UI design and UX design?

    These are the Elements of UX according to Jesse James Garrett:

    1. Strategy – user and business objectives
    2. Scope – content and functional requirements
    3. Structure – Information Architecture and Interaction Design
    4. Skeleton – Information Design, UI Design, Navigation Design
    5. Surface – Sensory Design (e.g., Visual Design, Audial Design)

    UI Design practically comes after having objectives and requirements. It constitutes the design of the interface based on Information Architecture and Interaction Design.

    The Elements of UX shows the abstraction of what constitutes UX Design. It involves the whole process of research and testing at different planes and at different stages of the process.

    Now, must a UI designer dive right into UI design without referring to any previous work done such as objectives and requirements, information architecture and interaction designs?

    Originally published in Quora

  • Should buttons become lighter or darker when hovered over?

    What is the mental model of the user interface—or at least the UI buttons?

    The Feedback Aspect

    Just like with most physical buttons, if a user wants to press it, he or she touches it. The feedback comes from its look and feel (it looks like a button; it feels like it can be pressed by actually pressing it).

    With UI buttons, a user could get feedback from the following:

    • Visual Design
      • It looks like a button
      • It feels like it is clickable
    • Accessibility
      • It says that it is a button

    It Feels Like it Is Clickable

    With some techniques in Visual Design, a designer could reinforce the feeling that the button functions as expected.

    The Light Source

    Does the button budge up when hovered? Or does it budge down?

    If up, then the shade becomes lighter as it moves closer to the light source—which is naturally above us (in the real world). If down, then darker.

    The LED Light

    Does the button light up when hovered?

    If yes, then the shade becomes lighter—whether the light comes from the body of the button or simply around the button.

    You may combine those different techniques—but basically, those are the considerations why the shade of a button would be darker or lighter when hovered.

    Please note that for devices with pointing device, the mouse changing to a pointer is enough feedback for the button to feel like it is clickable.

    However, for touch devices, to feel like it is clickable, a user will actually press it.

    Originally published in Quora

  • RE:Creation No. 1: Google | CSS (Round 2)

    Summary

    • Style for Usability: Interactivity
    • Style for Visual Design: Colors & Graphic Elements of Groups
    • Style for Visual Design: Layout

    (more…)

  • RE:Creation No. 1: Google | CSS (Round 1)

    Summary

    • Style for Usability of Interactive Elements: Active Area
    • Style for Visual Design: Colors & Graphic Elements of Individuals

    This is the first round of Cascading Style Sheets—CSS for short. CSS is a Style Language that defines the visual design of an HTML document. This single responsibility of CSS makes the structured content of the document reusable in different contexts.

    Active Area

    Interactive Elements (IE) in a web page pertain to elements that can be interacted upon. Common examples of IE are links, textboxes, buttons, and other form elements. A way of improving the usability of IE is by optimizing its Active Area (AA) so that it is big enough for clicks and taps. A good rule of thumb is having a minimum dimensions of 44 x 44.

    Linked texts such as navigation items could have an optimized active area by having a padding. Form Elements such as textboxes and buttons, on the other hand, could be styled with a legible font size and a height.

    .secondary-navigation a {
    display: inline-block;
    padding: .75em 0;
}

.text-search input {
    height: 36px;
    font-size: 1em;
}

.search-actions button {
    height: 36px;
    font-size: 1em;
}

    Colors & Graphic Elements

    This part of the activity is where we would style the elements according to the visual design or look of the web page. The colors pertain to background and foreground color—in the case of a button, the background color is the color of the button and the foreground color is the color of the text.

    Graphic Elements include borders, shadows, lines, among other things that make up the look of the element.

    .account-action a {
    background-color: blue;
    color: white;
    text-decoration: none;
}

    Demo

    See the Pen RE:Creation No. 1: Google | CSS (Round 1) by Brian Dys Sahagun (@briandys) on CodePen.

    Next Round

  • RE:Creation No. 1: Google | HTML (Round 3)

    Summary

    (more…)

  • RE:Creation No. 1: Google | HTML (Round 2)

    Summary

    • Convert the marked up groups into <div class="group-name">
    • Instead of <div>, mark up the group of form elements in <form>
    • Mark up the text nodes in <div class="text">
    • Add class attributes to elements that need to be differentiated

    (more…)

  • Timeline Visual Design on Article Dates

    One thing to consider when designing the visuals of a timeline is that the highlight (in the form of a bullet point) must be on the date.

    See the Pen Timeline Visual Design on Article Dates by Brian Dys (@briandys) on CodePen.

  • RE:Creation No. 1: Google | HTML (Round 1)

    Summary

    • Mark up the structure in HTML
    • Mark up the groups in HTML
    • Mark up the individuals in HTML

    (more…)