Why Developers Should Design More

For a very long time I have always deflected any opportunity to do design work with the statement, “I don’t know how to design, I know how to code”.  In all reality, we are all designers to some degree whether we chose to see it or not. We all have preferences for clothes, car colors, the type of bikes we ride, we are constantly designing our lives and the world around us. As someone who develops code for an internet which is quickly becoming more interactive every day, we need to have at least a minimal understanding of design principals. The benefits cannot be underestimated nor can they go ignored about any longer.

Responsive Design Means Coding A Changing Site

As more and more devices start accessing the websites we build, it becomes increasingly important to make sure we understand the important elements of a design we are given and how to compose them on the hardware that is viewing them. What might be important to a desktop user, might need to take a backseat to someone visiting the website on a smart watch or even a phone. Knowing how visual hierarchy works can allow a developer to make smarter choices about how everything fits together without compromising the design or brand identity.

Better Team Collaboration

Understanding why a designer is making certain design choices allows you to better empathize with them and as well as communicate possible technical considerations and work arounds. It empowers you to make a suggestion that might have been overlooked by others simply because they may not have an understanding of how something could work within the code. Drop down menus definitely come to mind, as that is something I rarely see considered or even comped up most of the time.  This holds very true in agencies or groups that still use Photoshop to generate the designs, a process that often leads to impossible to implement shadows, borders, or other no-no’s (please start using Sketch). Having the ability to consult with your designer and offer a comparable solutions.

Less Time Waiting

Depending on how your team functions and how comfortable (and trusted) you are with taking on design responsibilities, having some basic design skills will allow you to make decisions without having to consult a designer every time. This doesn’t mean going rogue and changing everything, but understanding the brand identity and  how style guides work will allow you do confidently create buttons, forms, and other elements without wasting time asking if they look ok.

 Design Goes Beyond Looks

Another important consideration is that design on the web isn’t only about aesthetics it is also about performance. This goes hand in hand with the responsiveness of websites as the size of images, number of images, javascript functionality, and numerous other factors all weigh heavily in on the users perception of your product. Having good design judgement means being able to know your threshold for the acceptable quality of compress images, video, and other visuals. It can also be helpful when considering animations especially on smaller screens too.

Any Knowledge Helps

While I feel like it is important for every front end developer to learn a little be of design, I don’t think that you have to “know it all”. Even a little bit of basic knowledge about topics like content hierarchy, color theory, space, lines, can go a long ways.  Learn some of the Gestalt Principals too! They will make you a better developer because you will be more confident when you need to make decisions, and a better team player when you need to collaborate with others.


Bleeping Awesome Beta Blog!

Finally.

After many days and nights of working hard I have finally uploaded the beta version of my site. So far I am really proud of what I have done so far.  There is still a lot to do, and I plan on going all out, using as many new technologies as I can to see what I can do.

Performance

One of the important focuses I have while building this site is learning how to make everything run as fast as possible. Whether that means compressing images a lot or modifying the expiration on served assets, I’ll be taking care of it all. Currently using Yslow my site gets a rating of 92. Not half bad! The only other changes I could make to impact that would be using a CDN or doing cookie-less domain stuff, which I don’t really need to do.

On Pingdom everything looks good as well.  The site gets a 99/100 performance grade (damn you Google Fonts). Oddly enough it looks like 71% of the time my site is waiting on Apache reverse lookups and I am trying to find a solution to solve that, so if you have an ideas let me know! 😎 Using Grunt has helped a lot since I merge and minify most of my CSS/Scripts except for the ones that come with the few plugins I use.

Design

Google’s Material Design guidelines served as inspiration for me. In particular I like their approach to handling shadows via inferred global lighting and how animations are created to “make sense” of the changing user interface. There are a lot of developers out there with really fancy websites that have crazy animations and effects which are awesome but not really what I wanted to do.  Since I try and blog as much as possible I really wanted a layout that focused on the content instead of aesthetics .

The homepage consists of a layout of cards which are a modified post content format. This makes it really easy to see a quick overview of the various topics the site is about without overloading you with a lot of copy. Eventually I would like to use AJAX to load each segment of paginated posts in but for now I think it works just fine.

One of the things I would like to fix the most is the slide out menu on the right. It works great on tablets and phones but on desktops it is too far away from the center content area and I need to either find a better solution or I may end up using a full screen menu.

Content pages have changed a lot and for the better. The featured images now span full width and the copy is a larger size which makes reading a lot more enjoyable. Since there is little to deal with in terms of layout, it all scales down nicely. At some point down the road I will create some page template types for special posts and more enriched content.

Tools

During the design phase of this project I used Sketch as it was the perfect time to learn a new program.  It is probably the best design software I have used in a long time and it is tailored towards website and app design. Everything is vector based and styling falls within the constraints of what the web can do i.e shadows can only look the way that they would using CSS.  There are a lot of plugins out there that extend Sketch and allow you to export CSS/SCSS, HTML, and even multiple sizes of images.

Foundation 5 comes with Bower and Grunt and I made sure to use both extensively during this project. In the past I just used Compass, but I am glad I made the change as I feel it helped decrease the setup time. Bower allows you to download packages either through its own repositories or Github urls. This is great because you can package manage all of your libraries and update them all from the command line. Grunt is definitely the hero of this story though because it allows you to do all sorts of automated tasks. I was using it to compile my SASS and minify it while also doing the same to my Javascript files.

More to come

There is still a lot left to do and I don’t plan on stopping anytime soon. Lots of changes are happening in my personal life so I hope that they do not interfere with all of the great ideas I have in store. The one thing I have always liked about websites is that they are never finished, at least not if you plan on it being successful.  Anyways, thanks for stopping by and I hope that you like the direction the new site is going!