And one of the most common ways to provide a rough outline, is through sketching.
Yes, you read that right. Sketching. Pencil to paper. Crooked lines. Scribbled text. Stick figures. Here are some of the sketches I've done, that ultimately made the transition to working code. I thought it would be fun to provide a before-after dynamic. Notice how many of these sketches don't translate a hundred percent to the finished product. That's because requirements evolve. Sometimes, while I'm working on it mid-way, I hit upon a better way of implementing the idea. This may result in elements being moved around, text changed, and so on. That's just how it is.
1. Hong Kong Anti-extradition Protest Symbol (2019)
Whatever I eventually ended up thinking about the Anti-extradition Protests of 2019 in Hong Kong, there's no denying that this produced a lot of great art, some of which got me thinking about how one would represent one of these pieces in CSS. |
The sketch was clumsy, the final product hopefully less so. It was basically the process of figuring out basic shapes in CSS and how to combine them. This was scribbled out over the course of devouring a lunch sandwich at my desk, and coded within the day in the evening.
2. Tic Tac Toe (2019)
Both the original and the Valentine's Day version were born from this little grid. It isn't much to look at, but there was more to this than just interface. |
In here, I actually numbered the grid squares and thought about how to map out a win scenario, eventually going with an array as the main data structure.
3. Christmas-themed LESS Demo (2017)
I'm not sure at what point I decided to explore LESS, but it came in the form of making three different layouts to test my code with. Enter the 2017 Christmas-themed LESS Demo. Here, you can see the different layout drawings for each color. |
Fun fact: The text in blue was preliminary thoughts for an unrelated piece of code for Ruby MadLibs.
4. Valentine Heart Animation (2019)
This was some idle doodling during an extremely boring meeting in which I was trying desperately not to fall asleep. Crude it may be, but it led to some amazing stuff. |
I actually made this for my wife for Valentine's Day. She wasn't extremely impressed considering she's Chinese and doesn't celebrate Valentine's Day on 14th February... but it's the thought that counts, right?
5. The Pie Chart (2018)
While trying to produce a pie chart using CSS, there was a lot to think about in terms of angles and overlapping. The sketch I made during this thought process was extremely rudimentary. It certainly doesn't do justice to the insane amount of code I had to write in order to make this work. |
| The Pie Chart |
However, work it did. For this, I had to think of all possible cases and how to handle them. Which was hard because at my level of CSS, I could only produce things at a right angle. Thus, the final result was a shit-ton of hacking.
6. Easter Bunny River Crossing Game (2019)
During another boring meeting, I sketched this beauty as my programmer brain clicked into full gear as to how I would make this work... |
The final product differs a bit from the sketch. As you can see, I opted for full-body representations instead of cute icons. I can't recall the thought process behind it, other than "it would be cool".
7. Ada Lovelace Day Generator (2019)
During yet another boring meeting (see a pattern here?), this was born. I was thinking of ways to write a simple ReactJS app, and this came up. OK, so my drawing of Ada Lovelace looked more like some corporate suit but that was only meant to be a placeholder. I might have based the sketch on the office lady sitting opposite me at the meeting. |
The controls for the number manipulation weren't as I originally envisioned. Certain considerations tend to come up only during implementation. But all is fine. I'm pretty happy with the outcome.
8. Scroll-down Christmas Carol (2016)
Work for the this was based on the scroll-down effect - but at that time I only knew how to use CSS to draw, and thus when rendering the caroler, I had to break it down into basic shapes. This was the sketch. Pretty rough, huh? |
Well, as it turns out, I think my sketch actually had more life in it than the final product. Joke's on me!
9. CNY Rat SVG Animation (2020)
This one was an attempt by me to visualize how the string "2020" would morph into a graphical representation of a rat. As you can see, I had two versions, neither of which really resemble the final product. |
On the other hand, these were lame. I think the end product is worlds better. I hit on the idea of using the bases of the "2"s as whiskers, while writing the code. But the sketches did give me that foundation to build on.
10. Contact Us Page (2019)
Another square drawing. This was pretty straightforward; I needed a layout for a typical Contact Us page, and just wanted to figure out what would go where. |
| Contact Us Page |
You can even see the pin on what was my pathetic representation of a Google Map!
Whew, I'm done!
I'm definitely a worse artist than I am a developer, and that's saying something. Hopefully, from these, you can gain a greater appreciation of how this developer does things.Sketch you later, alligator!
T___T
T___T
No comments:
Post a Comment