March 20, 2013 - No Comments!

The Native Setup

I’m just a designer, but some stuff happened that resulted in me developing a whole REST API in Ruby on Rails. It was the first time for me to use Ruby but thanks to Rails community and Gems I learned fast and did something decent in no time.

Anyway I just want to share technologies we are currently using.

Server Setup

  • Ubuntu 12.04
  • Latest Nginx from Ubuntu
  • rbenv: To manage rubies for projects
  • Ruby 1.9.3
  • Rails 3.2.11
  • Redis: Used by Resque for background jobs

Rails Gems

  • Mongoid for mongodb
  • Devise for authentication and oAuth
  • RABL for formatting JSON responses
  • HTTParty for sending push notifications to pushbots
  • SendGrid for sending emails
  • Paperclip + for uploading attachments and sending them to Amazon S3
  • NewRelic for application monitoring
  • Mina for deployment, a lot smoother that Capistrano
  • Foreman for process management
  • Unicorn for running application server.
  • Resque for background jobs

Local Tips

  • Anvil. A utility for mac that allows you to drag any rails application and it will keep running and can be accessed via http://appName.dev
  • Genghis. An awesome tool for connecting to MongoDB. You can even set it up on the server to be accessed from any web browser.

March 17, 2013 - No Comments!

Mistakes of a Native

No matter what you read in books or others tell you, you will make mistakes in your startup, so accept it, learn from it and move on.

1. A Team of Founders

Never hire when you start. It should be always team of founders, 2-5 having 3 the perfect number for Design, Development, and Business. Hiring people to do your job is not the solution, because no matter what you do, they will still be employees, in their thinking and in their way of working. Going for a one man show is possible but don’t expect to release anytime soon.

2. Hire the Heart not the Brain

When hiring don’t choose the best developer for a group of interviewee’s hire the one who got the heart and passion for what they do, hire people who follow their heart, hire people who match your Startup culture and mindset. They are the people who will stay up all night for the release day, they are the people who are willing to give what it takes, they are the people who will not ask for tasks if they are free because they know what needs to be done.

3. Defined Hierarchy

Startups tend to be loose and friendly —which is cool. But without defining responsibilities and decision makers discussions will have no end. So be sure that you listen to others, explain your point, then take the decision or let the responsible one do it.

4. A Moving Platform

This one is critical, for a social network, never start with closed platform. I can’t stress this hard enough. When you target wide and broad set of people a closed platform will always require a set of other platforms. Here is a scenario “We are on iPhone”, “Do you have Android?”, “No”, “Windows”, “No”, “BB”, “No”, “Can you make one?”.

That is really annoying but its the truth, everyone will always want his platform, and hiring teams or freelancing to develop on all these platform and maintaining them requires a hell of a budget. So IMHO go for a JS web application with local storage from the start, unless you are relying on Apple or Google mobile API to do something cool or replying on the AppStore to advertise your application. You can always target specific mobile platform later.

5. Find your customer

Don’t look for the customer after you release or while testing, go look for the customer before you even start. He is the one who is going to pay, do don’t imagine the situation for him, go in forms, twitter, facebook and find out what annoys the user and what other competitors are doing wrong, then go do it better.

You can tailor a software for yourself, but you still need to find other customers like you with the same problems.

6. Never code without testing

Coding without testing is like climbing without a safe rope. Don’t expect your code to be working the same way after refactoring or adding a new feature. And relying on the tester to test all the cases he tested before is just bullshit. I’m not saying there should be no testers, but when discovering a flaw, it should not be able to make its way back to the application, and saying that its a waste of time or it will take more time, is more bullshit, because fixing bugs and re-fixing them will take more time from what you are trying to save.

7. Don’t sprint in an endurance race

The no sleep, no life, motivation speeches thing doesn’t work. In order to have a clear mind that is ready for work you need to stop the sprinting mentality with an endurance one. Go workout, have a good sleep, eat healthy, play from time to time, go watch a movie or a show, it’s not a wasted time, it’s what your mind needs in order to keep moving, and it will keep you from getting depressed. So keep your “all out” energy for times that you really need it.

8. Quality, Time, and Features

There is always sacrifice, and the best way to do it is to choose what are you willing to sacrifice. You can choose product quality with known cycles, but rolling features will be slow. You can choose definitive cycles and with lots of features, but quality will suffer. And finally you can choose quality and features, but take as long as you need or set a 3 months to 1 year period to make something perfect and polished.

It doesn’t matter what you choose as long as you know what you will sacrifice, and make peace with it.

9. Make some $$$

Don’t wait for enforcements to come, your alone in this shit hole, no one cares about your nor your startup, even if everyone likes the idea, doesn’t mean they are willing to share the risk with you. So the only way to deal with this is acting like there is no fund is coming, and find a way to make money before making your application. Show your worth before asking for money.

10. Launch

Launching is one of the hardes moments in your startup. It’s just a mixed feelings between fear and joy. You want to launch but scared that something will go wrong. So no matter what, launch first with little features, and no bugs, then add up as you go. By starting with less you will get feedback, be able to fix things fast, and know what features to add first.

Last words

When it comes to startups there is no definitive way of doing it, there is no recipe for success, so don’t regret any decisions you’ve done in the past. Past is only there to learn from, you can only become better when you learn from it.

February 18, 2013 - No Comments!

The Hybrid Era: Marriage of the Web and the Native

Why don’t we all just go web?

This idea doesn’t sound very good and there are lots of concerns, but it is worth it when done right.

The beauty of it lies in being easy and fast to push updates. Thats one hell of a problem when developing on iOS. Making a big deal for each and every update.

Another thing is not worrying about porting too much. You just port views and animations, but the content will be there.

There are lots of libraries out there. Problem is it doesn’t have the seamless native feeling yet. But we’ll get there very soon.

I don’t think native developers will die, but i don’t think the need for them will be as it used to be. Things are getting interesting much more interesting. The line is getting blurry and we are on our way to a one platform rules them all.

So whoever wants to rule the next 1-2 years you should be great at doing native web-apps on your mobile platform.

January 20, 2013 - No Comments!

According to Gym

Another Person: I became fat.

Me: So why don’t you train?

Another Person: I don’t have time to go to the gym, I’ve got excuse1, excuse2, …etc

Me: Then why don’t you just go one week?

Another Person: One week wont do any good. I need to go everyday.

Me: Why don’t you start with only one week, then add up.

Another Person: I don’t know, I just don’t see the point in going one day a week.

Me: Ok, then workout at home.

Another Person: But I don’t have the equipment.

Me: You don’t need the equipment, workout with what you have. Do bodyweight workout.

Another Person: Thats a good idea. Lets train together.

Me: Ok, lets go.

Weeks Later

Another Person: I became fat.

January 11, 2013 - No Comments!

Focus vs Goals: And The End of Resolutions

I’ve always been the man with the plan, always wanting to do something, change something, or learn something and planing ahead A, B, and even C. But most of the goals don’t get achieved and plan don’t work in any near way.

Happy New Year, I have 20 Goals to achieve this year, I want to do blah blah blah, and blah blah blah, …etc. This makes me feel bad every year, goals unachieved and can’t commit to something, but thats not reality.

People change, at least most people. I had a goal to start reading Novels, I tried to read everyday but at the end I couldn’t take it, it was just boring for me and I got distracted a lot, so I stopped. On the other hand, working out is pain during and after, and fear before starting, but I enjoy doing it, not because I want to look bulky, but to be in good health that allows me to do anything.

Goals. They are about having 1,2,3 goals that you want to achieve and having a plan to achieve them. Also goals allow having multiple goals under the same section of your life. Plans here work by having a plan, a backup and a backup backup plan.

Focus. They are about having an action that you want to do right now, next month, next year, or the rest of your life. You don’t say “I want to be the best weight lifter in the gym”, or “I want to have the best startup in my region”. You just say “I want to be healthy”, “I want to build my own startup”. Both may seem like an unspecific goals, but they are about having not expected outcome of what you do, they are just about having something you want to do, and you go do just that, let the outcomes surprise you. Planning just goes along the way, “what are the necessary steps that I need to take now to be healthy?”, “How can I build a successful startup?”. If the environment change and it will, be flexible enough to change your plans too, it not written in stone.

I want, and you want. Wether it is goals or focus at the end we all have something out of this life. A lot of people have a lot and big goals & dreams in their life, but they don’t work on it. They just want to be the best in their field and they don’t want to sacrifice neither time nor effort to be the best. They don’t do the most basic thing —which is reading— to become better. When you do your homework a lot of random things will happen, and give you amazing opportunities that you could never plan or anticipate, but you need to work hard first in order to receive them. There is no way around that.

December 30, 2012 - No Comments!

Jedi Color Tricks

Wether you are a designer or not, we all use color in our life for a document, presentation, and it can go to the extent of creating an entire UI.

Colors are pain in the ass. They are many and sometime it is very hard to get the right value — I’m talking to you yellow — if you don’t know what you’re doing. So here is a little trick to help you.

The first Rule is to use HSB or Hue Saturation Brightness as your color slider. It is a lot easier than the color wheel, square, and definitely easier than RGB.

If you are using a mac go to the second tab then choose HSB from the dropdown list.

Choose the color that you want from the hue and you finished 80% of the problem.

Next play with the saturation and brightness to get the right value, but be careful when you go higher than 90% and lower than 40%. Try to make a difference more than 10 points between either values. So if saturation is 66; go with 56 or 76 for brightness. If saturation is higher you will get darker colors, and if brightness is higher you will get more pale colors.

How to use this? Mix it up, use a pale background then switch values from being pale dominant to dark dominant and see if it blends while being readable. Once you get play with this a little you will get the idea.

As a practice try to open keynote for 5 minutes, add a title then play with the title and the background. See how each value looks like and see if it matches whats on your mind. After you finish exercise you will be a different person.

December 28, 2012 - No Comments!

Sticky List: Get your todos on sticky notes

For me there are lots of todo lists everywhere, Clear, Github issues, Evernote, and Sticky notes tasks that come up while working like small bugs, or an small export for design. For me this is madness. It is hard to keep up with all this, so here is what I do.

  1. Before working I review all the tasks that needs to be done by the day and leave room for any incoming tasks.
  2. Get everything in one simple sticky note and finish it through the day. If it doesn’t fit the sticky note then you need to break it into simple tasks to be able to finish
  3. Go through tasks like your working out, warmup with with easy tasks, move on to heavy weight tasks, then finish up with easy and errand tasks.
  4. Throughout the day any incoming tasks append it to the end of the list. Never interrupt what your currently doing.
  5. If you finished early have fun, and if your late smack your self 😛

December 19, 2012 - No Comments!

Starting Flat: Flat vs Not Flat UI & What’s between them

Many designers and non designers associate Flat with simple and Textured with Complex UI. Having flat UI doesn’t mean it is easy, and having complex UI with textures doesn’t mean it is hard, all it gets down to. It depends on how you organize your UI. Flat & Nonflat is just a preference.

Why Start Flat?

Flat is awesome for startups with small budget and tight schedule as they don’t take much effort to setup, and whether you are developing or other are implementing your design, it is a lot easier to just go with flat. That doesn’t mean you should use flat because of that, it means you should just be careful with every pixel you add, because it will add an overhead on you to maintain and you can easily confuse users with cramping UI and lots of glossy effects that have no good effect on the user.

Think of it as a mockup, build your whole UI in a flat sense use just rounder corners as buttons, put text without drop-shadow, build in a gray scale. Focus on IA first then move to typography and colors.

Only add when you need to

Does it work? Do people understand every UI element’s purpos? Do people understand that these are buttons and these are links? can they read the text or is it too small for them? If people understand everything, you are good to go, if not try adding more effects, making for example button in gradient, or making it 3D, maybe adding some dropshadow for small text that can be hard to read unless you add drop-shadow.

The process may seem tedious, but its important to understand every pixel you put, adding drop-shadows all over the place with Photoshop or CSS, doesn’t make you a good designer, understanding the reason behind adding those effects is what makes you a better designer.

November 16, 2012 - No Comments!

Information Diet: We Are Not Data-centers

I’m guilty of being information sucker, always wasting my time reading blogs, and surfing the internet for something I don’t know about. There is no problem in reading blogs, and surfing purposeless for little time. The problem is when it keeps you distracted. Filtering hundreds of blogs in your RSS reader, and tens of daily newsletter emails coming to the inbox. Notifications on your iPhone and on your Mac, and if you have iPad too, you’re kinda damned — All you need is one notification and three devices will make a party out of it.

CTC or Cut The Crap

Ask yourself, what do I really need? How to get best information without being overloaded with other crap? For me I always choose 1-3 maximum of things to follow under that same category. I know I will loose a lot of good information, but I’ll be left with the best, and all the crap will be cut off.

When in doubt, Save for later

Saving for later is awesome, because 90% of the time you will just delete what you’ve saved because it is irrelevant. It seems stupid at first — Why would you save it in the first place, because sometimes you come to something that appear awesome to you because your doing something boring or looking for excuse not to work. So if you stumble upon something important procrastinate distractions.

One Medium

Setup all your information to endup in the same place. It doesn’t matter if it is email, rss, or twitter as long as they all endup in the same place. This will destination will act as an inbox, so when you have free time you can just scroll without jumping applications.

Kill Notifications

Notifications are awesome when they are just used for couple of apps. Because most of the applications just abuse notifications with reminders to use the app, or do something for them, so unless there is a value, notifications will remain off. So for me only couple of applications are allowed to distract me.

Disappear from time to time

When things go tight, you can always disappear for couple of days, weeks, or even months. As long as it takes to be focused. Close your phone, notifications, or even close your internet — if your work doesn’t depend on it — and just go things that matter.

October 29, 2012 - No Comments!

iOS Design: My Workflow

Before

Design at @2x. Export everything, then scale using Resizer or Prepo. Problem is …

  • Design kinda looks different.
  • Everything need to be even from margin to export size.
  • Effects and strokes need to be double to appear sharp.
  • Resizing @2x images after export sometime looks pixelated.

Now

Design for @1x. Scale 200% using Bjango actions, export it using Cut and Slice, then back to 100% again. This allows me to …

  • Get around the even problem.
  • Have the same pixels grid as on iphone.
  • Build everything to be scalable even textures.
  • The file size is a lot smaller and performance is a lot snappier when working on a big UI sheet.

Workflow

  1. Find inspiration, collect it, and stick with it till you finish the design.
  2. Always sketch first, draw simple architecture for the app. Throw as much ideas as you can, I go with 5 alternatives for everything.
  3. Create a document at 1x scale of iPhone 5 (320x568)
  4. Vector is your friends all the time.
  5. Smart Object are not efficient in working with scalable document, as you will need to scale the smart object as you scale the main document.
  6. Don’t use slices for export, use Cut & Slice. It will force you to organize your layers and export everything for you in @1x and @2x scale.
  7. Export as soon as you can. And make sure everything is pixel perfect.
  8. For the icon, work on 512 then scale using Bjango actions to support iPhone, iPad, iTunes sizes.
Folder Organization
  • project_name/_assets/ Contains exported png’s @1x @2x. Never put your images in sub-folders — having @1x and @2x folder is the exception.
  • project_name/_ui_sheet.psd Contains the main elements for the application for exporting
  • project_name/screen_name.psd Contains a specific screen design to illustrate how the UI works, much like a mockup. Not used for exporting
Naming Convention
  • parent-child: always name the images in a parent child structure, ex: nav-bkg.png, nav-home-btn.png
  • -btn-: for buttons, ex: action-btn.png, action-btn-pressed.png, action-btn-active.png
  • tabbar-: for tabbar images, ex: tabbar-home.png
  • -bkg: for background images, ex: home-bkg.png
  • @2x: for all retina display graphics, ex: home@2x.png

Remember, if your exported elements aren’t grouped by naming, your doing it wrong. Every object with its relative images should be couple of clicks away.

Tools

  • Cut & Slice — PS extension for exporting iOS and Android design.
  • Bjango Actions — Set of PS actions to automate repetitive tasks.
  • Skala — App that allows me preview the design live from PS to iPhone directly without even hitting save

First version always sucks, learn from your mistakes, fix the current version instead of rebuilding it.