Visual layouts

[Peter Robinett]

Hi all,

A few quick questions for an app idea of mine: Do you use visual layouts (storyboards and/or NIBs)? How do you collaborate with designers? Do you show them your layouts? If so, how?

Thanks!

Peter

[Klaas Pieter Annema]

I use storyboards for everything, at the moment I don't directly collaborate on them with designers but it does make incorporating design feedback a lot easier in my opinion. If a designer mentions that something looks off I can just push it a point in a direction and immediately show the result. After the designer thinks it looks right you can go ahead and do whatever work is necessary to make it look like that in every screen size / orientation / localization.

Three generic tips when working with storyboards.

1. Try to make the storyboard look as much like the real app as possible. Inevitable there are going to be things that can only be done in code but you can often at least make the UI familiar. That way you can still move things around and show a designer what the end result is going to look like. 

2. Setup constraints as late as possible. Quickly prototyping is easier if you only have to take current screen size / localization into account. I tend to have a phase after finishing a new UI where I go through it and setup constraints.

3. Agree on naming conventions. A large part of working with storyboards from code is arbitrary strings that identify the components of your storyboards (segues, view controllers, etc). By consistently using the same names you make your life a lot easier. I open sourced mine if you're looking for inspiration.

Hope that helps.

- Klaas Pieter

--
You received this message because you are subscribed to the Google Groups "CocoaHeads NL" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cocoaheadsnl...@googlegroups.com.
To post to this group, send email to cocoah...@googlegroups.com.
Visit this group at http://groups.google.com/group/cocoaheadsnl.
For more options, visit https://groups.google.com/groups/opt_out.

--

Buy a Karma get 500MB free.

https://yourkarma.com/invite/klapie

[Axel Roest]

I do not often use storyboards yet, mostly inertia and the need to be backwards compatible. But XIBs are a big yes. 

Working with designers can be interactive, e.g. in a scrum team, or designer driven where I implement the exact layout as defined in a redline document. 

I prefer the back-and-forth brainstorming between designer and developer, as we developers know which things are easy to implement and look 'spiffy', e.g. animations, whereas non-ux designers tend to focus on visuals and don't understand the need for animation.

just my € 0.02

Axel

[Igor Sutton]

One of the biggest issues I expect Apple solves soon is the fact we can't use interfaces designed in XIB files in storyboards.

Also, try to not make your storyboards too big: a good practice is to try to split your storyboard based on features, to minimize the risk of merge conflicts (which are painful to solve).

Igor.

[Jos Jong]

For a few projects now I used an app called POP (https://popapp.in/):
1. Draw write frames on paper
2. Make photos using this app
3. Add links between the different pages

It may not be ideal for a fancy prototype (read: demo) to customers, but it think it works very well during the design phase because:
- It brings the app to life
- You're not distracted by the restrictions of any GUI design tools (especially when the app contains more than 'just' the standard GUI controls)

Cheers,

Jos Jong

Igor Sutton schreef op 18-11-13 21:25:

One of the biggest issues I expect Apple solves soon is the fact we can't use interfaces designed in XIB files in storyboards.

Also, try to not make your storyboards too big: a good practice is to try to split your storyboard based on features, to minimize the risk of merge conflicts (which are painful to solve).

Igor.

On 18 Nov 2013, at 16:38, Axel Roest <axe...@gmail.com> wrote:

I do not often use storyboards yet, mostly inertia and the need to be backwards compatible. But XIBs are a big yes.�

Working with designers can be interactive, e.g. in a scrum team, or designer driven where I implement the exact layout as defined in a redline document.�

I prefer the back-and-forth brainstorming between designer and developer, as we developers know which things are easy to implement and look 'spiffy', e.g. animations, whereas non-ux designers tend to focus on visuals and don't understand the need for animation.

just my � 0.02

Axel

On 18 nov. 2013, at 10:23, Peter Robinett <pe...@bubblefoundry.com> wrote:

Hi all,

A few quick questions for an app idea of mine: Do you use visual layouts (storyboards and/or NIBs)? How do you collaborate with designers? Do you show them your layouts? If so, how?

Thanks!

Peter

--
You received this message because you are subscribed to the Google Groups "CocoaHeads NL" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cocoaheadsnl...@googlegroups.com.
To post to this group, send email to cocoah...@googlegroups.com.
Visit this group at http://groups.google.com/group/cocoaheadsnl.
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "CocoaHeads NL" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cocoaheadsnl...@googlegroups.com.
To post to this group, send email to cocoah...@googlegroups.com.
Visit this group at http://groups.google.com/group/cocoaheadsnl.
For more options, visit https://groups.google.com/groups/opt_out.

[Peter Robinett]

Thanks for the feedback, guys. I'm considering making a little app that would export storyboards and NIBs to large PNGs (or PDFs), and I was wondering whether people actually have that need.

From what I hear, it sounds like it might be helpful, but it wouldn't solve a huge need for people.

Peter

[Bas Meijer]

Take a look at AppCooker for iPad. That might also be helpful in communication about visual design. I suggested the developer to add an export to storyboards.

Bas

--

[Axel Roest]

For final checkup by the designer I just make lots of screenshots in the simulator which they overlay on the original design in Photoshop so they can check pixel alignments and stuff. Also if the sizes of labels and buttons are changed in code, e.g. to accomodate localisations, the original XIBs are nothing more than a guideline anyway.

I don't really need an app for that: command-S in the simulator works quite dandy, thank you.

Axel

[I Sutton Lopes]

I think it's pretty useful. 

Sent from my iPhone

--