Restitched: Dev Diary | Brand Design

Hello, and welcome to an all-new Developer Diary! This time we'll be discussing several of our graphic design goals and guidelines for creating Restitched's signature branding.

Initial Goals and Ideas

When setting about what Restitched would look like for its branding, we knew that we wanted to make something that felt creative in a 'builder' way, but still playfully cute and crafty. We wanted to reflect the title of the game in its design scheme, so fabric and threading were a big wish, but we also wanted to lean toward paper designs and included a lot of blueprint patterns. The fabric idea was initially included only in the sense that the paper had a stitched effect on its borders at times.

As the game evolved, so did the design for it. There are many cases where we create user interface (UI) concepts for the game only to find that we had to stray from the traditional design plan in order to have it work on a more technically-efficient level. As a result, working on in-game designs can influence promotional design styles too. We're always iterating and improving, and we feel this is a natural, transparent, and healthy part of development.

The First Draft

Pictured above: early loading screen concept

As seen above, the first concepts for branding were made with an assortment of very faint blueprint gears and cogs being assembled. A color scheme was played with until the combination felt right, and we felt like pink/purple and blue were fitting for the general vibe we were trying to capture for the game. The colors complement and contrast each other well.

You'll notice that we use pink and blue for the game's default design scheme, and this will also be the default menu color in-game. Pink is often used to draw focus to the most important areas, whereas the darker blue color is used as a background or supplementary design.

Concepts were created for the logo, though this flip-flopped a lot when ideas weren't panning out as envisioned. An in-depth post on the logo's many stages of development can be found in its own Developer Diary here (the first-ever Dev Diary)! Below are some images from that post showing some of our earlier concepts:

Although a brand design came together in time for the initial project reveal, the team's Graphic Designer still wasn't fully satisfied with it and there was a lot of room for improvement. Something was missing, so it took a lot of time, research, and trial and error to run through more drafts until it shaped up. Though this was mostly the adventure of the designer, the team and public feedback have also shaped the visual direction of the branding.

Further Revisions

With a new pattern and base graphic to build on (as seen above, also from the Logo Developer Diary), changes were made to the branding overall. While most changes were subtle, it was a step in the right direction. The purple color shifted more toward blue to better resemble blueprints. A proper grid design was overlaid to create a real blueprint rather than just using gears and cogs to get the idea across.

More revisions were made with time, including the addition of a gradient to add a sense of depth to the branding while also making the colors more vivid and appealing. The idea was to have the blue stand out opposite the bright pink. While the two colors complement each other, they also stand apart and are pleasing to the eye, helping to break up sections.

Back to the Drawing Board

With the branding mostly in a good place, something was still off. The logo was not pleasing to look at and it didn't represent the game well. It lacked polish and symmetry and presented fairly amateur. The width and 'weight' of the needle-like 'i' character were not consistent with the other letters in the logo. There was also no texture or sense of depth.

The logo went through many more concept phases, starting from scratch. The general idea of the first logo was still honored, as it was already established publicly. We felt it was headed in the right direction, but needed an overhaul. The logo changed and so did everything around it. The blueprints were improved, the colors were adjusted, and everything started to appear much more polished. The final and latest logo can be seen below:

The Restitched Renaissance

With the new logo in place, the only thing that stood out was the promotional thumbnails and backgrounds and their general sense of emptiness. This was fixed by adding various crafty props as if they were lying on a real blueprint roll. A faint wrinkled paper texture was applied to the background for more depth, and the gradient became stronger, going from a light to dark blue - which is more pleasing to the eye. 

The same signature pink shown in the logo is sprinkled throughout thanks to the props over the blueprint. To balance similar colors, props were placed opposite each other. You'll notice the yellow pencils being on opposite corners. This makes for a somewhat symmetrically-colored design that draws your eyes to the center while appearing softer and more refined, or polished.

With every update to our design assets, we must go through various source files and update them with the new imagery. Developer Diary thumbnails, for example, need to be 'relinked' in Adobe Illustrator so that our new blueprint imagery replaces the old one.

With the addition of the props over the blueprint, we decided to also sprinkle them into announcement thumbnails. You'll see that we often add a layer of depth to our designs by having a Stamp or the tip of a prop slightly overlapping the main element (in this case, the pencil overlaps the polaroid in the Dev Diary thumbnails).

A new render was made, known as the cover art for the game (or 'key art'). This new image and its individual pieces are used throughout the Restitched brand design for consistency. You'll almost always find pieces of tape, office/craft supplies (including rulers, pencils, scissors, fabric, and thread), and (of course) workshop aesthetics in Restitched's graphics. You can read all about the creation of the game's cover art in its own Dev Diary here.

Throwing Out Thumbnails

Thumbnails are often 1:1 ratio images that are used across social media and our website to promote something. The goal is to encompass the style and vibe of Restitched while also relaying the topic we wish to share! Because of the aforementioned changes to the game's branding, we redesigned all promotional thumbnails and shifted more toward paper strip designs to be used as subtitles and buttons.

Our old Developer Diary thumbnails are featured above. After taking into consideration all of the new design changes mentioned throughout this post, a new style emerged:

As you can see, we decided to ditch the smaller blurred images. In the original thumbnails shown above, the logo takes as much priority as the image. This was not ideal, as the most important piece of info for the viewer is the image itself. Blurring the preview image created a sense of mystery, but did not provide the juicy sneak peek that helps to draw attention and interest to the Developer Diary features.

After some time, we started creating new features for the community. Developer Diaries use polaroids for their thumbnails, but we wanted to make each feature distinct. Had we kept polaroids featured in all thumbnails, everyone would assume at first glance that each post type is the same! This is a big mistake to avoid when establishing a brand design, as each thing needs to be unique while staying consistent in style.

Below is an example of how we stayed consistent with the Restitched theming. We kept most of the same elements as the other thumbnails but added a new image layout:

As more features emerged, we remixed the layout while still keeping the same general design base. You'll notice that Developer Diaries, Recapped! posts, Stamp Previews, and more all share the same aesthetic. You'll find the same Restitched logo with subtext, similar footer text (our logo, website, and social handle), and props or Stamps scattered around the edges for brand familiarity, visual interest, and charm!

These new thumbnails are a big step forward from our original thumbnails made in 2020. We're very proud of the game's design style and think it's uniquely Restitched. It conveys a nice, crafty feeling while still being practical for the public and versatile for our designer.

One thing we wanted to avoid was making things too crafty, which leads to clutter. Having too many scuffed edges, too many paper wrinkles, or too many imperfections overall is not good! It makes the design too noisy and eyes are less drawn to the vital information. If people spend too much time looking at the background first, then the purpose of the thumbnail is lost!

What does a thumbnail look like in wireframe mode? Check out this before and after shot: 

(this view allows you to see all of the individual shapes, image boxes, and text)

Perfecting the Imperfect

As mentioned earlier, we're always reiterating and polishing things. When we added props to our blueprint design, we used online imagery and turned it into vector art, which produced weird results that made the design files slow and the edges jagged. If you look closely, you'll notice imperfections on our old pencils and scissors.

We wanted to change this, so we set about making our own props from scratch! The end result was worth it, as the props now fit the design style much better. They're also easier to work with! 

Check out the before and after changes here:

...voila! All-new vector props to work with. They're clean, tidy, and less resource-intensive:

Since we were already making changes to the props and re-exporting and updating our backgrounds to reflect this, we went a step further and improved the visual appeal of our blueprint graphic by adding a more powerful gradient. 

This means a more saturated blue, with a much lighter shade starting at the bottom. We found this change to be very beneficial because of the way it makes things more legible and attention-grabbing when used as a background.

Wrapping Up

...and that does it for this Dev Diary! This is only a glimpse into the evolving Restitched brand design, so who knows what the future holds? We're quite happy with where the visual style has ended up, and we hope you are too!

As you can see, many thoughts go into deciding our visual direction, but ultimately we let the game guide us over time. We find that the puzzle pieces of design fit themselves together with a bit of patience and experimentation!