DEV Community

Monica Granbois
Monica Granbois

Posted on

Feedback on my app design

Hello everyone! I was hoping to get feedback on the layout of an app I am working on. You can see a mockup at: https://xd.adobe.com/view/f320b6eb-aa94-4e10-457e-4db3c9b96a62-8511/

It is a hobby project to create my first iOS app. My idea is to create an app that lets me store quotes. Currently, when I come across some text I like, I write it in a journal. I thought it would be a good beginner project to make an app for this process.

I began programming but realized a mockup of the screens would be helpful. I stopped coding and used Adobe XD to design the layout. I looked at Apple's App Store and Music App for inspiration, along with other apps.

Some notes:

  • My app is currently nameless
  • I did not work on a colour scheme
  • Some challenges I think I'll face:
    • Side scrolling
    • How to store the image and text
    • Synching between devices
    • the unknown - unknown

Any feedback on the design, idea, and feasibility of this project would be appreciated! Thank you in advance for your help!

Top comments (7)

Collapse
 
julesmanson profile image
jules manson • Edited

Absolutely beautiful design and very user-friendly looking interface I get that you're using tools to help in the design face and that is always helpful. You have a good eye for design and art. Just remember that apps shouldn't be mobile apps. They should be mobile-first which means you design from small to big (mobile to tablet to desktop). So don't forget to make it accessible for the older folks like me who primarily use mobile phones to make calls. Okay I may occasionally text or see something online but its Windows desktop all the way for me.

May I ask what frameworks or coding languages you are using? If you're just starting out learn vanilla first (without frameworks or libraries) and work your way up as you become more skilled so you understand the fundamentals. If you don't understand programming patterns or paradigms you'll never become an efficient programmer even when using libraries or frameworks. As for me I am still learning but getting better every day so I vanilla everything especially client-side. I guess that makes me a purist.

Edit: I just looked at your profile and it looks like you're far more skilled than I had assumed. Definitely beyond my skill set. Now I feel a bit foolish offering you advice.

Collapse
 
mikewheaton profile image
Mike Wheaton

We all have advice to offer, regardless of our individual skills and experiences. Your point about designing for multiple screen sizes is a good one, as it brings up a question of how this design will adapt to different iPhone sizes and potentially iPads as well.

Collapse
 
monicag profile image
Monica Granbois • Edited

Please don't feel foolish! Your point about considering accessibility is a good one! I need to figure out how the layout will adapt to various iPad/iPhone sizes. I also need to think about the font size. I will investigate if and how I can allow the user to control the font size of the text of the quote.

I haven't investigated frameworks yet. I am planning to write the app in Swift.

Collapse
 
julesmanson profile image
jules manson

I know of a great site that can help you get started on those issues you mentioned.

Working with Typography

Responsive Web Design

Learn to Code HTML & CSS (this is the home page)

Thread Thread
 
monicag profile image
Monica Granbois

Awesome! Thank you!

Collapse
 
mikewheaton profile image
Mike Wheaton • Edited

You're off to a great start. Some things to consider:

  • Given that tags and authors navigate to separate views, you could use a Tab Bar to pin them to the bottom.
  • When editing a quote, it's difficult to tell what belongs in each text field. You may want to label these more clearly, and avoid using placeholders as labels.
  • A background image behind text can look great when it's done well, but it's difficult to ensure this with user-provided images. The contrast is low in your current design and could be worse depending on the image a user provides. A good test of this is to put a photo of a zebra in the background.
  • Test your design with quotes of varying lengths. There may be some that are only a few words, while others need a long paragraph.
  • When viewing a quote, try removing the border around the quote and extending the background to the edges. This is common practice for content apps (see Instagram).

Be sure to post back here as you make updates!

Collapse
 
monicag profile image
Monica Granbois

Thank you Mike! That is all really great advice. I'll redo the mockup with labels and try out the Tab Bar. I think I'll need to look to see if there is a way I could let the user control the contrast of the image.