Design‎ > ‎

Design workshop

Design workshop is where we are uploading our prototypes (ideas of what the main page should look like) please give us feed back.

The most debated and interesting discussions that have taken place about our project are what the splash and main pages should look like.  Students have begun submitting design prototypes. Some are rough sketches, some are coloured. We are simply gathering ideas at this point. No final decision will be made until the end of June.  Students took pictures and uploaded some of them today. Thanks, Hunter, Emily and Sydney!  You guys are so amazing! These girls problem solved and figured out how to put them in the wiki on their own.  Do you have any suggestions for a way to display them in the wiki?

Great job everyone. Here's some instructions on adding them into this page. Can you do that, and then Cynthia and I (and perhaps others) will offer comments.

How to insert images so they're displayed on the page in this wiki:
1. Click the Edit page button on the top right. 
2. Then on the top left menu under the Google Sites logo, click Insert (first option on your left). A popup appears showing all the attached images. 
3. Wait for a few moments until the images have loaded and then a preview thumbnail of the whole image will appear for each attachment. Click the image you want, then the OK button and it'll be inserted into the page. 
4. The image will be likely too big to fix comfortably on your screen, depending on the camera's original megapixel settings. A blue highlight appears on the bottom left corner of your image with additional options. If you click L (for large), the image will be reduced in size to appear on the page. This size option only affects the way it looks on the wiki page. You can still view the original attachment (or download it) at the original size.

Feedback from Ian in green

Hi Class 62, you've been doing some lovely thinking in how to communicate your ideas of Dundas to the world. There's more comments alongside each photograph below, but I wanted to point out one very important thing that was mentioned in the Screen Page Design page that I think hasn't been made clear enough. It's very important as you work on your designs to keep in mind the size and ratio of the actual iPhone screen. Otherwise, your designs won't fit the screen properly and we'll have to squish it in a way that might make the design less attractive or the information hard to understand.

The splash screen and the home screen with the buttons of different categories need to be vertical. Apple expects the splash screen to match the same orientation (upright, or sideways) as the main section of the app. Since the app works vertically in a portrait orientation for everything except the photo gallery and the augmented reality view, we need to keep the splash and home screens the same way. Imagine if you were to keep turning your phone around as you used the app - it could get quite annoying. Some apps rotate their user interface (also known as the UI) as the phone is twisted around in your hand. We don't do that for this app to keep things a bit simpler.

Click the image below to download a full size page template to print out.


iPhone Application Sketch Template v1.3

Designed by Oliver Waters. Freely distributed by d3i under the 
Creative Commons Attribution-Non-Commercial licence.

Because printers can do unexpected things to reduce the physical measurements of an page to be printable right to the edges, it would be best to use a ruler to check that the printed image is still 2:3 ratio. ie. divide the width of the iPhone screen in 2 to get x cm (or inches) and divide the height of the iPhone screen by 3 to get y cm (or inches). x cm will equal y cm if the image has been printed out correctly without distortion by the printer. If it's not exactly the same (maybe off by 2 or 3mm), that's ok. If it's off by a cm or half an inch, please adjust your printer software until it's correctly printed. Remember to measure the iPhone screen section on the printout, NOT the whole iPhone. If you wish to work on a larger image than the one printed out, just enlarge it on a photocopier - if you keep it A4 or Letter size (not sure what you use in Canada - the US uses Letter and most other countries use A4), then it'll be easy to scan for the final work. Thank you!


Feedback from Cynthia in yellow

WOW! You guys have done lots of work. Awesome! When you sketch things out, you can catch lots of potential design problems.
Looks like you have done some great design thinking. A good rule of thumb I loosely follow is: FORM FOLLOWS FUNCTION ( http://en.wikipedia.org/wiki/Form_follows_function ).
I interpret this to mean the shape of the design will serve how it is being used. (A road sign needs large type, the type on a watch can be small).

Some questions I might ask myself are: Is the type legible? Does it work as a small graphic on an iphone? Is there a creative way to display the elements (here the buttons & graphics) of the design? Does it show personality? (you got this one covered! ;  )  )
Is the graphic too complicated? Too many details for a small screen? Simplification is a design skill.  Start looking at your favorite things...including your iphone, and see how they are designed.
If you get stuck, I always go back to what designs I love and ask myself: why does this work?

You might want to think about combining design elements too. Someones buttons are awesome, another person might have great color, another a great sign, or great tree etc. This is what is great about collaboration and team work. You take the best solution from each and come up with something greater than the sum of its parts!

Feel free to ask me any questions!  ;  ) You guys are doing an awesome job. I look forward to seeing what you come up next.


I like the boldness of the above picture with the waterfall in in the middle. The font is too small to read though. If you hold an iPhone up to the screen, you can imagine what the actual size of the writing will be, and it needs to be bigger and more legible.

I'm not sure what the design of the buttons on the right hand side are doing? Are these designs for buttons without the text for the categories? (We still need to know what the actual categories are.) Overall, good job - it looks like the idea hasn't been given enough time to be completed yet.

I like the simplicity of this design. Simple is always good, especially when designing something that will appear small on the iphone. I always like to reduce the sketch to the original size it will appear in the design and see if it is legible.

If you made this a side view (coming off the left side), it could work quite well. You could place the buttons to the left of the waterfall.



This looks like a closeup of the next picture?

I like the idea of using a close up. This might allow you to focus on the buttons more. use the buttons in a creative way.


I really like this image with the paper cut out. The text in the middle though is far too small and doesn't mention Dundas. We also have a tricky problem that Apple doesn't like apps that open with a splash screen that's not in the same orientation as the first screen. (ie. it's sideways for the splash, and the vertical for the home screen.) This is my fault, I'm sorry that I didn't explain this earlier.  Maybe we can still use this if we crop it by half and have a much bigger title?

I like the colors too. Bold & simple. Color has a a very immediate effect. Cropping could work. Like the orange too, would be a good color for DUNDAS.


I really like the fun drawings of this splash screen. It has a lot of personality. It would work even better if it was full of colour. The text is too small in comparison though to the background and will be very small on an actual iPhone if we squeeze the image down to an iPhone size.

I like how you used the buttons creatively in this close up. You could even crop it tighter and focus on the buttons more with your abstract leaf shapes.
I immediately know this is about nature & exploring. Adding color would be awesome. Nice bugs! ;  )


This is thoughtfully designed home screen, with all the categories listed. It's obvious where to tap. We still have a problem about the buttons being too small to read and too small to tap without accidentally tapping the buttons close by. Have a look at the Watch Us Grow home screen and see how we've got an image underneath the buttons? Maybe a variation like that work work in this case where the buttons are much bigger and are overlapping the picture over the school underneath.

I like the title DUNDAS IS AWESOME! The historic building is good too. Maybe you could take a detail of the building and incorporate it into the buttons.
Buttons on a door close up, under the clock? I like all the design thinking that went into creating the buttons too. Nice!



I like this home screen design a lot too. Nice big buttons, with a warm welcoming message. The only problem I see is that the writing next the buttons are too small and won't be readable. If we fill the image with more colour, it'll look fantastic.

I like the closeup of the buttons here too. Like how you made them different shapes to stand out and put them in the grass.
Favorite one is FUN PLACES TO GO.  ;  )





This is a great start to a splash screen, but we need more time to flesh out the idea. The writing on the top in the arch shape is great.
I'm wondering what's through that rectangle - is it a door opening out to Dundas?

This is an interesting idea (flesh it out more like Ian says). A door is welcoming. A good metaphor for going out or coming in.
Adding some great color and placing buttons on the door could work too.


This is a wonderful, bold image for a splash screen. The writing on the sign is just a little hard to read (I can imagine it says Welcome to Dundas) but to get Apple to approve it in the App Store, we'll need to make it more readable. I really like it. Especially the grass and the waterfall pouring through the centre.

Great color! It is very welcoming & I like how you created the patterns in the rocks. Awesome.
This could work as a side view too, and leave plenty of room for buttons.



This image is fun. Are they people hiding behind the trees? I love the sense of adventure and fun, and the mention of Class 62. I think the splash screen should include "Dundas" though because it can be confusing for people who think the apps is about Class 62 rather than the city of Dundas.  It's a bit hard to read the writing on the right hand side. Color would also make this a bold splash screen.

This is a good simple design too. Adding color would make this even bolder. I like the drawings of the people having fun in nature. There is plenty of room for the buttons too!
It's good to have detail and leave room for the buttons like you did on the banks of the river.


I really love the layout of this splash screen. It has a sense of the waterfall falling over a great height and the power of it. I imagine the color names are showing what the areas will be color in?  Needs to have some writing to show it's about Dundas.

This is good too, You managed to get the historical building, waterfall and nature walk all into one design. Nice! You left room to place the buttons too.
It reminds me of  a topographical map. Good design thinking.


This image is great. It has everything we need. The only problem is that it's a landscape image and we need a portrait image for the splash screen to match the orientation of the home screen. (Again - I'm sorry - it's my fault that I forgot to mention this.) I think we could crop this and squeeze it into the required dimensions without too much distortion if this is the image that the class decides to use.

I like your idea of having "Welcome to the Town of Dundas" as a splash screen. Makes it very personal & welcoming, which encourages travelers. Good use of color and simple design!
Plenty of room to have buttons too.