Friday, August 01, 2014

A new design for MarkKB’s Web

It’s been about four years since the last minor redesign of this site came out, and five since the last major redesign. And sure, since then I’ve released small changes, like changing table styles to look niceradding icons and sections to the sidebar, placing rather large download buttons on my software pages, and adding ‘feature boxes’ to explain key features, but for the most part the overall design has stayed the same.

Behind the scenes, though, I’ve been working on a complete redesign of the website. And after lots of experimentation (and quite a bit of procrastination on the account of updating all pages to fit the new design ^^; ) I’m finally ready to reveal the fourth major redesign of this website!

Below you can see a picture of the Software Updater page showing off the new design:


Key changes

  • slimheadSlimlined header. The website logo has been shrunk down, and the section links are now on the same line as the logo.

    Mostly this was so the site could have a smaller header, so more room could be devoted to content. But it also was partially as a result of moving the section headers to the content section of the page, which I detail below.

    The ‘tabs’ in the header also have bigger text, somewhat more padding, and now use Trebuchet MS instead of Tahoma.
  • v4sidebarNew sidebar design that also replaces the “breadcrumb” navigation bar. There were a few reasons behind this redesign:
    • First, to make both the sidebar and the hierarchy of the site more visually distinctive. It was easy to miss the old text breadcrumb bar (which was solely one colour and contained no icons) and the sidebar (which was mainly a plain list of links for subpages and maybe news for the current section.) The new sidebar more readily demonstrates where you are in the website, as well as bringing attention to the sidebar (and thus the subpages of the section you are in.)
    • Secondly. to reduce redundancy. The sidebar often also included “Home” links, which were basically the same as clicking on the section’s name in the breadcrumb bar, and sometimes included links for the section above the current one (for example, Programs). (This also means when I copy-paste a section I don’t have to replace as much HTML with the relevant things. ^^;)
    • Third, as with the header, the new sidebar design takes up less space, meaning things like the News section or links to RSS/Facebook/Google+ pages are more prominent. As the breadcrumb bar is also gone, content gets more space as well
    • Lastly, one of the things I liked in the old version 2 design was the abundance of colours and icons, and the version 3 design removed most of those of the icons and the variety of colour in, for example, the breadcrumb bar. I’m very happy to bring that back with version 4.
  • Section headings (like “Project Nelson” or “Backspace”) have been moved down to the content section of the page. While I experimented with small versions of having the section heading side-by-side with the site logo like in version 3, I decided against it for the following reasons:
    • v4headingHaving them side-by-side with the main logo could be confusing as it places it above the header’s “tab/link bar” that lists the main sections of the website, implying that all those sections are “under” the page heading, hierarchically speaking. People who followed a link to the Backspace webcomic or to Project Nelson or to my fanfics might think the “About” link lead to a page about Backspace or Project Nelson or my fanfics, or that the “Downloads” lead to wallpapers or to PN’s download page. People might not even check the sidebar because the visual hierarchy implied the main section bar “belonged” to Backspace or Project Nelson, rather than to the main site.

      Even if people didn’t get confused, the old design meant it might have taken a few extra seconds to process the layout hierarchy of the site (that the header links were for the main sections of the overall site, and the sidebar was for subsections). The new design makes it unambiguous.
    • People might miss the name of the section if they ignore the header and jump directly to the content (which a not insignificant amount of people do.)
  • gibraltarpageProgram pages have a sleeker design. I’ve divided program pages in half, with the main area providing a description of the program, and the grey bar on the right displaying the download button, screenshot, system requirements, and links to additional info. This means that information on the page is a lot more organised than before, and looks a lot better and less ‘overbearing’ than the previous design.

    The list of key features are now displayed in rows rather than columns, which makes them look less busy and squished together, and are now light grey with dark grey borders, which help further separate them from each other and the rest of the content.
  • keepuptodateProgram pages now link to RSS feeds and and social media pages in the sidebar. Links to the program’s RSS feed, appcast, Facebook page and Google+ page are now in the new “Keep up-to-date” section of the sidebar for each program. (I initially did this for the Backspace webcomic back in 2011.)
  • Project Nelson 1.0 Build 020’s version page has been redesigned. Previously, it contained a plain changelog, which can be rather difficult to sort wheat from chaft with. The new page contains, first, a list of major new features, each one with a screenshot, then a full list of both major and minor new features and major changes. The changelog is still available by clicking the Changelog link in the sidebar.
  • The Links section has been reorganised and divided into different pages for each section. There is now three sections for links to stuff I like: Technology, which links to tech news sites and pundit blogs, Webcomics, which links to webcomic sites I visit and webcomics I read, and a new section called Software, which lists useful software that I like to use.

    All sections also have new links added, and quite a few links have new images.
  • Links pages redesigned. The Links pages now layout links in rows instead of columns.


One last thing:

It’s somewhat appropriate (although entirely accidental) that I should release this updated design in this website’s tenth year online. Way back in 2004, when I uploaded the first simple version via my intermediate school’s FTP program, I never imagined it would be anything more than somewhere to stuff things about me and what I was interested in to. Now it harbours my software, art and writings.

And that’s not all I have planned for it! (But that’s something to discuss in another update. ^^ )

Until next time!
Mark Kéy-Balchin