Category: Web design

I had spent so much time searching for the perfect WordPress theme on ThemeForest, but as I haven’t found one which would 100% reflect what I think about modern websites nowadays, I decided to create my own ultra-minimalist, mobile-first theme and made it available for free.

Why have I created my own WP Theme?

Although the previous WordPress theme I had been using at oldalgazda.hu was quite OK, somehow I didn’t like it 100%, just could not feel that it was ”my way” of building a web site. As oldalgazda.hu have been lately only a hobby project, it was crucial that the site I am tinkering with has a web design I really like, and nevertheless, it is simple enough that I could easily alter it and further develop however I feel like.

During recent years I have come across quite a few innovative and interesting WordPress themes such as Mila or Evolutive, but my biggest problem with these and similar themes that they are just too image-centric: should I eliminate images from the demo content, they just become way less impressive. On the other hand this article about website obesity had a great influence on me, so no matter how I really appreciate JavaScript stuff like Masonry, Isotope, etc., this time I wanted to create something really minimalist for myself: A kind of theme which only adds the absolutely, inevitably necessary amount of code to the actual content, so that I could concentrate on what really matters: the content itself.

What is the essence of my Sixpack WordPress Theme?

  • Ultra-minimalist: As the name indicates, the basic principle of this theme is that there cannot be more than six content items visible on the screen – for the sake of clarity and readability. Of course, more content items can be accessed by scrolling down the page, but the basic rule applies there too: no more than „six packs” of content should be displayed on the screen at the same time.
  • Tile-based: The content items are displayed as tiles. I think Windows’ Metro interface was a great innovation, as only the tiles can provide a consistent appearance independently of screen size.
  • Mobile-first: While developing this on a desktop computer, I was always thinking about how this or that would look on a smaller screen, so when I finished testing the basic stuff on bigger screens,  I just needed a handful of special CSS rules for small screens: mostly for decreasing the number of the simultaneously displayed content items from 6 to 2-3-4.
  • Forcing you to publish the right way: The theme will look at its best if every entry has a short introduction and a featured image, something you will eventually need when you post it anywhere else. Posts and Pages are treated in a very similar way, almost identically listed everywhere (except that for Posts rather categories are shown and for Pages, the page hierarchy is displayed). Instead of defining a header image or a logo for the entire site, you can use sticky posts to display important stuff such as the title and goal of the site, its logo and perhaps a short description.
  • Made for a real site: This theme was made for my own purposes. It has been tested how it works with real content, not just with a bunch of stunning images just to create a nice demo site. I am also planning to develop it in the future to better serve my needs, so you can make sure the theme just works – or will work someday :).

What other features are worth mentioning?

  • No theme settings page: On one hand it is very comfortable for the average web site owner to have a visual dashboard where many parameters of a WordPress theme can be customised, but I find it rather perverted that the web server has to query and calculate with these parameters additionally whenever it is to display a web page. If we are about to change certain variables almost like once in a lifetime, then these values should be hard coded somewhere instead. All in all, go ahead and edit the template if you need to change something.
  • JavaScript-free theme: the theme itself does not load any javascript file, neither contains any embedded JS code. Of course, different plugins might inject their own code, but as far as my theme concerned, you can generate your web pages with only the absolutely necessary amount of HTML and CSS code.
  • No logo, header, sidebar, widget: I don’t like that ”let’s cram these not so important stuff into the footer, sidebar, perhaps one day it might be of someone’s interest” approach, I think it is just a waste of screen real estate, as nobody will read and act on these kinds of additional elements. This is the reason why I have omitted these standard WordPress features from my theme.
  • No navigation menus: in the era of social media sites, it is quite rare if we can make someone browse our web site and read more entries of ours during one website visit, as most of the visitors will just come for a certain piece of content they have seen on a social media or a search result page. This is the reason why I have not built in any conventional navigation menus.
  • Site search pushed back: partly because of the above fact, partly because WordPress search function out-of-the-box is just far from being useful, I did not feel the urge to place an omnipresent search element on each and every web page.
  • Contact us element on search result page: I think it is very important that if someone had searched but could not find the right content, we should give them a helping hand, that is providing an easy way of getting in touch with us to find a specific content: therefore you can easily ask for help in e-mail if you click on a special ”contact us” link, displayed on search result pages if there are no results or just a few of them.
  • Contact us element on 404 not found page: similarly, I think it is very important that the primary goal of these kinds of pages is not to give you an error message but to provide you with everything which could be useful in finding your way on the web site. This is why the 404 page is rather similar to the site map page, also including a shortcut to ask the website owner’s help in an e-mail.
  • Not a general-purpose theme: minimalism and simplification obviously also means a reduced feature set, but as I mentioned the main goal was to create something to serve my blogging needs, so you should add quite a few other visual elements to use this theme for a web shop or a forum.

Other’s work I gratefully used for my theme

Free download of Sixpack WordPress theme

No matter whether you are planning to create a new landing page or an entire web site, these websites/collections might be useful sources of inspiration, showing the latest and greatest in web design and data visualization.

Themeforest / latest WordPress themes

http://themeforest.net/category/wordpress

WordPress is a leading light in contemporary web design/web site building, and Themeforest provides the biggest collection of premium templates for it.

Since 2011, when I registered on this site, I have spent countless hours browsing its Wordpress theme collections, looking for nice stuff for both clients’ sites and for my own projects. …and sometimes just for the sake of seeing something new, nice and interesting. I must admit this is generally quite a conservative collection of web design ideas, as these templates were made for being sold to as many buyers as possible. This is the reason why the popular themes are many times adhering too much to a kind of standard taste, and this is why it takes some time to find really cutting edge designs or novel ideas among all of these ordinary themes. Some tips for finding the most inspiring designs faster at ThemeForest:

  • Start with the list of latest WordPress themes. The list of most popular themes might be interesting only if you are a newcomer, or not dealing with web development on a daily basis.
  • Restrict your searches with ”buzzwords”, that is keywords reflecting the latest trends and techniques, like masonry, isotope, megamenu, infograph, whatever. Keep in mind that as these words become mainstream, so they will become quite useless. Think about parallax (950 templates) or even the keyword: ”responsible” (more than 4000 templates).
  • Unfortunately, designers are generally concentrating on portfolio sites, fancy home pages, and one-page templates, so it is quite hard to find web designs with interesting ideas about organizing content and showcasing data. This is why whenever I open a template demo site, almost the first thing I do is to check out the Blog section and see what happens if the nice pictures included in the demo data set are not influencing that much the overall look and feel of the template.
  • If you have found a nice template, it’s usually worth checking out the other templates of the same developer too, they might have some more inspiring web design ideas showcased in their portfolio.

Some WP templates I really like

I discovered these templates a few years ago, and I think they have stood the test of time (and most importantly they are still sold at ThemeForest):

This template is rather about information than design, featuring a big search form as the centerpiece of this template:

And finally an other minimalistic theme never sold on Themeforest – this is just an evidence of the fact that there can be found inspiring template designs outside ThemeForest too (although they are much harder to be found on the interweb):

 

Unheap.com / jQuery plugins

http://www.unheap.com/

From a jQuery plugin which makes your browser fart when scrolling (NSFW), to algorithms generating nice backgrounds like the one you can see as the featured image of this posts, a wide range of different jQuery plugins are aggregated to unheap.com – a tidy repository of jquery plugins. There are almost one thousand items listed on this site, like these ones which showcase:

… and many more jQuery plugins and functions to enrich your custom web designs or even create an entire landing page with. There are also a few better-known plugins gathered at this site, such as Isotope or Lettering.js, but the majority of the plugins are quite experimental – and therefore quite inspiring too.

Similarly to ThemeForest, Unheap also provides invaluable help with its easy-to-use interface to browse through the lists of many different plugins which have been gathered manually and listed in a uniform way. The demo links lead directly to the developers’ web page, and similarly to ThemeForest portfolios, it is also inspirational to browse through and see the other projects of these jQuery developers.

D3 Gallery

…or everything that is made with D3.js library, or made by Mike Bostock, a key developer of D3.js data visualization library, and also a former leader of complex data visualization projects and interactive storytelling articles at New York Times:

http://bost.ocks.org/mike/

It is more about data visualization than web design, but for every web developer or online marketer who deals with visualizing information, the above examples can be very inspirational too. Not only when it is about building a web site but also when the data, we are working with, have to be presented in an outstandingly new way.

There might be a lot of other web sites showcasing the latest trends in mobile and web interactions. It’s sometimes just too hard to come across them, so I am quite sure that there are a ton of web sites out there I should be aware of.