Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Between <html> and </html>

Chris Filip
January 27, 2014

Between <html> and </html>

how I built my game design portfolio

Chris Filip

January 27, 2014
Tweet

More Decks by Chris Filip

Other Decks in Design

Transcript

  1. 1

  2. 2

  3. There are different types of game designer portfolios that I

    was able to find online, from blog‐like ones (top‐left) to ones that looked like a game portal (bottom‐right). While each of them was different in the way it looked, I noticed some similarities. 3
  4. All of the portfolios had a navbar, with a Portfolio

    and CV/Resume section. I realized that I would probably create a navbar for my website as well, especially seeing how I’d need to link to my about page. I’m still on the fence on whether to upload a resume, since I believe that the website should be the resume. 4
  5. Regarding the way the games were showcased, I noticed two

    ways of doing it: the first one is as a list, from top to bottom, with image‐wide descriptions and/or images, while the second one, as can be seen in the bottom section of the screen, was having thumbnails and a more compact view. It’s a personal choice, but I went with the screen‐ wide images. 5
  6. Not wanting to only have a look at just game

    designers, I also chose two other websites to be inspired by. The top‐right one is for a front‐end developer/game designer in his spare time and I really like it because it’s super light‐weight and all the information is on one page, and the bottom one is for a musician/game designer and I like the power that it has with the black and white image followed by lots and lots of colours in the form of his work’s categories. 6
  7. With a base website layout set, I needed to decide

    which platform to create my website in. I chose to not go with the templates from wix because we’ve been repeatedly told that they’re not well seen by people in the industry who will look at our portfolios, and I’m not that much of a template man, and while bootstrap and wordpress seemed like viable choices, I decided to skip all of them and just write my own website using html/css/js. I didn’t choose Flash because it doesn’t allow for much SEO and there might be people who might not be able to see it, while Tumblr is the platform of choice for a lot of designers from what I’m seeing but that would also mean having a feature that I wouldn’t abuse as much as I would in the end, the community‐facing one. 7
  8. Lastly, I knew wanted my website to be responsive and

    be able to be seen on multiple devices and still be acceptably drawn, so I will take this into account when writing it. 8
  9. I wanted to add my finished games and the ones

    that I’m currently working on in the website, alongside my contact details, the obligatory social media buttons, links to my blogs and maybe my CV, although as I mentioned before I believe that my website should be my CV. 9
  10. Talking about how I managed to put it all together,

    I used resources from w3schools, combined with a lot of Google and sometimes asking questions on stackoverflow, as well as borrowing code from other webpages and using Firefox’s inspector and debugging tool to be able to understand how certain websites worked, such as Anders’s. 10
  11. In the end this is kind of how my website

    ended up looking, although it’d definitely not finished yet. A simple description for me, followed by my games, each with a small description. I will probably add the platform and my role in the game in the description box later in the future. 11
  12. Speaking of social media, these are a few examples of

    buttons for social media that I’ve seen on different portfolios. Most of the buttons were really small, with only 2 of the examples actually standing out, and I think I will be using normal‐sized buttons for my website and link to my twitter, linkedin and g+ profiles. I had some reservations about providing my email address normally but I’ve been reassured that my mail client will take care of all the gratuitous spam. 12
  13. In the future I’d like to have my website look

    more like my business card, with sections for each of my activities. 13
  14. 14

  15. 15