Select Page

Around the Moat

Around the Moat

Around the Moat is a satirical news site based in Chiang Mai, Thailand. The Moat refers to the well known moat in the city. Having written for the site, I took on a re-design of the website as a project during my professional web design course at Web Courses Bangkok.

The objective was to provide a design that looked like a professional news site, but hinted at the fact that the reporting might not be entirely serious.

This website was built using the Extra theme, from Elegant themes. The Extra theme from Elegant themes is a fully responsive theme, but as I added over 1000 lines of CSS customisations to make the site look like my initial design, there was plenty of work to do to make this website responsive. The Extra theme came with plenty of features and a lot of the work was simply removing unnecessary elements to strip the site down to something that looked clean, clear and professional.

Around the Moat is a satirical news site based in Chiang Mai, Thailand. The Moat refers to the well known moat in the city. Having written for the site, I took on a re-design of the website as a project during my professional web design course at Web Courses Bangkok.

The objective was to provide a design that looked like a professional news site, but hinted at the fact that the reporting might not be entirely serious.

This website was built using the Extra theme, from Elegant themes. The Extra theme from Elegant themes is a fully responsive theme, but as I added over 1000 lines of CSS customisations to make the site look like my initial design, there was plenty of work to do to make this website responsive. The Extra theme came with plenty of features and a lot of the work was simply removing unnecessary elements to strip the site down to something that looked clean, clear and professional.

Previous Design

The previous design used the MH Magazine theme using the default layout. One of the few things to really distinguish the Around the Moat site was the background image of the Moat in Chiang Mai. As background images are pretty ineffectual, with the focus of the pictures covered by the content, I decided to incorporate the images which give the site its name into the design.

Previous Design

The previous design used the MH Magazine theme using the default layout. One of the few things to really distinguish the Around the Moat site was the background image of the Moat in Chiang Mai. As background images are pretty ineffectual, with the focus of the pictures covered by the content, I decided to incorporate the images which give the site its name into the design.

User Experience Design (Wireframe)

Most news sites tend to have a design that showcases numerous news stories near the top of the page. On these sites, these stories will change daily. On Around the Moat, a very small publication, the posts were often updated weekly.
My design is intended to give more focus to a smaller selection of articles, displaying them more prominently. If the stories don’t appear to update on subsequent visits for the viewer, they won’t feel compelled to return any time soon. The slider gives the impression of change, while only having four stories means it only takes four new stories to completely update the content above the scroll.

User Experience Design (Wireframe)

Most news sites tend to have a design that showcases numerous news stories near the top of the page. On these sites, these stories will change daily. On Around the Moat, a very small publication, the posts were often updated weekly.
My design is intended to give more focus to a smaller selection of articles, displaying them more prominently. If the stories don’t appear to update on subsequent visits for the viewer, they won’t feel compelled to return any time soon. The slider gives the impression of change, while only having four stories means it only takes four new stories to completely update the content above the scroll.

User Interface Design (Photoshop)

The previous site used a shade of red which I decided to retain in the new design. Using this red, I developed a colour scheme that is close to the colours used in the Thai flag, and also similar to the colour scheme used in serious news sites such as the Economist or BBC News.

Chiang Mai images are incorporated into three locations on the website: the sidebar, the call to action and the footer. An idea to incorporate an image into the background of the bottom news stories was dropped due to concerns over legibility, and since more than three images didn’t really seem necessary.

The font for the Around the Moat logo was chosen as it evokes association with serious, long established publications, which Around the Moat absolutely is not. Similarly the Oswald font has been used for headings and menu navigation as it looks formal. However the italics and underlining of the word seriously in the subheading should really make it clear to readers that they shouldn’t fall for professional appearance of the rest of the design and take any of the content seriously.

User Interface Design (Photoshop)

The previous site used a shade of red which I decided to retain in the new design. Using this red, I developed a colour scheme that is close to the colours used in the Thai flag, and also similar to the colour scheme used in serious news sites such as the Economist or BBC News.

Chiang Mai images are incorporated into three locations on the website: the sidebar, the call to action and the footer. An idea to incorporate an image into the background of the bottom news stories was dropped due to concerns over legibility, and since more than three images didn’t really seem necessary.

The font for the Around the Moat logo was chosen as it evokes association with serious, long established publications, which Around the Moat absolutely is not. Similarly the Oswald font has been used for headings and menu navigation as it looks formal. However the italics and underlining of the word seriously in the subheading should really make it clear to readers that they shouldn’t fall for professional appearance of the rest of the design and take any of the content seriously.

Please see the full homescreen below.

You can find a live version of this website here.

You read all the way to the end?

I’m clearly doing something right if you got this far.

If you found my work interesting, please get in touch so we can discuss how my work can meet your needs.