Sunday, 10 November 2013

App layout design

















These are the dimensions I am going to design my screens to, which will ensure they could be used and implemented by a developer.

The layout for my designs are going to be based on the wireframes I created and the overall feel is going to be reminiscent of a social networking app that has been designed with the iOS7 guidelines in mind.

Below are the individual screen designs, which will be incorporated into my visual storyboards.


















Here are some of the modifications I made during the design stage:
  • The BirthYear logo is now positioned in the top left of the navigation bar. This is what the user presses to open the drop-down list of chronological years - This serves as both a navigation tool and a brand reinforcement and maximises the space available. I felt that the logo would be too cramped below the timeline as in my original wireframe.
  • I decided that there needs to be some indication above the timeline panel of what year and categories have been selected. I came up with the idea of creating a 'timeline indicator, which makes it clear to the user what elements are currently active and affecting the content on the timeline.
  • The timeline zooms in when the user clicks on an asset to show the exact date of the event.
  • I took out the background colours for the category icons, as I felt they didn't fit with the overall design scheme.

2 comments:

  1. I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
    We use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
    maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
    harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
    efficient.
    I have a couple suggestions that might make it work better:
    1. Increase the height of the window the cover image is being displayed.
    2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
    3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
    shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
    4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
    in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
    element already)

    ReplyDelete
  2. I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
    We use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
    maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
    harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
    efficient.
    I have a couple suggestions that might make it work better:
    1. Increase the height of the window the cover image is being displayed.
    2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
    3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
    shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
    4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
    in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
    element already)

    ReplyDelete