All Posts in Design

April 15, 2013 - No Comments!

Photoshop sucks

a lot of memory of course.

When I use it i can’t open anything else. Even with a 8 GB Ram, it hogs it all.

So from here on, I’m going to use Pixelmator for all Graphic Design. I’ll use Sketch for UI, but thats for later.

Its simple, easy, and got a lot of cool effects. Its not good in UI, but its amazing in doing graphic work.

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 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.

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.

October 20, 2012 - No Comments!

The Lazy Designer

Being lazy is not that bad as people frame it. Sometimes it is good to be lazy

  • TLD will do as minimal works as possible, and by setting his priorities right it can be his advantage. Focus
  • TLD when faced a problem, he will think of the least effort way to accomplish it. UX
  • TLD will have a lot of time wandering around doing irrelevant stuff, which will help him progress what he’ve learned and have new ideas. Creativity
  • TLD won’t act on every idea he has, instead he will wait till it blossom then he’ll start working on it. Patience

“You came here because we do this better than you, and part of that is letting our creatives be unproductive until they are.” — Don Draper

See it is not that bad, if you have other points to add just reply on this post and I will add it under your name 🙂