Technical App Designer with Sketch

App design is hard! At least if you have a development background like me. There are a lot of things you have to take into account in any design. So to start to learn app design I did what I often do when faced with a new problem. I started looking for new tools. In this case I had heard from people I worked with about an app called Sketch, and it came with warm recommendations. So I decided to give it a go. Previously I had tried, with little result, Photoshop and Illustrator. So was very excited to see what this app could do differently.

In this post I will share my experience with Sketch. Some issues, tips and additional resources I have encountered while working with it.

Briefing

My first step, when learning a new tool, is always to watch and/or read a tutorial. That’s only half true though because I never watch a complete tutorial. I really like the idea of making the mistakes myself and I really love solving all the problems that arises. In this case though it might not be true at all because I just downloaded the app and started using with it.

In my experience it is always better to have a project in mind when starting to work with a new tool. This gives you a goal of what you want to achieve, it also makes it more real in some way. If you don’t have a goal in mind, you will end up just “playing” with it.

In this case it was quite easy for me. I already had a iOS project that I wanted to work with. A goal/task manager for iPhone, iPad and Mac codename “Allan”. This project would let me explore a lot of different sizes and layouts (I will write about “Allan” in a different post, if I don’t drop the project as I usually do).

First blood

Starting up Sketch I found that there was a template with iOS components, great! Next I created a new art board and conveniently there was predefined sizes for iPhone (and a lot of other sizes including iPad sizes). I started copying components from the template to my art board, and changing their sizes and colors I soon realized that everything was changing in the original component. Same went for text I changed in my copied elements. This was apparently a feature not a bug. The elements I copied were of a type called Symbols. What you have to do is to detach it from the original.

Sketch context menu ’Detach from Symbol’

After this initial hurtle I have not run into any major problems. And It has a some features I like;

  • It is easy to manage the layers.
  • Drag n’ drop existing bitmaps or vector I onto the canvas.
  • It opens even very large Sketch documents fast. Amazing!

Sketch is light years ahead of Photoshop in my mind and for a fraction of the price.

I also know it has a lot of features for exporting different sizes appropriate for iOS development. But I have not yet used these features (I am still designing my first app with it). So I will not comment on them yet.

Tips

If you are like me you will just jump right in and skip all the intros. Definitely works it is intuitive enough for that. However I almost forgot the had an intro. After a while it was valuable to refer back to this intro.

In doing so I also found their support site. Which I have yet to use, but it seems to go into comprehensive detail for everything you might want to accomplish .

I might be back later with a further review. To round up I want to recommend a webpage called Sketchapp Sources I found that has a lot of resources for Sketch. Found a lot of iOS resources there. I always used teehan+lax iOS components when trying to use Photoshop, and they have made a version for sketch as well.

Coder Podcasts Recommendations

I listen to a lot of great tech podcasts and I wanted to share a few coder related once with you. If you have any other favourites that I should listen to send me a tweet.

Kodsnack

Kodsnack is a podcast in Swedish about coding and development related topics. The best thing about this podcast must be Kristoffer and the way he always seems to have something new to complain about, or JavaScript. It is always funny, but there is always a fundamental truth to what he says and he has made me aware of numerous problems I didn’t even know existed. The other two hosts Tobias and Fredrik are also great, but you always have a favourite, don’t you.

They cover topics things ranging from new programming languages to handling people who don’t understand the development process. Always related to coding and coders. There are other podcasts that focus more on a specific platform or technology. But the thing that makes this podcast great is that very practical and subjective view of programming and developer. There is a chemistry between these guys that make it a delight to listen to and you always leave a little bit wiser.

Kodsnack has made a huge impact on my life and how I think about my work as a coder. I can truly say I am a better coder because of it. I am always looking forward to the next episode and I have listened since episode 0. I can’t recommend it enough.

Build Phase

In contrast to Kodsnack this podcast is in English, but perhaps more importantly it covers a very particular programming platform. Namely Apples iOS and Mac OSX. It is usually hosted by two guys Mark and Gordon. They both have strong opinions and it is very educational to listen to their rants.

This is not a podcast for learning iOS development, they cover advanced topics such as functional programming. But if you are a little more advanced, you don’t have to be an expert, this podcast is great. It has inspired me to investigate functional programming and other paradigms. They always cover technical topics and rarely cover news and rumours, which makes it a great podcast for improving your iOS skills.

Simple website with Hugo

As you might see I have changed the design of my website (more likely this is your first time here, in any case welcome). I first got the idea when the site generation engine Hugo was mentioned on Kodsnack. They said they used it to generate the website for their podcast and it sounded very easy and convenient to use. So here it is.

In this post I will write a bit about Hugo and what I think about the approach.

About Hugo

”A Fast & Modern Static Website Engine”

Hugo likes to brag about how fast they generate sites. I was really sceptical to this a first, not doubting that it would be fast, but how necessary it was for it to be that fast. But as I am writing this I am tabbing between my markdown editor of choose Byword and my website that is regenerated each time I save. I suspect I can’t go back to working in any other way.

hugo server -w

So this is no tutorial on how to use Hugo to create your site. They provide excellent tutorials for that. What I want to write about is the concept itself.

Since Hugo sites are actually just old HTML and CSS sites with no dynamic elements or server side loading the sites load extremely fast in the viewers browser. Again with the speed you say, yes it’s important! How much do you resent websites that load slowly? I for one can’t stand it, so why should my readers.

Mobile

Hugo generates it’s sites from markdown as I mentioned earlier, this is great because that is just a basic textile. Making it easy to edit it from anywhere on any device. Fits me perfectly. One thing I need to solve with my setup is the fact that I host the site as a Github page. Not that I want a different host but I need to find a good markdown editor with a git client. Hmm maybe I will just build one myself.

Anyway what I am thinking of doing now is to put the entire site into dropbox so I can easily get the files on my iPhone and iPad. Would be great to be able to review and write on the subway on the way to town.

Themes

Hugo has a limited number of themes and they can be quite difficult to browse through. But it is open source and more are being added all the time. I actually added my theme as a submodule and it has been working great so far.

git submodule add https://github.com/keichi/vienna

And it’s so easy to override the CSS, Images, etc., from the theme. Just add your version of the file you want to replace in your tree at the same relative path as in the theme and Hugo will pick that resource instead.

Conclusion

To conclude. I think that if your website ”Needs” one of these big, evil content management systems, like Wordpress, you are doing it wrong!