YP
back
flat colored illustration of a small red twenty sided die

Part‐Time Heroes

multiple desktop screens displayed, topdown view, laying diagonally, with mock ups of project Part-Time Heroes.

Originally, this was only one project for a company I currently work for, called Part‐Time Heroes. This company is the first studio filmed Dungeons & Dragons Livestream company based in Europe. They had asked me to design and create their website, with keeping the mood and feeling of the company in place. Later on, I also made a few other things for the company, such as a flyer, designs for the Twitch overlay, Twitch panels, name tags, a stat overlay video and currently working on more.

When I first heard about this new company and plans for the livestream, I was very curious and excited to be a part of it. Now, well over half a year later, I'm at this company as a player for the show, but also Lead Designer for all the things I've mentioned before.

First up came the design for the website, where the mood and intention of the company was to have an old mage tower / wizard theme. It had to be mysterious and magical, but also give a curious and inviting sense.

The colors and the logo were already established before I worked on the designs, and of course these colors for the company (blue and orange), had to be incorporated into the design, to give the feeling of a branding style.

the original flyer design for Just Roll With It, the old company name of Part-Time Heroes.
original flyer for just roll with it
the original flyer design for Part-Time Heroes, designed by Yara Prins.
new flyer for part-time heroes

Process

Website & Flyer

The website was designed in Adobe XD and made in Wix, since they already owned an account and a domain, and it was easier to set it up that way. I pretty quickly had an idea for the design, and found the perfect photo to make it with. The company originally was called Just Roll With It, but later changed the name. In my first ideas it will however still state the old name.

I started off with the photo, which was orignally a bit more on the black and white side, and edited it in Photoshop to have a blue hue to it, matching it with the brand colors. Then I put that photo as background, with a slightly dark overlay on top for readability. I tried out two versions of the header, and soon went for the borderless style. After I made a few versions of my first hero section idea, having a larger or dice iconography, and work with two different fonts (one I used before getting the custom font from the company, which is also used in the logo). I tried multiple fonts and color palettes, to see what would give off the most 'old mage tower' vibes, but I didn't use most of them seeing it just didn't feel right and so I decided to just work with color variations of the blue and orange from the logo, and black and white for optional contrast colors. Soon after, I finished the design in Wix itself, tweaking the last details there.

After the hero section, I continued working on the homepage, adding multiple sections with an about and a schedule section among other things. Making the footer was done very quickly and given the ease of use that Wix provides, it was easy to make something good.

The other pages were the cast, stream (schedule) and vacancies page. The latter one I made at a later stage, and seeing I already had a pretty good idea how things looked, what fonts I used for the others, what spacing, etc., I made that last page directly in Wix. The other pages I did have some iterations for though and I will put those below.

Iconography for Part-Time Heroes, a blue flaming twenty sided die. Made by Simone Ripke, @Simmigraphs

Then the flyer design. The company (under their old name) already had a flyer made by different designers, but in my honest opinion it didn't look as good as it should have. Then at the time of the name change, I suggested for me to make a new design for a flyer, with the new name and new information, which they agreed to.

I started this flyer design with writing down everything that needed to be in the flyer, for example it had to have the logo, links to socials, date and time, and a heading that could grab your attention. Then, I knew I wanted to incorporate the cast members of the company, but wanted it to remain a bit of a mystery, so I decided to use a silhouette. This led to the first version of the flyer, which actually didn't change a whole lot.

I was asked by the company to make a few other versions, with for example a photo as background with the text on top. I warned them that that might not look as well, seeing photo as a background will make it less readable and could be busy for the eyes, but I tried my best anyway. That's where the other version came to be, but it didn't have the same impact and readability as the first one. So, I made a few small iterations on the first design, and did use the color version of the cast member cutout. I did however, make the bottom part one color with a mask, so the text for the socials would be readable.

Twitch & Videos

For Twitch I made multiple things. I started off with making the overlay, that would be used for the livestream. I followed some guides from another big D&D livestream called Critical Role, mainly because they have a similar set up as our cameras and in my opinion it would be the most practical. There is one camera for the Dungeon Master, and two cameras for the players, one on each side of the table. For consistency and eye movement reasons, I put the DM camera top left, with under room for potential announcements, videos, sponsors / givaways, and more. Then there are two wider parts for the two player sides, which is good to have them aligned.

So, with that in mind, I started by making a 1920x1080 canvas and blocking a few areas for where the cams would be. I did try a few other versions with other positions of the cams, but eventually I did still went with the one top left, two longer ones right. Then, I searched online for inspiration and potential usuable background photos, textures or other elements. I also made room at the bottom for logos and sponsor logos.

I made the first few versions with the blue and orange brand colors in mind, and tried a few different ideas. I used cut out screenshots from Critical Role, to see how it would potentially look with people and a backdrop in frame. These first few versions were, as I look back, not the best, but it was a start. They were quite crowded and got overwhelming a bit fast. I asked what the people from the company thought, and they agreed with what I said, but did really like the direction I was going with. So, I made more versions, and more, and more.

Eventually I liked the direction of going with a wood/stone combination, seeing that would also return in the stream from the studio itself. This made me make a few more versions, with slight variations. I tried it with a more wooden texture as main background with stone borders, the other way around, all wood, all stone, but was the happiest with a dark stone background, with grey/dark wood borders in between the screens and a stone frame underneath the camera frames.

The darker background in combination with the lighter studio setting, worked really well to give off a professional and calm look, together with keeping the mysterious old mage tower effect that is part of the companies mood.

Other things I made for Twitch were the name tags in the live stream (not the character art however), the stat cards plus video during the stream, and the Twitch Panels on the About section of the channel.

The name tags and the stat overlay were made in a simultaneous timeline. I knew what information needed for this, seeing I play a lot of the game myself and know what is and is less important for other people to know. This really helped with making the design, it was done rather quickly and didn't really have any iterations for them. I made the designs for both in Adobe Photoshop, and made the video version of the stat cards in Adobe Premiere Pro.

Same goes for the Twitch Panels to be honest, I was given a list of things that needed a design for, came up with a few of my own (I used to stream on Twitch for a little bit), and got to designing it quite fast. I made use of the already existing design concept from the overlay, to use it as a background. Then all what was left was getting the right size and spacing, add the iconography, and add text.

The first version of the Twitch Panels were longer and had the text needed in them, but seeing as Twitch would resize these panels to a 300px width, the text became illegible. So, I just made the designs for the headings, and only a few full version ones, where there wasn't as much text on it. After I was done, I put them up on the Twitch channel, moved them around a bit so they looked good, and finished up!

Iconography for Part-Time Heroes, a blue flaming twenty sided die. Made by Simone Ripke, @Simmigraphs

Website

screenshot of style ideas, filled with color palettes, font options, the logos and two different flyers for the company (new and old flyer design) screenshot of the first ideas for header style on the website. Made by Yara Prins. screenshot of the first ideas for hero section on the website. Made by Yara Prins. screenshot of iteration for the homepage. Made by Yara Prins. screenshot of the iterations for the cast page. Made by Yara Prins screenshot of ideas for the schedule / stream page. Made by Yara Prins.

Flyer

First new flyer design for Part-Time Heroes, Made by Yara Prins. On request design for new flyer Part-Time Heroes, Made by Yara Prins. On request design version 2 for new flyer Part-Time Heroes, Made by Yara Prins. Second version new flyer design for Part-Time Heroes, Made by Yara Prins. Third version new flyer design for Part-Time Heroes, Made by Yara Prins. Fourth version new flyer design for Part-Time Heroes, Made by Yara Prins. Final version new flyer design for Part-Time Heroes, Made by Yara Prins.

Twitch

screenshot of multiple layout ideas for the main Twitch Overlay design, made by Yara Prins. screenshot of multiple layout ideas for the battle Twitch Overlay design, made by Yara Prins. First design for one of the Twitch Panels, here the About Us panel. Made by Yara Prins. Second design for one of the Twitch Panels, here the About Us panel. Made by Yara Prins. Final design for one of the Twitch Panels, here the About Us panel. Made by Yara Prins. screenshot of the first versions for the Twitch Panels. Made by Yara Prins. screenshot of the second versions for the Twitch Panels. Made by Yara Prins. The character stat card design for character Loralei, the human Paladin. Made by Yara Prins. Design for the offline screen for Twitch account, in same style of the overlay. Made by Yara Prins. screenshot of the first versions and ideas for the Twitch Overlay, used screenshots from another show to visualize it better. Made by Yara Prins. screenshot of more versions and ideas for the Twitch Overlay, used screenshots from another show to visualize it better. Made by Yara Prins. screenshot of the iterations for the Twitch Overlay, used screenshots from another show to visualize it better. Made by Yara Prins.