Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Delip Rao
1,736 PointsFinding optimal positions, font sizes etc.
Ok. A n00b question here as I don’t have any mobile/frontend dev experience.
This lecture appeared like black magic. During the lecture, the instructor is saying things like "Let's set the font size 12", and my favorite "Let's put the X value to 58, Y to 377, width to 58 and height to 14". My question: Where are these magic numbers coming from? How do I get these numbers for every widget I'm placing in a different app I want to write? Are softwares that help us mock these values (if so what are they)? I’m interested in the design process that went into producing these values.
Thanks
2 Answers
Matthew Stroh
2,287 PointsI agree that the decisions could have been explained a littler better. In reality, the numbers chosen aren't really what's important. Essentially, the X co-ordinates were chosen to make sure that when you drag, it was 40 pixels from the edges. Note, that you can choose those X co-ordinates to be approximate and then modify the constraint after. That's probably a more CLEAR way to show it done in the video, to be honest, but it would be an extra step.
The 14px height is based on the font-size (12pt).
Anyway, the key takeaways for this is that the labels are 40px from the edges of the device and that it's really about how labels are constrained to other elements on the page.
ben10
5,289 PointsWow! Programming is easy next to this whirlwind "explanation" of the relative locations. My 5.5" version looks like hot mess of labels.