Wordle - A Systematic Design Approach

Wordle Design System

• An easy to use set of components anyone can use.
• Recreate, remix and reuse Wordle design components.
• Fast and easy to set up, maintain, update
• Separated, modular, and Customisable files so multiple designers can work nondestructively.

Objectives

Onboard new team member to Wordle Design System. Don’t worry, it’s very simple and anyone can use it.
The System can be used any way you want. In fact I encourage:

• Replicating Screens for potential clients.
• Brain storming ideas for new layouts.
• Exploring new possibilities and applications.

Preparation

1. Be sure to have Sketch installed on your machine. The system is built using Sketch right now but I’m open to rebuilding it on another tool if there is a demand.
2. Download the Wordle Design System 1.0 - Google Drive to your computer.
3. (Optional) If you have Download Backup and Sync - Free Cloud Storage you’ll always have the latest version on your computer! ~Magic right?!~

Inside the Folder

The folder structure is simple! You’ve got 5 folders containing everything you’ll need to generate screens for Wordle!

1. Illustrator
   • Files for creating Art that goes into our app.
2. Libraries
   • The raw sketch files containing all the components you need to get the system working!
3. Screen
   • Output everything here!
4. Source
   • All the external images we need for content, avatars, images etc.
5. Work
   • Two starter files I’ve created for you. Use them (or not) to kick of your designs.

So, how do I get started?

Not so fast, we need to set up the libraries so that you can access all the design elements from Sketch.

1. Open up Sketch and go to Preferences.
2. Click on the Libraries tab and click “Add library…”
3. Navigate to the Libraries Folder in the Design System Folder and add all the libraries.
   • 1_oya_colours
   • 2_oya_icons
   • 3_oya_avatars+parts
   • 4_oya_text+cards
   • 5_oya_buttons
   • 6_oya_atoms
   • 7_oya_components
4. You’re set!

Now I can start?

Now we’re ready! Go to the work folder and open up the “builder” file. This is where you’re going to be putting together screens easily!

You’ll be greeted with an iPhone X screen. I suggest using the latest iPhone to design screens, but if needed, I’ve included a layout for the iPhone 8 screen as well.

Lets start out easy. Let’s recreate the loading screen!

1. Click the “Add Symbol” button on the toolbar.
2. Go to Colour > Main > PrimaryAlt. Place the symbol on the Artboard.
3. Resize it to fill the whole screen.
4. In the layers panel on the left, make sure the “iPhone Interface” folder is always on top.
5. Lets add another symbol. This time the Oya Logo. Icons > Oya.
6. Move it to the middle.
7. It’s the wrong colour though. Lets fix it! On the right panel underneath “Overrides”, you should see an arrow and “Colour”. Click the dialog box and navigate to the colour you want. (Every symbol have customisable overrides that allow you to customise things like text, colour, and even symbols in the same category.)

Watch me show you!

Conclusion

I hope you enjoy using this tool to try out ideas and remix my designs and just run with it! Hopefully we will be able to generate new ideas for our product!

Go forth, and Design! XD

Mubarak Full-Stack Designer, Oyalabs