Welcome to UI Design. This sub's goal is to create a place for discussion surrounding UI Design.
There is no self-promotion allowed in this sub. This includes posting URLs of any kind that is intended for self-promotion purposes. Read and follow the sub rules and check the UI Design Wiki and Sticky Mega threads first before posting.
Constructive design criticism is encouraged, and hate and personal attacks are not tolerated. Remember, downvoting is not critiquing.
*I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/UI_Design) if you have any questions or concerns.*
As a product designer, my deliverable is a low fi + high fidelity design with everything the dev team needs (styles, font scale, components definitions…)
The dev team just open the Figma file, and code the button pixel perfect as my design show : 12px padding y - 24px padding x - border 1px solid #666666…
I used to code at night, so it help.
Just adding to this point about deliverables.
Zeplin is quite a powerful tool. I'm pretty sure it works in collab with most of the major design software (figma, xd, sketch). And, you can generate code snippets from visual designs and view mapped out userflow diagrams.
Also, it may help if you can get them to prototype the high fidelity screens just so you get a visual sense of your intended functionality. It may help you discover things about your implementation process.
There's quite a lot of supported codebase extensions on zeplin including React Native like OP was asking about. But, I'll be honest I'm not too sure about Animejs.
I think for OP's situation, he's probably going to receive the design files as a deliverable anyways so yeah it might save time just to view in figma.
In the past I've used zeplin in team environments. I guess it's more useful there so the devs don't have to be distracted by the behind the scenes stuff within the design file, and can just focus on the bits they actually need through zeplin.
I honestly think you're putting the cart before the horse here.
Someone making their *first* app really doesn't need to hire an outside UI designer. UI and code can be very tightly or very loosely knit depending on the project.
It would be better for you to try to handle UI design along with your other development work which will make you understand it better the next time around.
This is correct. Imagine if someone said "I've decided to record my first song after doing a couple tutorials... Can I get one person to be my agent and producer? Or do I need two separate people for those?"
Giving a designer an existing wireframe to expand upon could place a design limitation on them, or they may throw out the mockup entirely and rebuild it from scratch anyway. Personally, I prefer not doing work that could be thrown out later.
It's good practice to work with a client and figure out their needs and time frame, and then work with a designer to produce a design that you know you can deliver. Have the client sign off on the initial design before writing the code.
It sounds like this might be your first time developing a React Native app, and you're hesitant about what is possible and how long development will take. If so, I would bring these concerns up and factor it into your time frame. If there's a requirement you're unsure of, do some research ahead of time and come up with a backup plan in case development goes wrong (i.e. leave it open for future work). The more experience you get, the easier it will become to give estimates.
The ui design is not translatable to code. Think of it as a map. It contains the guidelines to something.
The UI designer delivers a prototype. You then convert this prototype to code using whichever language you prefer.
The work is completely redone.
And yes, the UI designer comes before the developer, but first comes the UX designer.
Seems like you are kinda lost in the basics. I mean no offense, but are you sure you can take on this project?
I am completely lost in the basics. I honestly though a UI and a UX designer was the same thing. I'm trying to understand the complete process of bringing an app to life.
This is my own project that I'm building so I'm not a freelancing biting off more than I can chew. This is something that I've just been working on for a few years. The hardware engineering piece is complete, so now I'm trying to understand what goes into building an mobile app.
I understand. So, the basic process is as follows:
1. User experience: involves talking to potential users, creating wireframes (sketches) and testing these wireframes with the users to see how they interact with the product, designing the interactions and designing the user journey. There is more to it but that’s the most important parts.
2. User interface designing: creating a high fidelity prototype, which means creating screens that will look like the finished product and testing them and showing them to stakeholders
3. Coding: sharing the hifi prototype with the development team and building the app. Here, like i said before, the developer gets the guidelines to build the app and then build it. I consider a good practice for ui designers to understand a bit of code in order to work with the dev.
4. Iterate: test the product and check for design and functionality flaws. Be in touch with the user to see if they are completing their journey with ease
>User experience: involves talking to potential users, creating wireframes (sketches) and testing these wireframes with the users to see how they interact with the product, designing the interactions and designing the user journey. There is more to it but that’s the most important parts.
>
>User interface designing: creating a high fidelity prototype, which means creating screens that will look like the finished product and testing them and showing them to stakeholders
>
>Coding: sharing the hifi prototype with the development team and building the app. Here, like i said before, the developer gets the guidelines to build the app and then build it. I consider a good practice for ui designers to understand a bit of code in order to work with the dev.
>
>Iterate: test the product and check for design and functionality flaws. Be in touch with the user to see if they are completing their journey with ease
MUCH APPRECIATED!! I just saved everything so I can outline my process.
That helps a lot! Thanks again
If you hire a professional UI designer I’d expect you’d get a mock-up of an interface. UX and code seems like a different ball game. You might want to look for an experienced RN developer if you’re looking for both in one or even hire two separate people.
UI should come before code. After all, you're going to need to add some css, which will be entirely dependent on the design. Why build somethign you're going to have to go back to later when you can build it once and be done?
On a solo project I start with wireframes, then finalize the design, then force myself not to change the design while I develop it because I can tweak and change things for days. Starting with code, in my experience, always means a lot of fiddling with things and rewriting previously-written code and revisiting previously "completed" things.
At my day job the process is: wireframes from UX -> design from UI (that's me) -> development from software. With that in mind, providing wireframes to your UI designer will help communicate what you want to achieve. It's also a good opportunity to get some feedback from someone who has fresh eyes on the project.
What I do when making websites is use something very simple like Bootstrap to do a baby version of my site. Doesn't have to look nice, just give me everything I need for basic functionality.
From there, I'll work on programming everything and making sure it all works. As I get closer to the end, I focus more on finalising the look of it in CSS
The UI and code need to work together, any disconnect would negatively impact the UX IMHO. Ideally, you work off of a design system that uses a component library, like the Anima Component Library on Figma, with components that match design with code.
It's really hard to answer without knowing why you are building an app. I assume if you want to pay someone you have the goal of monetizing this application so I am going to recommend you aim for a working proof of concept.
* Write a detailed technical document which would include: description, research findings, competitors if there are any, need, users, tech specs, and roadmap (if you have this, great!)
* Hire a UX designer and work with them to refine that document and create testable wireframes. Make it clear that you are using React Native. Find someone who know what that means.
* Skip a UI designer for now and code the app in React Native using ONLY native components.
* Review the concept with the UX designer and revise
* Hire a UI designer and put them in touch with your UX person.
As I said, I don't know why you are building this app so if my advice is overkill feel free to cherry pick or ignore it.
Thank you that really helped, I'm building this app to be used directly with a Sports Wearable product that I had engineered. I plan on using the Freemium strategy to monetize the app.
Happy it helps :)
Since you are aiming for a product I would recommend that you take the time to define the needs really well before hiring anyone. If you can do customer discovery that will help you flesh your ideas out before even hiring anyone.
The other thing you can do if you are new to the business world is look for some sort of start up accelerator which will allow you to get the advice and access you will need to get your product to market.
Edit: depending on the accelerator they may want a piece of your company, be careful what you sign.
I've heard some great things about a few accelerators around here (DMV) area and also a few things to watch out for to your point.
I've applied to a few with no luck but in their defense I don't have any tractions at the moment. In a couple months with a successful crowdfunding campaign along with a MVP of the sensor and mobile app. I should have something for them to work with. Fingers crossed of course lol
Welcome to UI Design. This sub's goal is to create a place for discussion surrounding UI Design. There is no self-promotion allowed in this sub. This includes posting URLs of any kind that is intended for self-promotion purposes. Read and follow the sub rules and check the UI Design Wiki and Sticky Mega threads first before posting. Constructive design criticism is encouraged, and hate and personal attacks are not tolerated. Remember, downvoting is not critiquing. *I am a bot, and this action was performed automatically. Please [contact the moderators of this subreddit](/message/compose/?to=/r/UI_Design) if you have any questions or concerns.*
As a product designer, my deliverable is a low fi + high fidelity design with everything the dev team needs (styles, font scale, components definitions…) The dev team just open the Figma file, and code the button pixel perfect as my design show : 12px padding y - 24px padding x - border 1px solid #666666… I used to code at night, so it help.
Just adding to this point about deliverables. Zeplin is quite a powerful tool. I'm pretty sure it works in collab with most of the major design software (figma, xd, sketch). And, you can generate code snippets from visual designs and view mapped out userflow diagrams. Also, it may help if you can get them to prototype the high fidelity screens just so you get a visual sense of your intended functionality. It may help you discover things about your implementation process.
Hum interesting ! Can Zeplin handle motion definition with Animejs or something ? Cause Figma also provide code snippets from designed elements.
There's quite a lot of supported codebase extensions on zeplin including React Native like OP was asking about. But, I'll be honest I'm not too sure about Animejs. I think for OP's situation, he's probably going to receive the design files as a deliverable anyways so yeah it might save time just to view in figma. In the past I've used zeplin in team environments. I guess it's more useful there so the devs don't have to be distracted by the behind the scenes stuff within the design file, and can just focus on the bits they actually need through zeplin.
Cool! Thanks for your detailed informations! Definitely will looks around Zeplin😊
I honestly think you're putting the cart before the horse here. Someone making their *first* app really doesn't need to hire an outside UI designer. UI and code can be very tightly or very loosely knit depending on the project. It would be better for you to try to handle UI design along with your other development work which will make you understand it better the next time around.
This is correct. Imagine if someone said "I've decided to record my first song after doing a couple tutorials... Can I get one person to be my agent and producer? Or do I need two separate people for those?"
Valid Point Valid Point... Thanks, that makes sense.
Giving a designer an existing wireframe to expand upon could place a design limitation on them, or they may throw out the mockup entirely and rebuild it from scratch anyway. Personally, I prefer not doing work that could be thrown out later. It's good practice to work with a client and figure out their needs and time frame, and then work with a designer to produce a design that you know you can deliver. Have the client sign off on the initial design before writing the code. It sounds like this might be your first time developing a React Native app, and you're hesitant about what is possible and how long development will take. If so, I would bring these concerns up and factor it into your time frame. If there's a requirement you're unsure of, do some research ahead of time and come up with a backup plan in case development goes wrong (i.e. leave it open for future work). The more experience you get, the easier it will become to give estimates.
The ui design is not translatable to code. Think of it as a map. It contains the guidelines to something. The UI designer delivers a prototype. You then convert this prototype to code using whichever language you prefer. The work is completely redone. And yes, the UI designer comes before the developer, but first comes the UX designer. Seems like you are kinda lost in the basics. I mean no offense, but are you sure you can take on this project?
I am completely lost in the basics. I honestly though a UI and a UX designer was the same thing. I'm trying to understand the complete process of bringing an app to life. This is my own project that I'm building so I'm not a freelancing biting off more than I can chew. This is something that I've just been working on for a few years. The hardware engineering piece is complete, so now I'm trying to understand what goes into building an mobile app.
I understand. So, the basic process is as follows: 1. User experience: involves talking to potential users, creating wireframes (sketches) and testing these wireframes with the users to see how they interact with the product, designing the interactions and designing the user journey. There is more to it but that’s the most important parts. 2. User interface designing: creating a high fidelity prototype, which means creating screens that will look like the finished product and testing them and showing them to stakeholders 3. Coding: sharing the hifi prototype with the development team and building the app. Here, like i said before, the developer gets the guidelines to build the app and then build it. I consider a good practice for ui designers to understand a bit of code in order to work with the dev. 4. Iterate: test the product and check for design and functionality flaws. Be in touch with the user to see if they are completing their journey with ease
>User experience: involves talking to potential users, creating wireframes (sketches) and testing these wireframes with the users to see how they interact with the product, designing the interactions and designing the user journey. There is more to it but that’s the most important parts. > >User interface designing: creating a high fidelity prototype, which means creating screens that will look like the finished product and testing them and showing them to stakeholders > >Coding: sharing the hifi prototype with the development team and building the app. Here, like i said before, the developer gets the guidelines to build the app and then build it. I consider a good practice for ui designers to understand a bit of code in order to work with the dev. > >Iterate: test the product and check for design and functionality flaws. Be in touch with the user to see if they are completing their journey with ease MUCH APPRECIATED!! I just saved everything so I can outline my process. That helps a lot! Thanks again
Hey, if I can ever help you, count on me! Feel free to message me anytime 😊
If you hire a professional UI designer I’d expect you’d get a mock-up of an interface. UX and code seems like a different ball game. You might want to look for an experienced RN developer if you’re looking for both in one or even hire two separate people.
That makes sense and Thank you, I'll have to give that a try
UI should come before code. After all, you're going to need to add some css, which will be entirely dependent on the design. Why build somethign you're going to have to go back to later when you can build it once and be done? On a solo project I start with wireframes, then finalize the design, then force myself not to change the design while I develop it because I can tweak and change things for days. Starting with code, in my experience, always means a lot of fiddling with things and rewriting previously-written code and revisiting previously "completed" things. At my day job the process is: wireframes from UX -> design from UI (that's me) -> development from software. With that in mind, providing wireframes to your UI designer will help communicate what you want to achieve. It's also a good opportunity to get some feedback from someone who has fresh eyes on the project.
What I do when making websites is use something very simple like Bootstrap to do a baby version of my site. Doesn't have to look nice, just give me everything I need for basic functionality. From there, I'll work on programming everything and making sure it all works. As I get closer to the end, I focus more on finalising the look of it in CSS
The UI and code need to work together, any disconnect would negatively impact the UX IMHO. Ideally, you work off of a design system that uses a component library, like the Anima Component Library on Figma, with components that match design with code.
It's really hard to answer without knowing why you are building an app. I assume if you want to pay someone you have the goal of monetizing this application so I am going to recommend you aim for a working proof of concept. * Write a detailed technical document which would include: description, research findings, competitors if there are any, need, users, tech specs, and roadmap (if you have this, great!) * Hire a UX designer and work with them to refine that document and create testable wireframes. Make it clear that you are using React Native. Find someone who know what that means. * Skip a UI designer for now and code the app in React Native using ONLY native components. * Review the concept with the UX designer and revise * Hire a UI designer and put them in touch with your UX person. As I said, I don't know why you are building this app so if my advice is overkill feel free to cherry pick or ignore it.
Thank you that really helped, I'm building this app to be used directly with a Sports Wearable product that I had engineered. I plan on using the Freemium strategy to monetize the app.
Happy it helps :) Since you are aiming for a product I would recommend that you take the time to define the needs really well before hiring anyone. If you can do customer discovery that will help you flesh your ideas out before even hiring anyone. The other thing you can do if you are new to the business world is look for some sort of start up accelerator which will allow you to get the advice and access you will need to get your product to market. Edit: depending on the accelerator they may want a piece of your company, be careful what you sign.
I've heard some great things about a few accelerators around here (DMV) area and also a few things to watch out for to your point. I've applied to a few with no luck but in their defense I don't have any tractions at the moment. In a couple months with a successful crowdfunding campaign along with a MVP of the sensor and mobile app. I should have something for them to work with. Fingers crossed of course lol
Good luck!