Jr Designer thread - Wordpress edition

Out of context: Reply #6

  • Started
  • Last post
  • 8 Responses
  • cherub0

    I'm getting bogged down in handling a color schema for:

    followed links
    unfollowed links
    highlight upon hover over links

    and the rest. I asked the AI about this, I asked it to show me how to come up with the color schema for desktop, and for mobile, just so I could see how it's supposed to be.

    It gave me the mcdonalds's website as an example of what the schema is supposed to look like on desktop.

    www.mcdonalds.com

    It gave me socialbee's website as an example of what it's supposed to look like on mobile.

    https://socialbee.com/

    The AI recommended to handle hover like this:

    "Alternatively, a simple underline or bold effect on hover can be combined with the color change to emphasize interactivity without overwhelming the design."

    I have some questions. I see that mcdonalds site has all links underlined. Is that common practice if you are designing for desktop? Also there are no hover effects when you hover over the links, and visited links appear to be same color. (although all links are blue instead of the usual black used in the body)

    I see that socialbee has mostly buttons, where I would have expected links to be. That makes sense because buttons are naturally bigger than text links. Is this common practice when designing for mobile (depreciate all links to convert them to buttons).

    Also, there don't appear to be any followed buttons color changes upon hover either.

    For my website, should I use highlighting or a different text color for followed links at all? Neither website above uses either, that i can tell.

    What about bold? Is that a good effect to have upon hover over the call to action?

    cherub 0Permalink
    UpvoteDownvote
    Flag
    • No to bold on hover. No to changing everything to buttons. Underlines are the historical style for a link. :visited colour is helpful when many links exist.monNom
    • :hover is only a feature on desktop, so may be removed for consistency with mobile.monNom
    • Standard html: link blue and underlined
      Link:active (clicking) - red, underlined
      Link:visited - dark blue/purple, underlined
      Hover: no-change, cursor changes.      monNom
    • Don't bold on hover as that will shift the text around your link, possibly causing reflow of text, and feeling generally awful.monNom
    • :hover and :focus can treated the same; :focus is relevant to touch-screens where :hover is not.evilpeacock
    • Ok underlines are the historical way to do links, so that's sorted. But I thought long taps = hover on mobile. When I'm scrolling down a page on mobile,cherub
    • Asking AI is likely a waste-of-time. Hit up good references like CSS Tricks:
      https://css-tricks.c…      evilpeacock
    • sometimes I do accidentally "hover" over something by long tapping. If I remember correctly, a few sites do that.cherub
    • ah, the css tricks is a good one thanks.cherub
    Show [[ numHiddenNotes ]] more notesAdd Note
    SaveCancel

View thread