General

I no longer want to be a designer and developer. I've come to a conclusion that lead me to believe to produce better work I don't need to be a better designer & developer. Design & development refers to the technical skills idealized by the people that make up the industry. But where do those come from? They come from the limitation of the mediums such as print and web along with use and needs of the people consuming it.

At this point trying to become a better designer & developer means taking even more time and isolating myself to more contact with others in those industries. With that may come a stronger set of technical skills and knowledge but comes with one major limitation: I won’t necessarily produce better quality work.

It might be better produced and have higher production values but the one thing that attracted to me to this field is that the value of the work isn’t purely derived from the quality of the execution. Instead the quality of our work is determined by the effectiveness at communicating the founding ideal to it’s audience. Therefore a good design piece doesn’t need to be made by a good designer.

Instead, I need to be a better human. I need to live more, experience more to become more empathetic to other people. With that comes understanding. Understanding that can be used to create better works that touch who we are as people. For instance we don’t love characters in our favorite movies because they are technically well handled. We identify with them, we understand them in some way and they evoke a response from us that becomes a positive connection. For instance in the original Star Wars trilogy I can identify with Darth Vader being those rare moments where we are blinded by ambition and use our power to harm the goals & ambitions of others. Because we can identify with characters like that the technical theories are produced to try and create the same result.

So in order to become a better designer we need to not spend so much time trying to be a better designer, but a better person. The more positive connections we can create with the world around us, the more cultured we can become, the more valuable our work will be as we try to use that to better connect with people, the ever-important creatures that consume our work.

While it may appear I'm speaking as becoming a business man that is the actually my limitation in my ability to communicate this idea. People are keen when you're not legitimate. People can tell when they're being manipulated and they do not like it. So it's in my best interest to be genuine in my cultural and social development and become a better person to have a better life. The better quality of work should be a by-product of those efforts.

Well it's been a little while since I posted anything. I'd like to think this is mostly to do with getting a job working at http://venuebook.com and moving to New York City. However, I know that it's mostly due to not knowing what to write about.

I envisioned writing about web design & development field advice, critical thought on the industry, along with sharing specific solutions to tricky problems. The problem is everything but the specific solutions have been done to death everywhere. Not to mention with my lack of major success and experience I don't have much advice to offer as I'm still trying to figure out my role in the field.

However, the tips and tricks are still useful to people I think. I would like to keep posting those as they come up, but they don't always happen. They're usually created out of my actual client work.

So that leaves me wondering what do I write about? That's when I realized I could just focus on discussing the sites I find particularly inspiring or inventive. This would help share some thoughts on design as a process. Give props to talented members of the industry, and help me better understand strong design.

So that's what I'm going to try to do once a week. Anyway, here is a list of topics I'm going to cover in the next few weeks:

• A basic WordPress Template Engine using output control to make the include function behave better.
• Breakdown a very inspiring studio website.
• Discuss my new Job & experience working on VenueBook

I'll write the first one on the list this weekend with the rest to follow in the following weeks.

So if you haven't heard there's some bills floating around congress that are trying to destroy piracy. The problem is that it really puts much of the content available on the internet in the hands of a corporation, mainly the MPAA. Which is already nefarious for over-reaching it's authority when it comes to rating movies.

As of now the first bill, SOPA, has been killed but PIPA still remains. Both of which are not right and will do far more harm than good.

The problem with this is that I called it! I knew that all the piracy and just constant, constant promotion of it in countless internet communities would eventually cause a reaction. A reaction that severely limits our freedoms on the internet just as both SOPA and PIPA threaten to do. We might get lucky and squeak by having some protestors and speakers try and thwart the bills. But we will not be able to keep it up forever therefore the best action I believe is to honestly stop or at least limit pirating on an individual level.

I'll admit I was a bit of a pirate myself when I was 12 as the opportunity was there. Of course eventually I did get a letter which sort of scared me straight. Oh and I got a job, so pirating was therefore the more inconvenient way to obtain movies & music.

However in order to do such a thing I think it's important to make aware of the legal alternatives out there.

Piracy Alternatives

• Music can be listened to for free via http://pandora.com which has a wonderful selection of radio stations by artist or genre.
• Another great music alternative is http://spotify.com which allows you to build playlists and stream media from their servers.

• Amazon music store http://www.amazon.com/b/?ie=UTF8&node=2658409011&tag=googhydr-20&hvadid=10051401225&ref=pd_sl_6fao23lz18_e which allows you to put your music on servers and play it from anywhere you have an internet connection for $20 a year.

• Hulu has a lot of shows available for free and for a pretty reasonable monthly fee you can access the full library from a plethora of devices.

• Netflix is my personal favorite. With a basic account you will be able to stream a ton of movies to many devices, and rent them via DVD or Bluray directly. The membership is roughly $8 a month which is a bit much but you can always create a family plan and split the costs with some comrades.
  

Anyway I hope some of these help you or someone reduce the amount of intellectual property theft committed. Doing so will be a solid way to prevent things like SOPA and PIPA form re-appearing that threaten the wonderful world that makes up the internet.

So for the first 10 years of my web design & development experience I used Dreamweaver. That was a mistake. All I did was over-pay and loose time working with an inferior editor. Last year, I switched to VIM and I love it. It's a great editor which offers you exactly what you need. Now don't get me wrong, I prefer VIM but I wouldn't pretend it's the "best" editor out there, there are many others like it such as textmate, sublime, and emacs. But I don't use those so I'm not going to mention them further.

Why not use Dreamweaver?

Dreamweaver is a great editor. If you have no idea how to actually make a website. The biggest reason is that it wants to do the work for you, the problem is, it's not good at that. It never will be. Dreamweaver can understand the result you want but it doesn't understand context so when you let it generate the code for you, it's going to generate a lot of code you don't need. It's a fine set of web developer training wheels but you gotta move on when you're ready. I can't tell you how much I wish I learned about VIM 9 years ago.

But the big reason that Dreamweaver is a bad editor is simply how much it slows your process down. Think about what's involved in changing a word 10 lines up? You either press up 10 times, then the left arrow key until you get to the word then you can either press backspace until the word is gone, or take the mouse and delete the word. You could also take the mouse, select the word, press backspace and replace it.

What VIM offers however is options, and with that comes speed. In that samescenario you can just type the following key sequence in Normal mode 10k3wcE. It moves the cursor 10 lines up, moves right by 3 words, and puts you in edit mode while over-writing the next word so you can just start typing. The only time spent is how long it takes you to type "10k3wcE".

What is VIM?

VIM stands for Vi Improved, Vi is a traditional text editor that comes with unix machines including Mac OS X. ViM works much like VI but adds some extra functionality, customizability, and above-all plugins. It's a text-based code editor.

What makes VIM so great?

Vim is a mode based editor. In other words you use it differently based on the mode you're in which means you get a good interface for what you want to do within your code. By default you are in normal mode where you can view code, move up, down, left, right, with k, j, h, and l (Lowercase "L"). This allows you to use your keyboard to logically transverse your code based on words, lines, letters, and code blocks.

Then there's command mode. This is activated by pressing ":" (colon) and followed by a command, plus text and enter. This is where you can tell vim to save your file, open a new file, split the window into frames, run other functions and plugins.

Lastly there's insert mode. This one is pretty straight forward, this is when you can type your content. There's a few ways to get into this mode. Such as pressing ce in normal mode allows you to edit up to the end of the current word object.

So the big picture here is that VIM allows you to really interact with the context of the code you're typing. It breaks the text you type into words, lines, blocks, vertical blocks, and of course individual characters with numerous ways to transverse and manipulate them.

Extendability

This is what really got me into VIM, the numerous plugins available which mean you can really craft the tool you want. That's what really gives VIM and like editors their power. You get the tool you want to work with, you do't have to use it the way they want you to.

Customization

You can really customize anything in VIM! The amount of options is amazing. Don't like using h, j, k, and l (Lowercase "L") to navigate your text? Fine. Remap your keys in your configuration file!

One of my favorite features is how many themes there are for VIM. If you've used dreamweaver you get one theme, or you can take the time to change the colors and that's it. With VIM you can find many themes and switch to them at anytime. What this does is let you pick a comfortable theme for your environment? Working in a dark coffee shop, use a dark theme. Working in a bright office building? Time to switch to a white theme!

How much is VIM?

Oh I forgot to mention: It's FREE!!! Why? Open source, bitches!

What's the catch?

Oh you're quite wise for asking what the catch is and I'm not going to sugarcoat it: There is a learning curve. It's going to take some time & effort to learn. But I am going to share the resources that helped me learn it. Took me two weeks to get used to editing my code that way.

Vim Resources

Here's some resources I've come across for obtaining VIM and learning it along with a few cherished plugins.

Download MacVim

Learning Vim

As promised here's what I used to learn vim which are a series of video tutorials created by Derek Wyatt who's strong personality does add a bit of entertainment to the process. Following is his introduction tutorial to show you what VIM can offer. It's what got me hooked almost exactly a year ago!

http://www.derekwyatt.org/vim/vim-tutorial-videos/vim-novice-tutorial-videos/

Favorite Plugins

There's really just a few plugins I couldn't live without if you're interested.

• Pathogen http://www.vim.org/scripts/script.php?script_id=2332

  Pathogen allows you to use git to safely and effortlessly install more plugins in their own folders. By default you would have to install them in a global syntax, startup, indenting, etc... directories. With pathogen they reside in a plugin directory in their own folders. To uninstall the plugin you just remove the folder, to install them with pathogen you can just use git or any other type of plugin manager.

• Nerd Tree http://www.vim.org/scripts/script.php?script_id=1658

  Nerd Tree is a great plugin for managing files, makes it nice since you can just view the files your working with right away.

• Vim Themes http://www.vim.org/scripts/script.php?script_id=625

  Here's a ton of VIM themes you can install. In command mode enter :SCROLL and you can use the normal mode movement keys to scroll through the plugins.

One luxury of this field and getting to meet a lot of talented, creative people. The problem, their websites typically suck. So I thought it would be worth mentioning what the common problems are and some solutions.

Invisible Design Myth

I think when artists begin planning their website, they want their work to do most of the talking. Which is fine. However, I believe they often go with a minimalism design thinking with less there it won't get in the way of their work. The problem is, it doesn't matter how few elements you have in a design, if they're not used to emphasize the content correctly, it will always distract from it. The result is like putting street at in the Luvre in Paris. It just doesn't fit. When a design is made to enhance your content, and as a part of your content, it doesn't draw attention to itself, it just becomes a unified experience for the user.

Expression vs. Communication

Another common issue I see with artist sites is that they want to express themselves with their site. Which of course is what makes for good art, but a website is a design, it's a vessel, it's a tool, it gives people understanding of who the artist is, and what their work is about. It's value is determined what it offers everyone but themselves. That said, a bit of self expression can aid in the communication of who the artist is. Much like the approach I took with my logo.

No Actionable Direction

The biggest issue I have with artists' sites is there is nothing to do on them. Check out a few of their works, read a few blog posts about them then what? There needs to be a action the user can follow up with like getting in touch, ordering a print, commissioning them for an original work, seeing their gallery exhibit. Something the user can do to be involved.

Software

I've seen a lot of artists go for a pre-made solution, especially on an "artist network". The problem with this is that you lose the potential to create an identity for yourself, your site just becomes network site #739. I would recommend a self-hosted WordPress site with a custom theme and a original domain. The only part of your site that is streamlined is the system you use to maintain it. It will be easy to find a front-end designer to make a theme for it, or a brand-able premium theme for a decent price. Another nice advantage is that WordPress can grow with you. Want a shopping cart? No problem! Want a blog? No problem! Want to change how your gallery system works? No problem!

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.

1. 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.

2. 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.

3. 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.