Recently I wanted to create a graphic that would contain information on a single product or event. My initial idea was that the graphic would be simple and based off a paper filing system card. These cards have a small part at the top that juts upwards. This part is visible when all the cards are placed inside a container, allowing for a particular card to be found amidst the masses of other cards. The body of the cards would have text on them and sometimes a supporting image of what the card was about.
The description of a filing system card is probably well known to many who are reading this post, but I wouldn’t be surprised if they are becoming increasingly uncommon in the workplace. However, just because they are becoming uncommon doesn’t mean their function has become obsolete. The problem I was tackling here was very similar to the solution that the paper filing system fulfilled, so in a very non-creative way superimposed an older idea on to a newer platform. Honestly, this is often a great way to solve many modern design problems: look to the past for a solution to today’s problems.
The Design
I began my design process like I always do -sketching on a piece of paper. Sometimes I’ll sketch a few different ideas but this time I knew exactly what I wanted, and it was based on something that already existed. Really I just wanted to draw the shape of an index /filing card and then sketch in some lines of text, a box for an image and an area for social sharing to see how these elements would look within the card outline.
Backing up a step, I suppose the start of my design process was identifying the problem and thinking about it. Sometimes I will do a little online research to see how similar problems were solved in the past. For instance I recently designed a brochure and to draw up some inspiration for that I researched brochure designs and existing brochures from big name companies. This practice of researching is no different than when I had a term paper in University. There I would research my problem, write about this previous research, and then write about my own results on this problem and the research I unearthed.
Adobe Illustrator
Illustrator is my friend. It is the first Adobe program I used (besides Acrobat I guess), and it is still my go to tool for creating digital designs. For this small project I used Illustrator to create a skeleton of the design. I played with the line thickness of the shapes and with the font styles. Bold Century Gothic is what I chose as I found it was easy to read, clean, and had a modern yet classic feel to it that works well in a corporate setting. This is a font a reader would take seriously! One thing I probably would change is the kerning. I think the letters are a little too tightly spaced.
I’m a big fan of drop shadows, and I used them again on this project. This effect is probably overused but I think it really adds a nice and simple effect to a design. Another design element I chose was to place the social media icons in small circles that have 1/3 of their space overlapping with the card. I wanted these to stand out while still being a part of the overall design.
Adobe Photoshop
The third and final step to this design was adding the colour /texture in Photoshop. I began by finding a good image of a wooden board that was available for free online. Some people have catalogs of images they’ve taken and use for their designs, but I do not have such a catalog. Instead I often use websites like Pexels that have free images that you can use for designs. Once I find an image I don’t just use it ‘as is’. For this project I reduced the satuaration, increased the brightness and played with the black/white levels on the image in Photoshop.
The Illustrator design was imported into Photoshop as a LINKED file. This allowed for me to make changes to the design in Illustrator and have those changes immediately appear in the Photoshop file. A marquee selection was taken of the Illustrator design within Photoshop and that shape was then cropped out from the wood image. As the Illustrator design had a white fill, I then set that layer’s property to multiply, dissolving the white into the background wood layer.
The design was nearly complete with the wood texture incorporated into the black Illustrator design. All that was left was to give it a little more realism and increase the readability a tad. To do that I added some minor white and grey highlights to the black outline. These highlights were added to one side of the black outline to suggest a light-source to the upper right. Secondly, underneath the areas with text I added some white brush strokes set at 30%-ish opacity. This allowed the black text to be more readable on the slightly darker wood background.
Last Step
After I leave a graphic for a day or two I will come back to it and possibly tweak it here or there. I may realize I misspelled a word, didn’t make the graphic clear here or there, or God forbid accidentally have part of my design look phallic -the last part has happened to many a designer. Once I am happy with it I will alter the text and include a product image to suit it’s purpose. The image will be saved as a 500 kb ‘ish jpg or png file and used on social media. The other idea is that it will be uploaded to a website where the text will the idea is that the text will be removed in Illustrator and then coded in the website. The graphic will be inserted as a PNG file, and using the z-index and other CSS styling codes, the text and product image will be positioned within the graphic. As for the social media icons, those will be hot linked to their respective platforms. Again, this part will be coded into the website with simple HTML /CSS.
Thanks for reading my post! I wasn’t meaning to write something so long but it was rewarding to think back on how I created this design. I’ve recently posted about other design projects I’ve worked on too. One was about using the Sketchup program to create a 3D house and two were about using Adobe Illustrator for layouts and creating infographics. Let me know in the comments field below if there is a topic you’d like me to talk about next!