So as you've probably noticed this site now exists, unlike what it looked like before you came here :P Anyway this is my portfolio & blog to chronicle my projects and hopefully show constant improvement. Maybe not improvement in all areas but at least in a part of a project. The blog I wanted to share my immediate design philosophies so I can see what they were as time goes by. What am I doing now compared to what I was thinking when I wrote some of these articles? Lastly, I thought this site would be a good window into who I am and what I'm about for the design firms I intend to apply to next year. For now, I'd like to just talk about my process.
Project Discovery
I first started this project asking myself what I wanted to communicate. How did I want users to feel when they see my portfolio? Who are my users? These questions, and as I tell all my clients, are the most important questions to answer before starting a project. Without having a definite answer, I believe producing a "good" design will be impossible.
What I Wanted to Communicate
First, I knew I wanted to be expressive. In other words simple & clean and minimalism isn't the right vessel for how I want to present myself. If you ever get the chance to meet me, I'm very uh...eccentric to put it lightly and easily excitable. So I wanted a design that offers a visually expressive experience of me but is also visually rich & rewarding for the user to experience.
Though the interesting note about this design is that I did not consciously come up with it. I had a dream one night and I was looking over my shoulder in third person and saw myself working on what you see as my current homepage. I couldn't read the exact text but somehow I knew what it was. Of course I didn't just go by what I envisioned in my dream, I iterated over it a few times to get it where it's at. But the teal/mint green that makes up my brand is where that came from, and I think it's a good color for three reasons.
-
It's a trendy color as of late, I've noticed more and more works popping up on dribbble and forrst. What I'm hoping will keep this site relevant is that I chose this color for it's visual feel and not because I wanted to use teal in a design.
-
The color represents me, blue is usually seen as a trustworthy & stable color. But I don't see myself as a stable designer. I adapt, I grow, I change when I need to. I become who I need to for my clients. If they seem like they need someone to say, "Hey, I hear what you're asking but I don't think this will work well." I will do it. If they need me to just listen and do as requested, and doing that will yield the best results. I will do it.
-
The real-life object that this color represents is closely related to a color found on a chalkboard. Which is symbolically a tool for learning. Though that wasn't a purposeful relationship I was going for, as I said this color came to me in a dream but that's where I've seen it used in the real-world.
Who is my audience?
This is another really important decision for this project. I felt a little fed up working with small restaurant owners and small business owners always looking to take advantage of my services, always saying it needs to "pop" or "make it dance" like a good website is just a billboard that makes as much noise and commotion as possible to grab people's attention. On one occasion they made me go through their son who knew computers...
Anyway, with my logo & portfolio I wanted to really try to capture the interest of other designers and developers, artists, and other creative people. Not that they'll necessarily have more knowledge or be easier to work with but I understand their needs better, and I will sleep better at night helping them get their work out than advertising a site with "the best ribs" when after tasting it, realized it was the worst food I've ever tasted.
Another key part of my demographic is other studios be it creative director or someone deep in the work I'd like to have content & features that really show my skills in a way they appreciate. Which to me meant not just having a portfolio section but also using my skill subtlety to support my content and the way users use it.
Once I came to those answers it was time to figure out what to build the site with, for that I chose to learn something new: Python and Django.
Why Python + Django?
If you don't know, Python is a programming language much like C/C++/Java however what separates it apart is it's very clean, no line-noise syntax and very supportive community who created the PEP8 style guide for developers to produce the most easily read & maintainable code they can.
Django is a web framework in Python that allows you to rapidly build & deploy a dynamic website. My site definitely had a few dynamic components such as my projects, associates, and my blog articles. While this all could have been done in WordPress, I find myself loosing faith in that technology. It's well made enough but when it comes to custom content you're forced to apply it in a format that doesn't really suit it or you have to write those modules your own way in the weird way that WordPress handles backend-admin modules. A great draw of django is that it comes with it's own admin-panel module. If I wanted to I could write my own but since it's just a personal site, not having to write a system to manage my content really reduces what is involved in my part. I just have to define my models, then tell django to allow my models to be edited through the admin panel via admin.py.
The first step was learning Python. I made the mistake of learning Rails before learning Ruby and while I got the project done, I can't say deploying went very well. I managed to create a memory leak despite my simple, basic code and haven't been able to find the exact source of it. Though I do think that is partially due to Rails it's self and how much it hides it's core functionality from the developer. I found this book through some of my contacts called Learn Python the Hard Way which took my from making sure Python was available on my system, to writing text-based adventure games. After working through those assignments I felt pretty comfortable and moved on to django.
The official django docs is all you really need and go into very exquisite detail how it can be used, configured, and common problems are solved. However like any framework, it's far from perfect and not the best solution for every problem. For instance adding in a custom administration panel widget is not commonly done nor recommended, but luckily I found a better solution when I was about to travel down that lonely road.
From there creating the site was pretty straight forward, just setup my models to control the data, views to respond to the user actions related to the data. For instance what to do when they visit jayzawrotny.com/projects versus http://www.jayzawrotny.com/projects/project/backstage-drama followed by the templates contains the response sent back to the user's browser.
Once the site was finished it was time to deploy. For this I just used gunicorn, NGINX, supervisor, and virtualenv which I shall explain in a later article. It took me a few hours to get everything going but it turns out the delay was out of my own forgetfulness of installing the necessary python modules this site needs to run. Now it was time to test and get the site ready for launch. Of course there is still more I need to do...
What's Left
There's just a few things I still want to do. The first is add a button in my navigation for reversing the colors so that instead of white text on dark grey it's light grey or white with black text. This is for people who find reverse type hard, or unpleasant to read. It's important to take details like that into consideration, I figure since I'm relatively unknown therefore have a low reader-base along with this mostly serving as a portfolio site, I could get away with a reverse type site.
I need to improve the flow of my projects page. I think my users are missing the 3rd level of detail that they can get on a project. The first is the thumbnail as seen on my projects page, the second is the information that slides onto the screen upon clicking a thumbnail. The third is when they click the title or the permalink and directly view that project where I can even display a gallery of multiple images.
I would like to have tooltips on my homepage's contact buttons. This way if they can't directly click a link they can see my twitter username, or my skype username and information like that.
There's also a bug where my associates page is not visible to safari users. Luckily I'm still in soft-launch mode at this point so no traffic lost and more importantly, no users frustrated.
Lastly, I want to play with my blog layout a bit more. I feel what I have "works" but at the same time it feels a little austere, a little too static and predictable. It needs some visual elements to catch the eye and improve the hierarchy of the articles in my blog index.
Well, thanks for reading my book of boring details you probably don't care about on the making of this site :P Come back soon.