blog

May 16, 2018

Cafe 2.0: most appealing ideas.

This may come in handy:

    Recently I've mentioned of another re-design I made. Currently I think I've completed the task and would like to write "a few words" on what excited Me most.

    A loose insight: every time I work on a project (websites in particular), at some point down the road I am surprised that the opportunity of acquiring some new knowledge often emerges by itself, "out of nowhere". I like to learn new things but it is still amazing that they can come to You even if You didn't expect it to happen. This is one of the things I especially like in passion: that You don't wanna confine Yourself to things which You've already worked out and possess good knowledge of. Instead You feel a tangible drive to explore the new, to put new challenges before Yourself every time the opportunity arises.

    There is some funny thing about it, because as a result You often choose the more difficult way: more time-consuming, more effort involving, etc. But sticking to something which "just works" and brings nothing new - isn't so exciting (in fact, it is not exciting at all :) ) . So I am still amazed how passion can stimulate, motivate, energize, or just drive You to another "checkpoint" on the way of Your developm... adventure :) .

     

    Speaking of Cafe 2.0. The most exciting ideas in this case are...

    1. ...the start page. (click pictures to enlarge)

    Thomas Cafe 2.0 - start page.
    Cafe 2.0 is a website presenting one of My podcasts. This particular one is on several various subjects. It crossed My mind that it would be great to depict the whole spectrum of existing episodes in a form that could be primarily visual and easily give You a notion of the program's growth and episodes' diversity.

    So I shaped it in a form of a column-like layout, consisting of square thumbnails with titles and short excerpts describing each episode. Each column is dedicated to a particular subject - their labels are always visible during page scrolling so You can always easily tell to which matter each episode belongs. Besides it is easy to tell what is the newest episode within a particular subject.

    What I especially like in this way of presenting content is that it is great visualization of how the podcast is growing. First time I can admire it so nicely :) .

     

    2. 'Bokeh-like' video background.
    Thomas Cafe 2.0 - post page.

    Some time ago I've seen some Android app which serves as a dialer, displaying contact pictures while making/receiving a call, and so on. What drew My attention was the way how this app presented contact pictures: in a form of centered images placed on the background made of their bigger, blurred and maybe partially dimmed version. It looked quite interestingly and added some depth and elegance to the overall look.

    It impressed Me then - and inspired later, when I remembered that app while conceptual thinking on how Cafe 2.0 would look like.

     

    3. A pull-out floating menu.
    Thomas Cafe 2.0 - pull-out floating menu.

    One of the neat ideas which leaped to My mind at some point was to make a menu usually hidden, leaving visible just its part (which would serve as the menu opening handle, so to speak). As a result there would be more space to develop (besides it's a nice move to have the menu a little bit surprising :) ). So I made it that way, attaching some animations corresponding to pulling the menu out and backward. On top of that I made it constantly present (fixed) on the site while scrolling to make navigation always at hand.


    4. Nice details.
    Besides there are some nice details which I also find appealing - like:

    • subtle social buttons (dimmed through decreased saturation - so they didn't lose their colors, like it would happen in case of turning them into grayscale),

    Thomas Cafe 2.0 - subtle social buttons.

    • Popular Posts with animated hover effect, illustrated by default thumbnail in case of articles with no pictures,
    • custom scrollbar (finally CSS-customized scrollbars are available again :) !);

    No comments:

    Post a Comment