It is crazy to think about how far the ‘webpage’ has come. As Erin Kissane (2013) notes, much of the designs that we find on our computers and on websites are based on and borrowed from print work.
From print to the web
If you look behinds the scenes into a webpage created on WordPress for example, you can see how all the little icons used are adapted from print editing materials, just as Kissane (2013) describes.
In the screenshot above, we can see how they use a speedometer icon to show us where to access our dashboard; paintbrush icons to show us where to edit and customize our site; and a text bubble to show us where to find our comments.
However, with time has come more developments to the website world. For one thing, there are multiple devices from which we can access websites—that is, not just from our computers, but also from our phones, tablets, and more. This means that online contents have adapted into a malleable, “liquid” form that is no longer confined to traditional page-shaped boxes (Kissane, 2013).
This is something that I’ve recently been exploring with my website—how my contents rearrange themselves based on the device I use. What I’ve come to realize from this, and just as Kissane (2013) mentions, is that I should move away from this idea of designing pages and instead focus on producing malleable chunks of text. Not only does it stop me from fixating over the formatting of pages on every device imaginable, but it encourages greater “publishing efficiency” in the development of my site.
Gertz (2015) builds on this as well, noting that content management systems like WordPress and Squarespace are programmed to fit our content no matter what. They don’t need us to get our content in to them early so that they can figure out how big to make the boxes and whatnot. Everything just fits.
A matter of collaboration: User experience (UX) and user interface (UI)
On this topic of formatting and design, I want to give at least some attention to the arrangement behind websites: user experience (UX) and user interface (UI).
UX, as explained by Gertz (2015), encapsulates the how it works aspects of a website—layout, interaction, info architecture, and more. Meanwhile, UI covers the how it looks aspects—typography, colour, photography, and so on.
The user experience
I like that the layout of my site is clean and organized. It may be a bit plain for some readers, but my thoughts at two in the morning don’t quite scream bold and loud. Every few posts, I choose to incorporate photos to make things a little more interactive and fun. To an extent, the layout follows that of print content with the columns and text hierarchy used.
In the future, I think it would be great to add more buttons around my site to boost the interaction, such as a ‘Contact’ button. I still have that ‘Get in Touch’ button that came with the website layout, but we all know that it doesn’t take you anywhere. I have yet to take it down and will do so eventually.
The user interface
Like I mentioned earlier, my site is very clean and minimalistic in design. I only use two colours throughout all my posts (except for in images and whatnot)—an off-white background and black text. The colour contrast in part with the sans serif text makes for a fairly easy reading experience.
If I could add one thing, it would be a third colour to my website’s palette to compliment or accent the off-white and black contrast. It could be through the simplest and smallest form of a button, but I think that it would give Two A.M. Thoughts a much needed pop and a hint more personality.
References
Gertz, T. (2015, July 10). How to survive the digital apocalypse. Louder Than Ten. https://louderthanten.com/coax/design-machines
Kissane, E. (2013). Contents may have shifted. Contents. https://www.contentsmagazine.com/articles/contents-may-have-shifted/
Skip to content
Leave a Reply