Personal Blog – UI Concept

TL;DR An initial UI concept for a personal blog. View here.

I had some free time this evening, so I thought I’d have a go at mocking up a concept I thought of this morning.┬áThis is an initial attempt at creating a clean, and simple, UI for a personal blog.

The focus is on the article titles, rather than clogging up the view with large snippets of each article. You could argue that this may affect the number of people clicking through to read the articles, if they can’t read a little about them first. However, if the focus is made on making article titles engaging and inviting, as they should already be, this shouldn’t be an issue. Mobile screen real estate isn’t as plentiful as their desktop counterparts, so it makes sense to focus on the important information, in this instance it’s the article titles.

As our eyes head for the top of the screen, why waste that space with the navigation bar. I think the navigation bar would not only look better, but logically it could serve a better function at the bottom of the page. People are fairly familiar with seeing things like tab bars on the bottom of the screen in mobile applications, so it’s a fairly safe bet they’ll be able to use it despite it’s relocation. When the ‘hamburger’ menu icon is activated, the full-height menu slides up from the bottom, taking the navigation bar with it.

At the bottom of the menu view, we have a search input. When this search field is targeted, the other menu items are hidden and the search input field takes pride of place at the top of the menu view. Live search results are shown as the user types, with the matched keyword emboldened in the results.

I’m personally a big fan of navigations at the bottom of the page, I think it works well and certainly breaks from the generic visual mould which a lot of the web seems to be pressed from these days. If only to collect some metrics, a variant on this design could be created with the navigation at the top of the screen. These two designs could then be A/B tested to see whether or not the navigation position does have a bearing on the level of user interaction.

This project is visible on my Behance profile, here.