Design
UI
UX
Featured
With further plans on extending the types of content to be delivered onto this site, I’ve decided to do a redesign on the site with inspiration from game sites, news sites, and artwork portofolio sites.
Designs from the inspiration that I’ve mentioned were used as a guide to make the user experience better, such as the way news sites such as Metropolis utilizes layout spaces for large displays to maximize the placement of the inner content of posts, the way art sites like Artstation has a fullscreen image viewer layout to view a set of artworks that are posted on a single post.
Site layouts aren’t the only one being changed during the redesign process, visual design are also changed to reflect the character of the site owner, focusing more on the no-nonsense straight to the point design with hard edges on corners of elements, one elegant family of sans serif font, and consistent UI language to pack things up.
There’s a lot of things to unpack about the design process of the redesign, so below are the points to deliver regarding the overall design process.
Let’s start with the problems that surface from the previous design, the previous site borrows a lot from GNOME GTK and Adwaita user interface on the font design and navigation.
The previous design have too much unused empty space especially for text excerpts and artwork viewing which reduces the efficiency of communicating what’s necessary to the viewer. This is added with a large font, non-condensed headings, and large visible margins and paddings accumulate to make the site not that ideal for desktop users.
Designs between pages also have issues where the all of the layout are following one design using blog post as the template, which reduces distinction between pages and reduces efficiency in space utilization targeting pages for front page, blog post, and artwork.
Purely from visual shapes and colors alone, there’s a lot things that needed change due to the process of rebranding and refocus of what I’m doing and will be doing. The previous design has a personality that clashes with the new vision, in which is bland, less serious and less efficient.
With these issues in mind, I look around other sites for various methods on deliver content specific to their niche. The kind of niches that I’m researching are game company sites, news sites, and artwork portofolio platform sites. The first inspiration came from a game company named MonolithSoft. They’re a game company specifies in the development of large scale JRPG and development support for various game studios within Nintendo, they’re known as the house that produced Xenoblade Chronicles series and co-developed both The Legend of Zelda: Breath of The Wild and Tears of The Kingdom.
The most striking part is the first thing you’re going to see when visiting the site’s homepage, in which MonolithSoft did design to tell the visitor of the company’s latest project up front with the key artwork of said project. Besides the key artwork, there’s also the navigation bar on top and a news strip on the bottom which serves as the 2nd navigation avenue and 2nd quick glance on new posts posted by the developer.
These visual components are assembled in a certain way for the visitors to ease in to the site with upfront information and reduce unnecessary information load. The key artwork have a prominent presence within the homepage for the visitor to sit down and immerse into the key artwork, not leaving the hard work of every member of the development team to waste.
After MonolithSoft, the next visit is Square Enix. Which is another company that develop JRPG with grander scale than MonolithSoft, their flagship titles are both the Final Fantasy and Dragon Quest series.
The front page of Square Enix’s site has a different approach to MonolithSoft in which they put all of the articles upfront on equal size taking turns to grab the attention of the visitors of every news pieces and new games that Square Enix has to offer. They cleverly reduce the visual load by making all of the post links larger, supplied with key artwork and an optional short excerpt for more clarity.
These design are made to make sure visitors can take time looking at what kind of products are available in the same vein of looking at a game store and searching which new flick of games to play by looking first at the cover.
Next up is to look at specific design for blog posts, this time I take a look at Metropolis Magazine, which is a site focused on everything related to architecture.
This design for posts by Metropolis is made to ensure the reader to strictly focus on the content and nothing else. These reduced and seamless white space in the sides of the page are made to ensure that the article page to be seen as a continuous unit not disturbing the reader’s immersion to their continued reading.
The larger text space make way for more dense information transmittence for the reader to take at a glance, this reduces the number of scrolls needed to reach the end of the article. Those design decisions are specifically helping desktop visitors to be able to enjoy reading within the site to the fullest.
Since this site are not only for blog posts but also a place to put art portofolio within the site, I also need to take a look at sites specifically made for artwork. On this occassion I already have experience in publishing my work on ArtStation and I do find the viewer user interface to be intuitive.
With the artwork taking space left first and with a larger size, this will ensure viewer would focus on the artwork first only then to look at the artist’s comments about the work. Next up is that both elements are separately scrollable to make sure both elements’ information are easily manageable by the viewer.
After the research process done, the next step is to quickly redesign the website from scratch and see the result of the design as fast as possible. This is only possible with the technology provided by Jekyll to build static sites and hosting them locally through Docker.
Layouting are done in both standard HTML and CSS, with minimal use of javascript for actions that both HTML and CSS can’t cover. I did implement all of the site’s layout and features from scratch.
Without much pep talk let’s just get down to what’s changed within the website.
Combining the design from MonolithSoft and Square Enix I’ve built a front page which both put forth the most important information while also immersing the visitor to enjoy the labor that is done on each spotlight on the topmost of the page. This ensures the visitor to get up to speed on what kind of work I’ve been doing.
Both blog post and artwork get a place within the scroll down with both having the artwork taking the most of the space to entice visitor with the visuals before getting into the link of both the blog posts and the artwork.
Not only that, clever use of textual and visual language helps visitor to know which is which within grids of links supplied within the front page.
With larger textual space for large screen visitors and seamless page to bacgkround transition, content of page takes precedent over all other avenues, putting you and the post with nothing else inbetween.
This ensures that you can absorb information faster by leaving out potential distractions and reduce you from feeling tired.
With a whole new layout, art projects are now able to shine more in which the artwork takes the focus making it easier for viewer to appreciate the artwork.
Visuals aside, the artwork page got a new page structure which can support more than 1 artwork to be viewed within the gallery.
Layouts aside, colors also got an overhaul with deep dark and a slight of red takes presence within the site, putting forth the attitude of it’s owner. Aided with various streaks of shapes resembling the blade of a certain fiction, enlightened with a breath of energy residing within powers the domain of this site, making this as a landmark of this very domain.
Site’s asset storage has been moved over to a faster storage solution giving visitors less wait time for the page to fully load, this applies to image resources which took most of the page’s wait time. Faster load times helps user retainment by reducing inconveniences on many sections as much as possible, one of the pain points would be the loading times between pages and the new strategy helps a lot on completing this objective.
© Megumumpkin
License: “Introducing the New Design, with Focus on Maximizing Content Delivery” by Megumumpkin - CC BY-NC-ND 4.0
Each artworks/articles have their own license (read footer of each article).
If you want to use content from the works I've made, please go to the Licensing page.
