Elysian Reviews is a highly bespoke blog, both design-side and architecture-side. The brand leans into deep purples and a kind of cosmic stillness stylistically, to which end gentle background animations, deep colours, and gentle ‘breathing’ animations over interactive elements lend a strong sense of atmosphere.
Architecture-side, Elysian Reviews posts two main types of content: game reviews, and screenshots. Each is a custom post type, built around the specific data and formatting needs of the medium. Game reviews contain a Wiki-style system that sits in the sidebar, and screenshots are formatted with yet a different layout emphasising the image itself with a smaller dependence on formatting metadata. The possibility for expansion into gaming guides leaves the possibility of a third type of content on the table in the future.
Project Scope:
- Create a bespoke homepage in homage to the design of Steam, a platform well-known and often used by gamers.
- A deep, cosmic and atmospheric design with bright highlights, leaning into a classy but very gamer-y aesthetic where RGBs and atmospheric lighting/light ‘strips’ are a frequent feature in aesthetic setups from computers, to desktops, to desk and room setups.
- A wkipedia-style infobox system to occupy the sidebar of game reviews.
- A comments system, with pin, edit, and reply/thread features.
- A gallery system for screenshots.
- Blog posting and management.
- Social media links and contact forms.
- FAQs.
Design Choices
Small but noticeable design choices elevated this website markedly, such as gentle ‘breathing’ hover states on images, share icons lighten when hovered, and the header blurs out content behind it to prevent visual competition with the navigation elements.
Bespoke Wiki System:
A blog first (in function), Elysian Reviews has mature categorisation from the back-end and sensible navigation, with the added (bespoke) wiki system populating the sidebar of each game review.
Post Archive
The posts archive (blog page) has a menu for filtering posts by their categories like you’d see on Steam curators, and the new feed appears on the page via AJAX without triggering a full page reload.
SEO and User Experience
For SEO, posts have names as long as the writer desires to try and capture search intent, but on the frontend this is only show in the post itself. On the archive page (as seen in the above screenshot) this is replaced with a vanity title to balance (and maximise) SEO benefits with UX (User eXperience).
Performance:
Elysian Reviews is a rather image-heavy website, containing extra weight due to the background animations on every page. Originally, this was implemented on a per-page basis but it had too much of a drain on performance. Loading from the header had the same issue, not surprisingly.
A happy balance was found by loading the effect in the site footer, so it was loaded on every site page as standard – but not before the main page content – and then simply activating it on the page where it was wanted by the use of a simple ID tag, giving the flexibility not to use it on pages where it might be too distracting
The result has been perfectly good performance on desktop and close to the same on mobile. Mobile performance will also be affected by the image-heavy homepage but the site owner wanted the gallery feature which emulates their Steam profile.
There may be room to further optimise the home page but knowing that gamers often operate from home wifi or fast data connections (in large part due to the hobby of video gaming), and the fact that in real-world testing the site did not feel noticeably slow to use, this wasn’t felt to be a high development priority. Current performance is overall very strong, while keeping the unique design and ethos of Elysian Reviews.
The mobile view, just 9 points short of a perfect score.
