Giters

MarcoSero / HackerNews

An open source, beautifully designed Hacker News client for iPhone

Home Page:http://marcosero.com/blog/i-made-a-hacker-news-app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Design review

MarcoSero opened this issue · comments

commented

Global

  • If possible, the whole app should have a corner radius of 2pt (it’s my signature!)
  • In hindsight, the orange colour looks a bit pale and washed out on device. Can you change it to #FF5D3D? And the lighter orange (for avatars) to #FF7D64 - I’ll update the assets in Dropbox
  • Like I mentioned yesterday, can you remove the drop shadow from all the orange nav bars? Not the first designer asking me this. Unfortunately, it's not easily possible unless hacking UIKit
  • All separators should be black at 0.04% opacity and (if possible) 1pt (instead of 0.5pt) Wouldn't they be too big? Especially on iPhone 6+ they'd be almost 3px
  • As a global reference, left and right padding for pretty much everything is 16pt

Menu

  • Menu is almost perfect layout, but baseline is slightly off. Move “New" up 1pt, “Popular" up 2pt, “Ask" down 2pt and “Jobs" down 2pt
  • What opacity are the inactive menu items? They should be 0.70% opacity

Stories

  • If possible, move both nav bar items up 3pt Why? That should be the center
  • Top right menu font size should be 11
  • Move all story titles up 5pt - They have 16pt padding from the top
  • Move website label up 9pt What's the padding from the title?
  • Move bottom label (points, username, etc) up 9pt What's the padding from the website label?
  • The points bg is larger than the assets I sliced, are you drawing them yourself? If so, the height should be 16pt and left & right padding 5pt
  • The points font size should be 10
  • The bottom label (username, etc) font size should be 10
  • Move username label to the left by 2pt and additionally move time label to the left by 3pt
  • If possible, increase the left padding of the cells by 0.5pt (or 1px) How about the 16pt padding
  • Increase right padding of cells by 4pt ditto
  • Move bottom separator of cell up by 1pt
  • Baseline for story title should be 24pt (it’s currently set to about 27pt) Where? Could you show me?
  • Like I mentioned yesterday, need to add the “default” website icon for when icons are loading or not available
  • One thing I forgot to mention is a little detail for stories that have been “read” (tapped on). The background of the cell gets a black overlay at 0.01% opacity, the title and website labels reduce to 0.80% opacity and also (if not too much of a pain) the separator changes from 0.04% to 0.05% opacity (to compensate for the 0.01% black overlay and help maintain the same contrast as other separators - tiny detail I know!)
  • Move the loading icon up 33pt (so it’s centred on the whole screen, not the view)
  • I wonder if it would make more sense to use the same centred loading icon when loading in new stories, rather than the little logo at the bottom? What do you think?
  • Something that would be awesome as an additional detail would be some of transition for the cell's content as you scroll down the screen. Something as simple as a quick fade in. Maybe not for this release though.

Comments

  • If possible move the back icon up 0.5pt and right 8pt (realise Apple makes this stuff easier said than done!)
  • Move nav bar title up 3pt
  • Should probably say “Comments” rather than the name of the story to avoid duplication with the section underneath
  • Move share icon up 2pt and right 6pt
  • Same tweaks for the story header as the stories section
  • Font size for Avatar letter, username and time should be 10
  • Can you put the time label under the username on the left?
  • Move comments text up 1pt
  • Baseline for comments should be 16pt (it’s currently set to around 18pt)
  • All separators should be full width

Profile popover

  • Black overlay should be black at 0.40% opacity (it’s some sort of grey right now?)
  • More of a bug, but for some reason the usernames aren’t always being displayed
  • Rounded corners of white bg are 3pt
  • White bg should have a solid dropshadow - black at 0.04% opacity and 3pt down
  • Move top left X icon up 6pt and left 6pt
  • Created and Karma font size is 11
  • Baseline for description is 16pt
  • Can you use the same loading icon (central circle) for loading in the comments?

Browser

  • If possible move the back icon up 0.5pt and right 8pt
  • Can you make the nav bar dropshadow 1pt (instead of 0.5pt) and black at 0.04% opacity? (same style as separators basically)
  • Move nav bar title up 3pt
  • Nav bar bg should be #FCFCFC
  • I’m not sure the comments button/icon in this screen makes sense. If you go to the website first, and then the comments, and then press back, it feels weird that it goes back to the website and then back again goes back to the stories screen. What do you think? Might make the screen simpler too.
  • Move icons up 2pt
  • If possible, make the toolbar at the bottom 48pt tall (and then vertically centre icons)
  • Toolbar bg should be #FCFCFC
  • Back chevron is in the right place, but move the forward chevron to the left by 28pt
  • Can you make the upper dropshadow the same as the nav bar (1pt and black at 0.04% opacity)?