I’m working in a small startup with only two members. One is a full stack developer who is in charge of product development from server side to front-end. I, on the other hand, specialize in product management. Throughout my career, I’ve focused on product planning, strategy, roadmapping, and customer pipelines. But now, I have been creating product/interface/user experience design.

Of course, the best option is to hire a UX/UI designer or invite the person as a co-founder. But in reality, this is not always possible for a startup. And if you don’t take the role right away, your developer may think that he or she is responsible for the whole product from server side, front-end, iOS, Android, to even the website. So, I took on the role of a temporary designer for a start.

In this article, I’m going to share my tips on taking on a designer’s role as a person who does not have any background in design. All examples will be related to mobile app design. Again, these tips show you ways on how to temporarily take charge of design and not on how to become an actual designer.

To follow my tips, you need to be:

1. Familiar with wireframe and overall user interface structures/flows
   
2. Have a Macbook
   
3. Have money to purchase software
   

Step 1: Together with your developer, draw the main app screens. Don’t prepare any wireframe or PowerPoint stacks yet.

I’ve seen many product managers (PM) who draw kick-ass and cool-looking product descriptions and wireframes by using PowerPoint (or more modern tools like Invision and Framer nowadays). I’m not saying that these are wrong, but if there are only two members in your company, you will need to take three roles: design, product management, and marketing. In this case, drawing the cool-looking wireframes is a waste of time and resources.

I think the well-structured wireframe stacks are only necessary when there are enough members in a team, so that you can deliver accurate information to all members equally, or when you need to gain confirmation to proceed from higher managers or executive members.

So, the best way for you to deliver your app idea to your developer as a temporary designer is to sit down together, write down the user’s main tasks, and draw very brief app screenshots together with your developer.

Decide on these things with your developer:

1. Overall sections: In terms of the user journey on your app, there are several sections you may need to include such as onboarding, signing up, main feed, profile, chatting, etc. You will decide with your developer which sections must be included in your first version. If your team has limited resources, you can’t include every section. You must check your developing resources first and then decide.
   
2. Core/sub-features and prioritization: You need to define the core features you need to include in the prototype to achieve your app’s purpose. Narrow down the most important core features and include other features as subs which you may develop later. Core features are essential aspects needed for your users to achieve the values your app wants to deliver.
   
3. Brief screen look: You and your developer will draw brief app screens on paper, not on PowerPoint. Remember, do not prepare this on PowerPoint in advance to talk with your developer. Simply draw this together on white paper. There are so many benefits to doing it this way. First, your developer can tell if some features are not possible to develop or would take too much time. Also, your developer may have far more experience than you, so your app user flow may become more effective at the end.
   

Step 2: Benchmark color uses and app concepts from design archives

It’s time to start more designer-like jobs. You need to collect some reference design work from design archive websites so that you can use the works made by professional designers as benchmarks. Here are the three archives I use:

1. CollectUI.com

CollectUI is a design archive for web and mobile products. The best thing about this site is that all the designs are classified under individual sections like sign up, onboarding, checkout, etc.

2. Interaction Gallery by Behance

Behance is popular now even with non-designers, but you may not know about its archives, Interaction Gallery. This archive was started from AppDesignServed.co, with beautiful and full-sized mobile and web designs. In this archive, you can find artwork that has similar features or user flows with your products.

3. Pinterest

You may know Pinterest very well. The most convenient part of it as a design archive is the powerful search engine. You can use very specific keywords to find a specific design. For example, if you’re looking for something related to app onboarding screens on chat app for iOS, you can input a keyword like “mobile chat app onboarding iOS.” Pinterest can return some similar-looking designs by using image recognition search.

Step 3: Use Sketch 3 program on your Mac

Now, it’s time to purchase a very necessary design tool, Sketch 3. It’s a vector-based design tool, specialized in web or mobile product design.

You may think, “Why not Photoshop or Illustrator?” First, you need a vector-based design tool because you need to provide design components that are working for multiple screen sizes. In this case, some pixels may be broken if you use a non-vector-based program like Photoshop.

Illustrator is also a vector-based design tool but it requires a learning curve if you are not familiar with it. Illustrator is not just for web/mobile product design but also for broader areas such as graphic illustration, logo, or different art works.

Step 4: Define your main and sub-color theme

The most important step is to choose your main and sub-color. It is very important to understand what the main color is but you don’t have time to learn complicated color theories. Don’t worry. Just keep these simple rules in mind when choosing your color theme.

1. You must choose only one distinctive color.

This will be your main color. When you imagine Starbucks, Facebook, or Snapchat, you can easily see their representative colors —green, blue, and yellow, respectively. These brands use only one distinctive color and that helps to create a visual representation.

Do not choose multiple distinctive colors. Choosing more than two main colors is an extremely difficult skill that only highly experienced designers can do. If you try using multiple main colors, your design might look tacky.

2. Use white, black, or dark/light gray as your sub-color

These are called achromatic colors, which means color without color. An achromatic color as sub-color looks good with any distinctive colors.

Here are some great websites that are useful for searching main colors:

ColorHunt.co

On this website, you can see so many great color spectrums. Again, do not use all the suggested colors because it may be too difficult for us (non-designers) to make the design look good. Just keep looking at the top colors on each spectrum.

Colovely

It’s a very useful website that suggests only one color whenever you press the space bar. Keep pressing the space bar and write down the HEX code when you find a great color to use.

Step 5: Know the work you must do as a designer

OK, now you are a temporary designer for your team, so let’s figure out the actual design work you must do for your developer.

1. App logo package : You should deliver an app logo package in which there are app design files in multiple sizes for iOS/Android.
   
2. App screens : You should deliver very detailed design work including screenshots of every app screen, size, and margin information of each component, colors, and fonts used.
   
3. Design files : You need to deliver each design components as multiple sized files. For example, if you are designing for iOS app, you must deliver 2x and 3x files on each design component.
   
4. App store screenshots : You know that there are app screenshots on the App Store and Play Store. This is also part of your job. You need to create five (or more) app store screenshots.
   

Step 6: Create the app logo in a simple but distinctive style

So, the first thing you should do is to create an app logo and deliver it in multiple sizes. Actually, logo design is one of the top-level design works, which means it will be too difficult for us, people with no background in design, to create proper and cool logos. So, just focus on creating a simple but distinctive logo. Here are some tips:

Use one symbolic letter of your app name.

For example, Medium’s original logo was just a plain letter M on a black space. It’s a very useful way for users to recognize and remember your app.

Use your main color with white space or the reverse.

In the example above, the first logo is the reverse and the other uses green as the main color on a white space. Actually, using white space may capture user’s attention more because so many apps are using the reverse style nowadays. But it is still a case-to-case basis.

Step 7: Use a UI kit to start your design work

Now, you need to design all app screens by yourself, but it will be extremely difficult to do so from scratch. I then recommend using a UI kit that a designer made. You can search so many free or paid for UI kits on Google, but here are my recommendations where you can find UI kits in Sketch 3 format.

• Sketch App Sources
  
• Sketch Repo
  

You can download a well-designed UI kit package in Sketch file format. Although it’s usually free to download the files, you may be required to pay royalties later. Please read the license statement carefully when you are downloading.

Also, you need to choose a UI kit based on these criteria:

1. Each screen has a solid background color, not a gradient or image background. That’s because it’s easier to apply your color theme to a solid background.
   
2. Choose a UI kit that is similar with your app area. For example, choose a chat app UI kit if you are going to build a chat app.
   
3. Choose a UI kit that has the right menu bar to apply to your app. For example, you need to find a UI kit that has a tab bar at the bottom if you want your iOS app to have a tab bar.
   

Before you start your design, please decide on the base screen size. Some developers like to have iPhone 5 SE size as the base while others like iPhone 6 or 7 (the bigger screen size). My developer likes the first style because he can use a small screen design and apply that to the bigger screen by using auto-layout.

While you design (or just modify) using a UI kit, you may need to draw icons or buttons, but do not draw by yourself. This also requires a high-level design skill. Instead, I recommend using Noun Project, an icon design archive. You can download a variety of icon components as an SVG vector format. Remember to check the license announcement before using them.

Step 8: Deliver the design files to your developer

Finally, this is the last step you need to follow. You should deliver these two design works:

1. Design guide : It’s a document-like guide where your developer can see each app screen design and size/margin information on each component.
   
2. Design files : Your developer needs the design files at .png or .jpg formats.
   

Zeplin.io can help you deliver the design guide. Once you’ve finished designing all your app screens on Sketch, you can simply press CMD+E, then all the screens will be uploaded on Zeplin. Your developer can see all kinds of information about your design such as size/HEX code and spacing, among others.

Now, you should deliver design files generated from all of your design components. If you are making design components for an iOS app, you need to export them as double- and triple-sized .png files. Sketch makes this task easy. Once you click on the component, look at the Export tab at bottom right of the page. Change export destination to iOS, then you can change the file settings automatically.

You need to be careful when creating the file name during this task because every developer has his or her own way of naming components. You must ask your developer about any rule on naming files before exporting the design files. Otherwise, you can just name the files this way:

[Type]_[Section]_[Details].png

For example, if you export an icon on the tab bar area, the file name is likely to be “icon_tabbar_home@2x.png.”

Once you have more than two full cycles of all these steps, you may become a temporary designer on your small team that does not have a professional UX/UI designer. Also, this will give you (as a product manager or product owner) a sense of the user interface structure and experience flow of your product.