September 5, 2017 How To Prepare Design Submissions Files Like A Pro

I wonder what it feels like being a pro in the Topcoder Design community. Would it feel the same as a neurosurgeon fixing a damaged brain? As an architect doing the Empire State Building? As me when I eat five meals in a row (professional food devourer)? Well, I’m not sure how it feels like exactly, I like the concept of being forever-noob, that mindset allows to keep preparing ourselves for greater challenges, with no roof. As for the Design community, it is important to become a pro though, there is competition involved.

It’s known that there is an important learning curve to becoming a pro, not only design wise but also platform wise, which is what I’d like to bring to your attention today. No matter if you have five (5) years experience of doing work at Topcoder, but something as basic as preparing a good submission CAN improve your game. During my copilot journey I have learned that file organization and concept delivery are things clients care about – A LOT – when reviewing submissions. If you improve your game on these basics, it translates into more chances of providing an easy to read concept, thus more win chances.

In the challenge details page, we can find a section that tells us how to format a submission into the system. However, it doesn’t tell us how to do it like a total pro. After years of collecting experiences as a competitor, copilot and screener, I want to transfer this knowledge to you in the form of a juicy blog post. Specifically, about files organization and effective concept delivery to the SCC competition judging team (screener, copilot, client ~ just made it up to look for my fearless readers … you know). Every pro was once a noob, if you follow my steps you will become better than Cristiano Ronaldo scoring a hat-trick against Barcelona on a rainy day — believe me! Not interested yet? I guess my last choice would be to get you a cake, say no more! Follow me.

ORGANIZE IN ORDER TO MINIMIZE MISTAKES

Step number one, have a seed for projects. Files organization and solid structure allows you not only storing files but making sense out of them, helping you even to save your rear parts after missing to declare items; thus you’ll avoid making mistakes that might cost the loss of your work (failing screening e.g. mistake #4 here).

• Source folder: store your source files such as Illustrator, Photoshop, Sketch and so on. If you’re using watermarked photos, you can add an additional “comps” folder to add the small versions of the watermark images. A good practice is to keep track of all the stock and fonts you’re using, copying urls into separate notes files. This can be life saver in case you forget to declare assets by accident. Screener will be able to extract the declaration information from those notes you had in the source folder. Smart ah? As a result, you reduce chances to fail screening even if making small mistakes.
• Submission folder: store static assets that the client will review. It’s encouraged to create two subfolders in case of responsive designs, such as “Desktop” and “Mobile”, so client can find each scenario (same for tablet, TV or any other target device).
• Preview file: as important as any other file, save your presentation file as psd and jpg/png even if you’re uploading the static asset but you’ll be able to do modifications to it for final round if needed. You can’t miss “Design A Presentation Screen” section below.

During the submission process in the online form, after hitting the shiny almighty “Submit your entries” button, zip each folder and fill the form with each of the zip files, presentation/preview screen and empty out the notes for declaration (fonts and stock artwork).

NUMBER YOUR SCREENS

Order has to make sense for both source and submission files. It’s a good practice to name these files using sequenced numbers as a prefix in the order that you want the screens to be reviewed. For instance:

• 00_00-Home.jpg
• 00_01-Home-slider-hover.jpg.
• 01_00-News.jpg.
• 01_01-News-detail-view.jpg.
• 02_00-Contact.jpg.

If you keep a good order of your screens it makes the sequence to be followed very easy. If we take if further, adding them to the Marvelapp project is a piece of cake (again?). After dragging them into the project they get automatically ordered by screen names.

DESIGN A PRESENTATION SCREEN

That requested file “Preview” doesn’t have to necessarily be just a 1024×1024 blank page with a plain image. This screen has a huge impact as a first impression factor. Understand that client first sees this page. So, you want them to see a plain, flat, boring image that represents the preview of all of your hard work OR you want to wow them right from the beginning? This is your chance to create engaging, eye-catchy presentation screens.

You can sneak peek more in the weekly newsletter, like this one.

There are several techniques you can apply like skewing, perspective, stacking screens, mocking up real devices. Anything you use, just make sure it’s beautifully laid out, choosing key screens without overpopulating it. That’s the key to capture client’s attention from the very first moment.

DESIGN NOTES AS SCREENS, NOT TEXT

It’s normal to send notes to our clients to explain certain features or ideas we have in mind that we can not totally represent through static screens, such as animations, special behaviours and so on. The most common method I’ve seen is sending plain text files as notes. Clients read them, however, I think there are better methods to convey your message.

You’re delivering a concept, a graphic solution, so why to go primitive with the old plain text file? I mean, there are more effective ways. I encourage designers to use actual design to show notes, as the example above. Placing hints over the design itself helps locating the specific feature easily, what it does and how it works. I’ve experienced clients that love this method. It has worked for me as a competitor too. It’s time to improve the game!

PROVIDE MARVELAPP LINK

In the upload submission form, you must provide the URL of the Marvelapp project you kindly received from your copilot. This will help speeding up the feedback process overall. Make sure to provide the shareable link as in the following screenshot.

You are also encouraged to provide hotspots in order to make the marvelapp presentation browseable. I’ve found out clients appreciate the experience when they can actually click on menus, navigation, buttons, etc. They spend more time reviewing those types of presentations.

PREPARE FOR DEVELOPMENT TRANSITION

In my previous article about Design community mysteries, I mentioned a tip (see #4) that might help you get some valuable points towards to winners selection at the moment of narrow decisions by the client. When this situation comes, a tightened up design decision, clients tend to make decisions based on future. Which submission works the best development wise? Which one can be easily implemented?

By providing a style guideline sheet you can gain A LOT of advantage. It’s not something required in the challenge, but it provides value to your work. You’re proving that you’re thinking ahead and that you care about the follow up process of the project; this might get rewarded with a well deserved victory. I’d say, if you have the time do it:

• Provide consistent font usage guidelines.
• Provide color palette information (color codes).
• Provide UI elements states (hover/active for buttons, dropdowns, links, etc).
• Provide error scenarios in forms.
• In case of complex backgrounds, think and show how it can expand or shrink depending on the target device (large desktop, regular laptop, mobile).

And that’s all for now, see you in another post fellas, peace out!