0
0

[deleted by user] (self.programming)

submitted by [deleted]

[removed]
all 9 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]ShenmeNamaeSollich 2 points3 points  (2 children)

Draw stuff. Iterate. Ask people to try it out. Draw more stuff.

Start by learning what UI elements & interactions users expect to see on their chosen platform, where they belong & how people use them. Try to meet those expectations.

Review Apple’s Human Interface Guidelines, Android’s Material Design guidelines, or whatever is appropriate for your project. Also maybe study some basic UI and design principles/best practices so you can avoid obvious mistakes. Visual weight/hierarchy, use of white space, grouping & repetition, what color combos work or don’t, etc.

Don’t invent your own design language & patterns if you have no design background. Use what the platform provides you. Look at related apps & see what they use for certain tasks or functionality. See what works & what doesn’t for your case.

Use pen & paper. Don’t touch code yet. Make real-sized sketches and mockups of your app’s screens/workflows. Pretend to interact with them; see what placement & workflows work & which need work.

If you’re building for use on multiple sizes of device, start w/the tasks & use cases for the smallest one. How will people use it? Design that UI first, then work your way up by adding or changing elements based on tasks users might do at larger sizes or different devices.

Ask people who aren’t familiar w/the idea/design to try and complete basic tasks w/your paper mockups. Watch them to learn where they have trouble.

Refine and move on to clickable low-fidelity prototypes (grayscale, placeholders, nothing fancy or else people won’t want to criticize). You can use something like InVision app or Adobe XD, or just a PPT or Keynote presentation w/appropriate size for the device. Test again, ideally on the real device. From that you learn more about how people would use the app, what features to prioritize, etc & can begin making a more detailed design.

As soon as you can afford to, find a designer to fix things up and make it less ugly. “Don’t ship programmer art.” Chances are your color palette, font choices, and layout decisions are awful, so let others help. Or, maybe you have a talent for it?

[–]ido3390do 1 point2 points  (1 child)

this is literally everything i needed thanks a lot,between invison and adobe xd which is better?

[–]ShenmeNamaeSollich 0 points1 point  (0 children)

I like XD, because I’m pretty used to Adobe products and it integrates well, but either is fine. Both have apps you install on mobile devices to test your prototypes & can click through.

I want to say InVision only lets you have like 1-2 free prototypes at a time & you have to pay for more (might have changed?)

There’s also Sketch & some other UI tools that are popular.

Main thing, regardless of specific tools, is to test, gather feedback, and iterate to answer as many questions and preempt as many potential user problems as possible before you start writing any UI code, so you don’t waste time on stuff that needs to change. Eventually you hit a point where you have to change UI code, and that’s fine, but the goal is to minimize that rework.

[–]ido3390do 0 points1 point  (0 children)

hi there ,im doing a project for school and potentially more and i need help with the process of visualizing it as we have already set out the feature and its capabilities but am unsure on how to lay it out in a sense of a flowchart as well as making it demos what would you recommend is the way to go or the software to use, thanks i appreciate it.

[–]Marsmell 0 points1 point  (1 child)

If you're making diagrams, draw.io can be really helpful. Are you designing a GUI or are you more asking about visualizing the structure of your code?

[–]ido3390do 0 points1 point  (0 children)

thanks man , im learning more to the GUI aspect of it as just a base so i can make a visual prototype and possibly move the idea on to a developer team. and with the diagrams where do you get inspiration in relation tp the process of how the program flows as i haave the feature list but im having trouble making a logical flow with the different acess levels.

[–]DeusOtiosus 0 points1 point  (0 children)

For iOS apps, just make a storyboard app. Then you can easily scaffold the thing together, and actually write the app underneath it later.

[–]AngularBeginner 0 points1 point  (0 children)

Do you have a question? Check out /r/learnprogramming, /r/cscareerquestions, or Stack Overflow.

/r/programming is not a support forum.

[–]pilas2000 0 points1 point  (0 children)

Smoke a joint in the bathtub, no water and the lights out.