On the first day of January in 2020, I resolved to complete one creative endeavor for every week of the year - 52 in total. I created a logo and site to track my progress, encouraging a new atomic habit.
I started the Create*52 brand with a logo. This exercise let me work in Adobe Illustrator (always an interesting challenge), and gave me the opportunity to simultaneously establish some style and color guides.
The "Create" side on the left is hand-written as a nod to the creative nature of this project. The asterisk and "52" on the right is a font called Bahnschrift. I selected Bahnschrift for its tall, narrow characters, but it turned out to be a fairly interesting font in its own right! See the linked article for what I mean.
The part of the logo I'm most interested in is the background of dashed circles. I'll spare you some counting: there are 52 of them. I wanted to represent the Create*52 logo as a sort of contained tracking system, so that the logo could be dynamically filled as the weeks of 2020 go on. The number 52 worked out well for this, as its only non-self factors are 4 and 13. It just so happened that 4 and 13, when transposed into a ratio for an image, make for a decent logo size!
The dashed circle background was repeated on all of the pages for Create*52 as a stand-alone repeating element. Through some CSS trickery, I was able to line up the circles in the logo image with the circles in the background, giving the site a continuous background feel.
During the process of creating a logo I was able to create a color scheme for Create*52. This was the result of finding a primary color for the logo, and then using Adobe Illustrator's color harmony tools to determine complimentary colors:
#a5e67e
#779964
#646a99
#e6acd5
#998571
These elements came together to provide a design for the Crete*52 site.
I added a weekly tracker of my progress. This project was a fun combination of code, Illustrator, and self-motivation.
This tracker was designed to provide two pieces of functionality:
- Provide a directory of all the creative projects I complete in 2020
- Encourage me to stay on schedule with public accountability
The home page was set up to automatically check my progress and display the results in The Weekly Tracker. A series of icons rendered along each week's slot indicated whether that week was completed on time, and if it was the current in-progress week. Whether a week is "complete" was determined by whether I had posted a link for that week's project.
The Weekly Tracker, prior to posting a page. Note the ❌, since the due date for posting had already passed.
The Weekly Tracker, after posting a page. One more week, completed!
The Weekly Tracker was, code-wise, mostly just a big if statement based on the week of the year. Images are inserted into the DOM based on my progress. The most interesting bit is how the week of the year is determined:
// Get current day out of year
var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = (now - start) + ((start.getTimezoneOffset() - now.getTimezoneOffset()) * 60 * 1000);
var oneDay = 1000 * 60 * 60 * 24; var dayOfYear = Math.floor(diff / oneDay); var weekOfYear = dayOfYear / 7;
Since there are 52 weeks in the year, and 52 items in the Weekly Tracker, determining my progress and applying a marker with the week number was trivial. The nice thing about this system is that it was entirely dependent on my action of posting a project for marking.
// Determine if list items as past, current, or future
if (weekDiff < 0) {
/** * Weeks in the past are either complete or incomplete */
...
} else if (weekDiff === 0) {
/** * Weeks in the present are either complete in progress */
...
} else {
/** * Weeks in the future are either complete or pending */
...
}
All of the code for Create*52 is available on GitHub here.
Unfortunately, 2020 didn't play out as I'd planned. The pandemic hit and life changed. I lost my urge to create for a long time as I coped with the scary new world we were living in.
I still feel that the concept of Create*52 is a strong one, and I would like to continue with its weekly goal in the future, even if it is not tracked in that format.