I want to first design an iOS app's UI before actually building an app, like a concept design. So how to do it?

Hey Mustafa,

You could build the UI for your app in an application like Adobe Photoshop, Sketch or Adobe Illustrator. Some people even build a wireframe in an application like Balsamiq before they move into Photoshop, etc.

Search the Treehouse library for courses on Photoshop. I know they have a Photoshop and Illustrator course in the Web Design Track. And I think there is a course or at least an episode on Sketch.

Hope that helps you out.

Yep, you can use a number of graphic progams to help you create the UI screenshot, Photoshop, Illustrator, and Sketch are probably the most popular today. I have experience with all 3, and for UI building I like Sketch.

There are free alternatives to photoshop like Gimp and for a free alternative to Illustrator look at Inkscape. You'll also be able to find free to use photos of devices in peoples hand that you can overlay your UI into so it looks like your app is running on the device in someones hand.

Hey Mustafa.

So it has already been said; Photoshop, Illustrator (of which both programs have courses on Treehouse), and other free ones such as Gimp and Inkscape.

You may also want to consider simply drawing it by hand; the frustration of learning new software, or making the software fine tuned to what your vision is may be enough to frustrate you and distract you from your vision.

I am taking a Masters course of IT at the moment, and I am taking Human-Computer Interaction at the moment. My teacher believes that one of the best ways to start getting your ideas out there (and heck, even tweaked to what you were really having in mind) is to simply get out some paper, and start sketching your own thoughts. You'll slowly (or, even more fast than other methods) get your idea down on paper (visual aid) to which you can think "Oh, wait! I actually don't like that!" or "Hmm! Maybe this will be better!". Since you're working in an agile manner, you'll get your ideas out there with almost no time, and you can start refining immediately.

Don't worry if you feel that your drawing skills aren't good enough; mine are bad, but a ruler/book edge and a pencil later, you'll definitely get your 'vision' out there in no time, and that's the ideal first step.

Good luck! And don't forget to check out the iOS tracks/courses if you need to learn some iOS development.

My favorite app duo right now for concepting and prototyping apps would have to be Sketch and InVision. Sketch is not expensive and InVision i think is free.

http://bohemiancoding.com/sketch/

http://www.invisionapp.com/

Sketch is very similar to Adobe Illustrator but way more focused on UI design for apps and InVision is a prototyping tool that syncs up with sketch so you can build in simple animations and hover effects to simulate how the app UI might actually move or interact with the user.

Sketch is very intuitive to learn and also has great export functions built in to allow you to export your final UI elements at varying resolutions and sizes.

You could use Adobe Illustrator instead of Sketch if you wanted.

I would also advise hand sketching as the very first step in the process as it is the fastest way to narrow down your concepts.

Francesco //