5 Followers
·
Follow

Top tips on starting a new App Design project in XD

A step-by-step guide, to help you invest your time wisely

Image for post
Image for post

Starting a new project is the most exciting thing for a creative and often the flow of ideas can run wild, this puts even greater importance of having a strong foundation and structured way of working.

When juggling a lot of projects at once, it’s important to keep organised and have a clear structure from the beginning of the process. At Desap, we like our team to pool their wisdom to help develop and share skills.

“Ready?”

1. File Location

Image for post
Image for post
File Structure

The folder structure is something that will help you move forward, as your project grows. Resources don’t become cluttered, name files don’t have the same name (rectangle1.svg) — Which we’re all guilty of at some point!

We also can’t forget about the wizard behind the curtain, the designers best tool — a developer! It helps to have an organised file system, to support developers and others that may need to nip in and out of your file.

So keep it clean on the screen!

2. Finding Your Shade

Image for post
Image for post
Image: Nathan Pyle https://designtaxi.com/news/377947/Funny-Comics-Illustrations-That-Accurately-Depict-The-Life-Of-A-Designer/

Colours.co allows you to lock in your colour palette, by simply pressing the spacebar. You then have the control to play with the other hex values- then out of the blue, you’ll have your refined palette.

Gradients are becoming a growing trend as of recent, so it’s useful to have a site like UI Gradients and Web Gradients for the inspiration of getting the right blends.

3. Finding The Right Type…

Whether you’re looking for bold, thin, wide, tall or small, you’ll be able to find the right type for your project, with these two walking hands in hand!

It’s great to look out for the following when choosing your typeface;

Readability — Does the font work on different coloured backgrounds? Google Fonts recently updated their interface. It enables you to change the main backdrop, allowing you to compare and contrast your chosen font.

Image for post
Image for post
Google Fonts

Scalability — It’s important to view your type within different scales, when it is small and when it is large — comparing the difference between the two.

Variability — How many weights are available, within the chosen font pact? It is always good to have a typeface that has variations of weights.

4. All about the Grid…

Most popular screens are divisible by 8, so with this information, this helps you determine how your grid will be.

Image for post
Image for post
More details here: https://spec.fm/specifics/8-pt-grid
Image for post
Image for post
Square grid, a value of 8

Adobe XD allows you to change your square grid into the value of 8. You can do this by selecting your artboard, and change the value to the square grid.

5. Shortcuts

So sit back, relax and get comfortable with these finger-poppin’ keys.

Beethoven would be impressed.

Image for post
Image for post
Click here for more info https://helpx.adobe.com/uk/xd/help/keyboard-shortcuts.html
Image for post
Image for post
Click here for more info https://helpx.adobe.com/uk/xd/help/keyboard-shortcuts.html

6. Plug-ins

Top Players

  • UIFaces (By Aleksander Tasevski) — Allows you to add in placeholder faces with a click of a button. Alternating from race, gender, hair colour, emotional expressions and more. Turn those frowns upside down!
  • Lorem Ipsum (Pablo Klaschka) — This will save you so much time instead of having to scroll the internet for some random jibberish. Simply select your text, ‘fill in placeholder text’ — hey presto! You have some gobbledygook.
  • Rename It (Rodrigo Soares) — This is super helpful to keep all your ducks in a row. Referring back to file organisation, it allows you to change all files by one click!
  • Icondrop (By Iconscout) — Convenience is everything, easily accessible icons, illustrations and stock from Adobe XD.

and many many more…

Summary

“The best view comes after the hardest climb.”

Found this post useful? Kindly tap the 👏 button below! :)

Image for post
Image for post
Sean Charmatz- https://www.instagram.com/p/Bn7K5jIHRnX/

Desap System Solutions is a leading Manchester based smart device technology and mobile software solutions specialist.

Drop us a line at info@desap.co.uk

Follow, share, like, review Instagram, Linkedin, Twitter, & Clutch

Desap System Solutions ©

.

Written by

Desap is a leading Manchester based smart device technology and mobile software solutions specialist. More at: desap.co.uk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store