Skip to content

Tools, Frameworks and Software That We Currently Use

Posted by ryan on

Sketch

Sketch is my primary design tool for both UI & UX. I was an early adopter of Sketch because I used to be a huge fan of Adobe Fireworks which ended up getting discontinued a few years ago. I felt like my world was going to end because I truly don’t believe that Photoshop is the right tool for UX work. In fact, I hate Photoshop (there, I said it) unless you just need to manipulate photos which the tool is designed for other than that, It’s completely bloated for interactive design work. There are many reasons why I think Sketch is rad but the two that changed my life are symbols and the ease of exporting assets. If you’re still on the fence about jumping ship from Photoshop to Sketch, I recommend reading this article.

invision

InVision

InVision is a life saver. Period. Getting into the industry as a tradition Web Designer (Yes, this is when you had to code your own designs) before it seemed like it was the “cool thing” to do, there was a huge gap between design and development. Luckily, InVision helps bridge this gap so that you can convey how your design is not only going to look and feel but also is capable of demonstrating some functionality. It allows you to create hot spots which link all of your pages together which gives you a nice idea of how your interactive project is going to function before writing one single line of code. InVision keeps getting better and better and you can even add animations and create mobile experiences which allows the client to experience a beautiful experience before this ever gets into the developer hands. Developers love it because they don’t have to ask thousands of questions and be unsure if they’re implementing design properly.

iTerm2

iTerm2

Being a hybrid (designer/developer), I was pretty intimidated by the command line at first because the only people I every saw using it usually typically wore a t-shirt that said “insert nerd word here”. Whenever I could use a GUI, I would. It was until I had to start using GIT on a daily basis and discovered Oh My Zsh to pimp out my terminal that I was finally stoked to learn more about the command line. In order to even be a top notch front-end developer these day, I truly believe that you have to know your way around the terminal to achieve every day task such as NPM install “New cool kid on the block module that will get beat up in a month”. Following Wes Bos’ tutorial Command Line Power Users really changed my perspective on the command line.

Atom

Atom

Switching from Sublime Text (only because the other cool developers did) I’ve found Atom to be pretty rad even though Sublime can pretty much do everything just as good. I dig the fact that Atom is open source and was created by GitHub. It’s only a matter of time before the sublime faithful convert over to this text editor. When I initially started using Atom, the thing that made me feel white and nerdy was how it integrated with GIT and showed me which files I’ve edited that haven’t been committed. I’m assuming that there’s a super sweet Sublime plugin for this now a days to handle this. The one things that pisses me off about Atom in comparison to Sublime is opening up a huge minified file. Atom tends to crash in this scenario but it’s so rare that I’ve made it my every day editor. One of the hardest reason for me to leave Sublime was because it’s named after one of my favorite bands of all time.

Emmet

Emmet

If you love CSS like I do, Emmet is your bro. Basically all you have to do is type in css abbreviations in your HTML and hit tab and it will spit out everything that your CSS mind was thinking. It will save you a shit ton of time once you get in the flow of things. I recommend starting out simple to get going such as .nav#top-nav>ul>li*5>a(hit tab). There you have it…there’s the html for your five item top navigation. I will will double check that still work tomorrow since i’ve been sipping a few beers from my favorite local brewery Sante Adairius (Yes, I frequent here so often that I’m their web dude).

git

Git

Over the past couple of year, I started integrating GIT into my workflow and I’ll never start a new project without it. It’s great to have a backup point of your code every step of the of the way so that you can alway revert back if need be. It’s also great for a team environment so that someone can checkout the repo and create a new branch for the features that they’re going to be adding and ensure that they’re not going to break the other developers work. It’s basically a safety net that allows you to feel comfortable knowing that you can always get back to wear you started if shit hits the fan.

Foundation

Over the past few years I’ve tried several front end frameworks and for a while I just got stuck thinking that bootstrap was the best because it was so widely adopted. Living in Santa Cruz, I’m close to the creators of Foundation and have attended many of their meetups to learn more about their amazing product. I recently built the website for the New York Code + Design Academy (which I was pretty stoked on since I’m a hybrid myself) using the framework and I have officially decided that foundation is the right choice for me. Check out the Zurb Stack and you will be up and running with SASS, Handlebars, Browsersync and many other amazing tools to help you build either a kick ass prototype or full blown project! It’s blazing fast and I don’t see it slowing down anytime soon as they’ve now integrated webpack to bundle your JavaScript.

foundation for emails

Foundation for Emails

Oh, the dreaded email. Yes, coding HTML emails sucks… especially when you have to make them responsive. There’s nothing quite like nesting tables within tables and having to inline-style every element. Sounds Like hell right? Luckily, HTML emails (even responsive ones) Don’t have to suck anymore. As you already know, I’m a huge fan of Foundation for Sites and the same company also created an amazing frame work for emails. Yes, You guessed it…it’s called Foundation for Emails. It allows you to write modern HTML mark up and even let’s you use SASS and Handlebars to help componentized your project. Finally, you can now build responsive emails that look great on any device and all of the major email clients, even Outlook!

WordPress

WordPress

Being a freelancer for many of years. I was quickly turned on to WordPress because it allowed me to turn around projects in a timely fashion. The first content management system that I was ever introduced to was Drupal and I absolutely hated it. Everything about Drupal from it’s vocabulary to templating was kind of a pain in the ass to have to figure out. Once I left that job, I was introduced to WordPress and I immediately feel in love with it. I had always thought that WordPress was blogging software until I figured out how to transition it into a full blown CMS. Today When I build custom WordPress sites I integrate tools like Custom Post Types and Advanced Custom Fields so that the client can extend there website without having to deal with any code or worry about breaking their website. For a more visual client I often implement visual composer and create custom grids for them so they can easily drag and drop different elements on the page which of course matches the look and feel of the rest of their website. I’m able to start an entire WordPress project from scratch and this has become my favorite started theme which comes with all of those fancy tools that foundation comes with.

Shopify

When I first got in the Ecommerce game, I was so fortunate to use shitty software like Zen Cart and OScommerce (This is sarcasm font). Then there was all this hype for Magento to come and be the next best thing since sliced bread and that was not the case. The shop that I was at embraced Magento early on and we went through all of the trials and tribulations. Just being a frontend Magento developer was a pain in the ass because you had to work out of 2 different directories to style things, work with XML and duplicate numerous blocks of code so that shit wouldn’t hit the fan when you did a security update. Then, Shopify came to save the day! Their liquid templating language and beautiful backend made it a joy to work with. Did I mention that their hosted platform handles all of the security updates for you? I highly recommend putting yours and your clients mind at ease with Shopify.

Alfred

It’s all about speed. Period. I don’t care who you are, who you think you are or who your daddy is. At the end of the day, if you’re not able to move around a pump out your projects in a timely fashion because you’re spending to much time being a mouse jockey rather than slaying a way at your keys…you’re probably a little slow. Alfred allows you to eliminate the mouse pretty much completely. If I was only a developer and not a designer, my goal would be to not have to use a mouse at all. It allows you to launch applications and find files on your Mac or on the web. You can pretty much control everything on your Mac using Alfred and/or the command line. My dream is to one day design an entire app or website without having to use a mouse. I’m getting pretty good at design in the browser alone at this point so we’ll see if I ever even have to launch Sketch or Photoshop ever again (It would probably be possible if there wasn’t client feedback).

Leave a Reply

Your email address will not be published. Required fields are marked *

So now what?

We’re ready! Let’s do this.