design for web.

← index


mat bot dot net logo

@_matbot was an exercise I assigned myself as a way to learn to read & edit Python code and deploy my first application using Git and a cloud based hosting platform.

The bot is autonomous and tweets several times per day on subjects limited almost exclusively to web and graphic design. In some ways the bot is satire, half-heartedly marketing itself in the way that web designers tend to do; by aggregating and reposting advice and wisdom culled from other web sources who are, more than likely, doing the same.

The @_matbot logo was designed by me to represent the overall harmless nature of the bot.

Design & Development Tools

Sketches and Wireframes

Pre-planning for this project was minimal. I based the project files off of Tom Meagher's GitHub repository, but presentation of the bot outside of Twitter was a last minute decision, coded in Sublime with no real layout plan in mind other than to emphasize the tweets and link to additional social media accounts.

mat bot dot net

image of mat bot dot net homepage
Fig1. - The matbot homepage emphasizes the Twitter feed and provides links to additional social media accounts. Vague, primitive graphics suggest an early video game.

@_matbot on Twitter

image of mat bot dot net twitter page
Fig2. - @_matbot tweets automatically, 3–5 times each day, plus a reminder of the current date every afternoon at 2:30pm, eastern US time. .

m5tbot on Facebook

image of mat bot dot net facebook page
Fig3. - A Facebook page was created for the bot to maximise its online presence and grow its social network.



A monospaced typeface seemed like the best choice for this project due to the subject matter (bots). Also, for purposes of repetition and alliteration, mat bot dot net stacks nicely in monospace:


Color Palette

Simple black & white with a splash of orange

The matbot website serves almost no purpose except to provide a hub for the project extensions to various social media accounts, so an elaborate color scheme would have taken more effort than the usefulness of the page really required. The addition of the orange bar at the bottom of the page was simply to evoke a sense of closure. The color choice was practically arbitrary, based entirely on personal taste and a habit of adding an element of orange to nearly all of my student projects in school.

  • #1A1A1A
  • #ffffff
  • #FFA500

Social Media Campaign

Following options

@_matbot has a social media prescence on Twitter, Facebook, and LinkedIn. Posts are shared as updates from Twitter to the other two. @_matbot can also be reached via email

I want to go to there: mat-bot logo


← index