Sharing some tools
A personal list
Design e development process can be different depending on personal taste, which not necessarily is a bad thing, feeling comfortable with your own tools is important, and it builds up that kinda of confidence that can always came handy, especially when working professionally in the industry.
That said, everything I am gonna talk about today are not stuff you MUST use but just simple advices.
Sharing is caring so I decided to put together this list.
Anvil
Anvil is the simplest software on the planet for managing local websites. There are different solutions that allows you to do it, like MAMP, which offers also more options and complexity. What I love about Anvil is that it feels that easy .
You have just to create a folder with a bunch of files for your website, move the folder to the menu bar and it’s done. It will set up a myfolder.dev page ready to use. Also every device connected to the same network can access the website by doing so myfolder.yourIpAddress.xip.io which is fantastic for mobile apps or mobile website testing. Again there are a googolplex of software that do that, but you really have to try Anvil to see how much better deal with it.
Plugins for Sublime text
Sublime is my favorite code editor. End.
In the past I found my self using Coda or Espresso, for than realizing Sublime was just better in some things, and one of the things is its highly customization.
I think people are a bit intimidated about it and I have to be honest, coming out from the box looks a bit ugly. But we all know that in the past beauty and development was not really a thing.
So before we put our hands on let’s make things pretty.
Soda Theme will change completely the interfaces of the app and including also some color schemes. On the other things will allows you to see folder icons on the sidebar, wich is not necessarily a miracle, but when you are gonna work with a lot of files your eyes are gonna thanks me.
Personally my favorite color scheme is Solarized, I love the Menlo typeface and its color. But again here is more a matter of your taste.
Let’s see some interesting plugin now:
The mother of all the plugins. You will need to install it to get mostly of the plugins and open your mind to a new world.
Allows you to see changes in file after saving, instantaneously. That means you dont have to refresh every time on your browser. Be sure you are installing the right version for your app, it changes if you are using Sublime 2 or 3.
HTML and CSS snippets
The always good Joshua Hibbert came up with this totally free and totally fantastic snippets that will autocomplete certain piece of code for you just buy pressing tab after using a certain keyword. Look it up here for the full keywords list.
Auto indent your code:
I figured out this few days ago, this is not actually a plugin, but a key shortcut you can use. So just go to preferences > Key Binging -User and add this:
[ {“keys”: [“alt+shift+f”], “command”: “reindent”, “args”: {“single_line”: false}}
]
There are so many plugins for Sublime and of course I cant write about all of them, but this is what I would definitely advice.
Sketch
I cant stress this more, when it comes to vector Illustrations, fast prototyping, icon design, Sketch is really a fantastic tool. Obviously less powerful of its cousin Ai, sketch mix simplicity, a clean interface and some really cool functions.
My favorite are the possibility to apply multiple effects to the same shapes, a vector pencil tools that feels super natural, link style, possibility of streaming multiple art boards in the same time to your iPhone and iPad, an amazing rendering system and more and more
Sketch is also ( sadly ) a better tool for UI design, the software was build with that main target in mind. I say sadly because is still not so famous and I will love people will give him a try. Also when it comes to professional envoriment Ps is still the standard, so working on big project, using Sktech can be a breakdown for all the team.
But definitely something is moving, after more and more tech companies are using it, Facebook, Google and Apple, just to name few. Even teehan+lax published a sketch file of their famous iOS7 gui elements.
Framer
Design we all know is the farest thing from a static behavior. Design is movement, emotion, flow, interaction, animations. Definitely design moves in time and people move with it.
That’s why people have tried tool that could help them prototyping in this active and moving world. In the past the choice would have been Quartz Composer, but its generally “old age” and lack of documentation doesn't make it a really appealing tool to use.
Here is where Framer come to play.
Essentially it will create a website folder that will include all the assets of a .psd of our choice, in this folder the only things we have to do is creating a app.js which will serve as main code for the interaction prototype. Documentation is amazing and the app itself is super powerful.
There is also a plugin for using it with Sketch, yes.
Chrome extensions
Window Resizer: It will give you the possibility of resizing the window to certain dimension, higly customizable
Comps : the plugin for “pixel perfect web-design”, allows to overlay a webpage with a certain images, so to spoil differences.
WhatFont : Tells you the fonts of element you are hovering with the mouse while browning the web
Memorable mentions
Things : The best task manager for mac
Simplenote: The simplest way to keep notes. Including iCloud sync and cross platform compatibility
Ulisses III: The best Markdown editor in my opinion
Fonts: Manage all your local font with ease.
MindNode pro: for writing mind maps.
As always, thank you for reading.
