This site was fun to make even if there isn’t a ton going on with it. Like much of what I have been working with lately this has a lot of behind the scenes efforts employed. For instance, I made heavy use of vectors when it made sense. The team members were perfect candidates for a little Adobe Illustrator work. Some of the social icons are also just icon fonts from Font Awesome, one of my favorite tools to use right now.
When I convert the PSD to HTML, much of the work happens before I write a single line of code, I’ll explain. The idea with stage of development is to create that file system as efficiently as possible. To be efficient, one must spend the right amount of time in planning. I know what my class names are before I get started. I know how they are going to be separated, either a hyphen – or an underscore _. Sometimes I only receive a PSD and nothing more, as in this case. Much of that pre-coding stage involves asset development.
Asset development used to mean simply slicing up the PSD but that is not good enough anymore. Most of what we used to use background images for can now be done in CSS. If the look of that background can’t be accomplished in simple CSS then there are some tools that can create the more elaborate solutions for you. The particular design had lots of vectors but they were not initially created with the use that I had in mind at development. This is why I sat down for a morning and worked my way through making these vector images exactly what I wanted. That morning saved me a day of fighting with rastor images that just didn’t look right in 2015.