So if you have been following my posts so far . . . firstly, have a digital cookie. Here you go. Happy Halloween. Secondly, you might have remembered my encouragements to have fun while coding. With the lessons I have learned from the past couple of weeks, I can already tell that this post is going to tread the fine line between further encouragement to keep coding fun and, well, not to get too distracted by it.
For example, let’s jump to a project I’ve been dabbling in on the side: coding parallax. For those of you who don’t know (because I didn’t know the name until a few days ago) a “parallax” is one name for the element on a website that creates an illusion of dimension. Typically this is a photo that gets “scrolled over” with text content.
If you’re curious as to what it looks like, I encourage you to browse the old World Wide Web. Why? Because almost any modern, trendy website you’ll come across employs some form of parallax.
Alright, here are some examples anyway.
(Bonus: I didn’t realize there was horizontal parallax scrolling as well until, well, today.)
Funnily enough, this wasn’t an aesthetic I was looking for in my portfolio, but I really like the layered dimensions that could be achieved by learning how to code these elements – which is part of the aesthetic I aim to showcase and implement as a UI designer.
However after some discussion and reflection, mainly after my midterm conference, it dawned upon me how distracting some of these side projects can be. While I attempted to separate this “fun code” from “class code” by creating a new menu on my website (with its own corresponding .html and .css code) it was still clear the week before our resumé rough drafts would be due that it was still a little too distracting.
While attempting to code parallax, sticky menu bars, and drafting mock-ups was conceptually closer to my personal portfolio aspirations, the code that I was physically completing was much less sophisticated.
I was pleased that some of my classmates enjoyed and were inspired by my site’s current aesthetic (shown below), and I find it satisfying to a certain degree as well; the shades of grey and blue and sleek but inviting, and the font is playful but clear.
As emphasized by the “Back to the Top” link stuck behind my float elements at the time of this screenshot, my biggest issue was in the site’s layout and formatting, both of which I had struggled with in class, and both of which were huge proponents to my future designs.
After struggling for hours to code “columns” and “rows” on a makeshift grid, I went back to creating float elements, which was much more successful. With Bill’s help, I adjusted the maximum dimensions of the site (since I couldn’t see my portfolio on screens bigger than a laptop) so I could keep my design precise. But throughout this hectic week, I realized that while I was trying my hardest to work harder to get ahead in coding, I was also getting distracted to a point where I could have fallen behind.
So lesson learned: have fun, but not too much fun.
What kind of issues are you all running into when creating your websites? More specifically, when it comes to making the site suite your personal aesthetics? Let me know in the comments below!