It's pretty obvious that a fundamental design sensibility is clearly missing; heck, I don't even have a logo. But that's to be expected since the CSS styling at the moment is mainly scaffolding and placeholder. So far, I've made mock-ups and talked in generalities about how things should be structured visually but that doesn't begin to approach getting into the weeds of design.
Where's the color palette? What about font style, line spacing? What types of feeling should looking at the app evoke? if any? Does the UI feel sluggish? Is functionality apparent? Does the visuals feel spacious or cramped? And so on. Many of these questions are answered, or begin to be answered, in the process of logo design.
A logo is the thing that people see before they see your app. It's on the downloads page, the digital storefronts, the homepage of your site. It can both be center stage and only a thumbnail. As such, a logo must be a visual microcosm of your product; its look, feel and colors set the stage for the rest of the styling. So what kind of stage did I want to build?
Internet comments remind me of public writing-- mainly the obnoxious messages scrawled on bathroom stalls, carved into tree trunks or quickly spray painted on bridge underpasses. But I don't think internet comments have to have such a negative connotation. There is, after all, a lot of visually appealing public writing like murals, sidewalk art, and vibrant street graffiti. Out of those three examples, sidewalk art stands out to me as the most appealing analogy: it's playful, communal and washes away easily much like the churn of the internet ensures most comments are never seen, read or, if so, quickly forgotten.
With a visual motif chosen, the question turns to the name. What should it be? Thus begins the process of association + analyzing core functionality. Names arise out of actions/process and the obvious action of the web app is typing comments, messaging, chatting, talking. The theme is sidewalk art; sidewalk art is created with chunky chalk pieces. Visually, they are colorful and iconic already. Further, 'chalk' sounds like 'talk' allowing cheesy puns and, as someone recently pointed out, chat + talk = chalk. Perfect! The name is linguistically flexible (if you strain, lol), it evokes a strong visual/tactile response and it meshes exactly with the theme.
With a theme, a name, and a clear visual requirement of horizontally scrolling rectangles of content, it was time to start the artistic process. First up is the all-important color palette; it not only provides visual cohesion and consistency across designs it also immediately sets the tone. Playful vs serious, attention-grabbing vs sedate, edgy vs predictable, catchy vs readable, etc. etc. Below are the final contenders trying to balance those considerations:
With the palette in hand, then begins the stylistic experiments; initial work was non-digital media before moving to digital vector and raster mediums.
In the end I settled with two landscape-orientation layouts for the 'horizontal scrolling tabs' emphasis. From a time constraints perspective, I ended up refining the layout seen in the third image but I still would like to return to exploring the possibilities of the layout in the second image. Further, the square-based layouts seen in the right-hand side of the first image hold helpful visual ideas for creating mobile-minded logo icons where visual space is at a premium. The final two logo variations (for now) are below:
Now with a logo as a guiding star, the process of tidying up and styling the layout can begin. The results of that process are below, grouped into four, single-color dominant themes: gray, tan, blue, white:
After some usability tests on desktop and mobile, I tweaked the styling further which led to the final--as of now--layout themes below.
*note about output color - the layout tab colors change with various app refreshes--page reload, new thread created, new thread loaded, etc.
With those final touches, the first draft of the app is done. A live demo can be found through my github page. Of course, the key phrase is "first draft"; with any application, particularly one aimed altering an established software activity, there is always more to do to meet the standard "full featured" expectations of users. Even setting aside such "lofty" goals, there are still plenty of functionality and technical issues left to address. Let's take a look at those next.
Next.