The importance of light simulation
It all started with me trying to change a graphic asset from our website. We are an online name badge creator company and right in our home screen you can see a badge with a lanyard. It’s beautiful, but it’s not accurate.
The lanyard is not accurate, we don’t have flat lanyards like that, we have corded tube-like ones and they have a hook at the end, a j-hook, as some people call them.
This creates confusion in some of our customers. Probably a standard: “Images in this site might not reflect the final product” disclaimer might be the simplest thing, but it’s also… not cool.
So, with my limited design skills, I went ahead and tried to draw a lanyard that resembles a bit more the real thing.
The first problem I encountered was creating a something that would look like a cord (I used Sketch for my design), but I wanted something vectorized and not a pixelated image from Google. After some web surfing I found out I could create pattern.
I found that the pattern below could eventually look like a cord. So I went ahead and tried (not very accurately) to copy the outline of sample.
I was worried because the model was not exact and the pattern didn’t “clicked” perfectly, but I continued anyway. Once I applied colour, it started to look a little better.
But to be honest, this doesn’t look at all like a corded string, it looks like a weird squid or something. But then I realized, what if I used different shades of black-grey-white to simulate light! I know this must be basic when studying design, but I skipped that class (that’s not true, I didn’t study design)
I applied some degradation, but it looked off.
BUT, what if I just observed a real lanyard for 5 minutes and understand how light bounces or obscures certain parts of the fabric? Oh yes.
And boom, it started to look better by just rotating and adjusting the direction of the degradation.
Now I just needed to draw the ring that’s attached to the clip and the j-hook. Without light simulation it looked like this:
Which is not that bad, I actually like the simplicity, but the website’s graphic assets all have a little volume. So again, I spent a few minutes understanding how the light touches the object.
AND if you attach a good looking name badge, it looks like this:
It’s incredible to see what a simple colouring trick can do. Also, if for some reason you want the lanyard file in Sketch, just leave a comment, I’ll be happy to send it to you.
Our company’s mission is to simplify an event organizer’s life when to it comes to creating name badges. Whether they’re for a Fortune 500 company or small gathering at the local school gym.
