dabblet v1.1 teaser: Tab customization


7 Responses

  1. Justin Lowery Justin Lowery

    Hey Lea! I love the use of the arrow (triangle) on this drop-down as it provides nice spacing around the element, while still clearly signaling its relationship to its source. I feel you ought to use this with all your drop-downs.

    I do have to say that even though I LOVE Caslon's ampersand, I'm not sure if it fits well within the existing style of your design. It almost tends to create a unintended focal point, due to the typographic tension, in the design.

    I hope you don't mind me giving your critiques. I do it for a living, so it's just second nature. Let me know if it bugs you :)

    over 2 years ago

  2. Lea Verou Lea Verou

    It's Baskerville, not Caslon :)

    I've added the arrows in all dropdowns, the others just don't show in this screenshot :)

    You're right about the ampersands but I just can't bring myself to remove them, I love them too much! I did try to bring down their effect a bit by making them thinner and semi-transparent though.

    Your comments are very welcome and not annoying at all. But no comments on the UI?

    over 2 years ago

  3. Justin Lowery Justin Lowery

    Ah, you're right, never realized that Baskerville's italic ampersand looked so much like Caslon's. If you're going to stick with the more old-school ampersand, try Caslon's instead; I think it's a little stronger and cleaner, and you may like it more.

    "But no comments on the UI?"

    Sure, I can always critique something! Here's what I have for you:

    1. I think the drop-shadow on the drop-down is a little strong for my taste, and I feel the tab (source of the drop-down) should match in style a little more. In other words, the tab seems very two dimensional, yet it produces a three dimensional object, which could be a little jarring for a user.
    2. I would like to see the negative text-shadow that creates the illusion of inset text lessoned a bit. I come from the philosophy that flourishes or details should be almost sub-conscious, very subtle.

    Going off number 2, I like skeuomorphic design (which you've implemented in the above design), but only when it is very minimal or, like I said above, more sub-consciously present. I think when one tries too hard to create a metaphorical design, it can come off a little disingenuous or what some Europeans refer to as "kitsch".

    I think it's all about trying to preserve the user's suspended disbelief. If you make them aware that you're trying to create that metaphorical X, then the suspension of that disbelief is threatened.

    It's like some in our industry have said to somewhat antagonize the Apple-like, skeuomorphic, design direction: The UI should be invisible, it should just work and not be consciously present while the user is completing tasks. I tend to agree with that sentiment, but not to the point of complete minimalism, but to find the proper balance between what is familiar (skeuomorphs; e.g. a calculator app that looks like a calculator) and what is invisible (anti-UI or minimalist; e.g. a spreadsheet application).

    The former is easier to learn and operate as it mimics what is familiar so can be welcoming, but it can be quite limiting as you're inheriting some of the limitations from the physical device's UI. The latter has the highest learning curve because of the lack of anything familiar, and it can seem a bit cold and unwelcoming. But, because of the lack of UI, you are freed from the shackles of metaphors and can create an app with limitless possibilities.

    Wow, this has got to be the longest comment on Dribbble. Sorry, I guess I just ended up bloviating. Anyway, I hope some of this helps in some way. Can't wait to see what you got in store for us this time! Take care.


    over 2 years ago

  4. Lea Verou Lea Verou

    Um, when I said UI I didn't mean the design, I meant the actual UI for controlling how a tab behaves. :P

    Anyhow, your comments are very useful. You're right about the box-shadow, I wanted to blur it more but I forgot.
    As for the text-shadow, it's because in this screenshot there's a red button and it shows a lot there. It's much more subtle on the dark background. I'll change it for lighter buttons.

    over 2 years ago

  5. Justin Lowery Justin Lowery

    Lol, oops, sorry :( I guess I'm confused then. To me, UI does mean the design. From what I now gather, it seems you want me to critique the interaction design (aka. the behavior) of the above. For me to do that though, I'd have to know more of the context and intention of the elements in play. Better yet, a prototype is greatest way to evaluate behavior.

    Looking at this "teaser" shot, I'm not completely sure what this drop-down does exactly. After the reveal of the UI control (the drop-down), you have a field named "Template" which is pretty ambiguous, a checkbox with the label "see-through code", which I'm unsure what that means, and then, you have a button with the clear intention of deleting the tab.

    Template + See-Through Code + Delete Tab = … ?

    I'd be more than happy to critique the design, but for me to properly do that, I'd need more information than what is provided in the above screenshot provides. Sorry.

    over 2 years ago

  6. Prathyush Prathyush

    Instead of the dark black inset shadow on the "Delete Tab" text, I think it would be better to use a dark red. I am assuming that light falls 90 degree from the lightning on the other elements. In that case, why is only one side of the triangle shaded ?

    over 2 years ago

  7. Lea Verou Lea Verou

    You are absolutely right. That shadow was meant for dark buttons and I forgot to change it for the red ones.

    over 2 years ago

keyboard shortcuts: previous shot next shot L or F like