28_0 Cover
DesignNewsletterTopcoder News

Happy 100th Design Newsletter!


Last week we published the 100th design newsletter since it was revamped!

Being part of the design newsletter team is a great experience. It was two years ago, in 2017, when adroc asked a couple of us (me, gh3ablo, chekspir) if we want to help with improving the newsletter. He didn’t set any limits on the newsletter’s potential sections, it was all open to our ideas, which I totally loved.

By that time, a large part of the active community was already on Slack, so the communication between us and the members was much better. We had the #design-general channel, #the-lux-club, #design-challenges, #tco, but also the #random channel and also #chat-with-gh3ablo which was a great source of fun for the designers. Small private groups or channels were born and many conversations started to flourish.

Based on what we were seeing on Slack, we came up with a newsletter concept for designers: we wanted it to be useful, rich in great helpful technical information, but also to be fun. It was supposed to be FOR designers to show them the challenge opportunities that are on Topcoder, to share the Topcoder policies, but also to be ABOUT the designers as we appreciate every one of them as part of a big family. So, we wanted to have sections where we can share photos of our cities (Member Homesnaps), the diverse and multicultural places we all live, and highlight members for their achievements within the design community (Member Spotlight).

The newsletter was also about keeping the members connected with what’s going on in Topcoder and most important design news brought by a personal note/intro from adroc, which everyone appreciated and read with great interest. It was also about giving everyone the opportunity to know the fellow designers better, to find out about their wins and struggles, and how they deal with losing streaks or what they do to become better (Secrets of Studio Force, Pal Challenge).

One part I really enjoyed reading was “A word from gh3ablo” written by Ghe. He shared cooking recipes, advice related to design challenges, funny quotes and most often and most loved, funny artwork, where he would take the photo of one or multiple designers and transform it into a funny artwork. I have to admit, that even if I saw them earlier when working on newsletter, I was still looking forward to scroll to his section on Saturday morning and laugh again ☺ Thank you Ghe!

One of the sections I was very happy to bring onboard was the "Shining Stars this Week", because we could showcase the top designs from the LUX, RUX or any other challenge that was closed that week. It was an opportunity to provide the designer community a view into winning designs, customer decisions and to learn from the Shining Star's designs. (It is well-known that the majority of design track challenges are private and winning designs are not visible to designers). This way, even if a designer didn’t win a prize, they would still win by learning how to improve for next time.

The first newsletter sections we had were: Designs Tips & Tricks, Pal Challenge, A Word from gh3ablo, Secrets of Studio Force, Member Homesnaps, A TCO Note from Jessie, Member Spotlight, Topcoder Policy News.

All TCO (Topcoder Open) news was provided by jmpld40 in her section “A TCO Note From Jessie” and what can be better than to read that you’re a TCO finalist or see the latest updates about the biggest Topcoder event of the year!

I am personally grateful to the following members who helped provide the idea's of these sections: gh3ablo, yoki, chekspir, Ravijune and adroc for approving them as well to the team who worked every week to have the content delivered to community: chekspir, gh3ablo, adroc, jmpld40.

This was our first revamped newsletter: https://us13.campaign-archive.com/?u=65bd5a1857b73643aad556093&id=3b59e86f6a

It was a great joy when I was reading the slack comments about the newsletter that members liked it or talked about Ghe’s fun artwork, or having a designer telling us that the designs showcased helped him to become a better designer, or just finding the Tips & Tricks useful.

Last year in April, tgerring and HighDef joined our newsletter team and we started rotating the intro content with adroc, which was nice as the designers could get to know them better.

In June 2018, we decided we needed a revamp and a unified look for all the newsletters. So we removed some of the sections, and made places for new ones:

  • Design Tips & Tricks

  • Shining Stars this Week

  • My Way (a place for designers to share tips about how to design most efficient common elements)

  • Topcoder Story (a funny story about our community, made by designers)

  • Design Happy Thoughts with Ghe

  • Designer Poster (a designer’s superhero poster, made by designers)

  • You Know You're a Topcoder Designer When... (section about what makes Topcoder designers unique)

  • Typopost (section about the creation of a typography poster by designers)

  • Weekly Winners (list of the winners for the last week)

  • Outstanding Designs (top designs in the last month, regardless of challenge or placement)

  • Artist of the Week (about artists around the world who are an inspiration for us – brought by ToxicPixel)

Newsletter 2.0 first edition: https://us13.campaign-archive.com/?u=65bd5a1857b73643aad556093&id=3b43d4ba4f

We’ve collected below some of our best content from the 100 newsletters:

Design Tips & Tricks

The importance of a MarvelApp presentation

As many of you have already noticed, we are now requesting all designers to provide a MarvelApp presentation as part of your design submission. This is an amazing way for you to showcase and “sell” your designs and concepts to customers. That is why I would like to give you some tips for using this great tool: 


1) Request your MarvelApp Project within the challenge forums: Do this with enough time in advance. Try to avoid last minute requests. As you can create your own MarvelApp presentations with a personal account, we prefer to have all prototypes under Topcoder's account, so everything will be more organized for the customer. Only request if you are planning to submit because it does take time to create.


2) Never change the MarvelApp project name: The projects has been organized following a code name criteria. So if you get a prototype with a name like “TCO Fun Challenge - 001”, don’t change this to “[Handle] Checkpoint Submission”.


3) Upload your files to the correct MarvelApp Project: On some challenges, both Desktop and Mobile screens are requested, so you will receive 2 MarvelApp projects like “Challenge name Desktop - 001” and “Challenge name Mobile - 001”. Those projects are set up to display images in a certain resolution. So if you upload a Desktop view in a mobile prototype it will not look correct.


4) Add Hotspots or Actions to your presentation: The power of this tool is the ability to add Hotspots like “click”, “hover” and “transitions”. Adding this to your presentation will help the customer understand your vision. It provides a more realistic view of the user interaction and clients will get a better view and feel of what you are proposing. This does not take up a lot of time (keep it simple!) 


5) Always share your prototype link: You must share your link as part of your submission. In the top right of your MarvelApp project, you will see a yellow "share" button. Please provide that share URL as part of your submission. Many designers are forgetting to do this. To provide designers with as much time as possible many customer meetings are scheduled just hours after a checkpoint submission phase ends. Saving time is important! Make sure to share your link!


You can take a look at this video of how to use MarvelApp and create prototype presentations.

How to Handle Difficult Challenges

Most design challenges fall in the usual degree of difficulty, but sometimes we meet those conceptual types that are hard to wrap your head around – they might have a very technical vocabulary or maybe too much detail? (it happens! - check current GET Rapid UX for example). Though as our community has very good designers and design thinkers... and these problems do have solutions... Adam advises us to follow the next steps:


1. Always ask questions!  This is very important for designers as well as for clients. As a designer, making assumptions on how things work instead of asking can lead you down the wrong path and to judge things incorrectly and deliver a bad user experience. It is better to ask the project manager and client to clarify. Besides, other designers will be encouraged to ask as well. If a client watches the forums and sees the questions, he will understand where the issue is, can answer your questions and understand if they need to reduce the scope or refine their requirements. Plus they know for future challenges on how to work with the community and deliver. So when in doubt, ask! 


Also.. if it's really, really, really confusing... Adam and Trevor are available to help try and solve the problem and discuss with the client. 


2. On open challenges, submit an idea to get an early reaction. Usually, on LUX, RUX, GET challenges if we submit early we can test the start of our design work. It can be only 1-2 pages, but when you are in the beginning it makes a big difference. Adam or the Copilot will provide feedback and help clarify your doubts.


3. Use the checkpoint to get the answers you need to understand the problem. Sometimes you want to see if the client prefers a light interface or a dark one, to test concepts see which direction to follow, well this is the moment to do so. Even if you don’t win a checkpoint prize is more important to understand specifications and client’s tastes so you have a better chance to succeed in the challenge.

5 Ways to Improve your Design Skills

Study and research design
If you want to continue to improve and get better with your designing, you must do your research!. Browse sites like Dribbble, Behance, Awwwards, etc. every day to check out designs, what makes something very appealing (to you) and why are specific designs better than others? Review the history of design and analyze what makes great designs and solutions... great. 
Practice
Once you see a design element you find intriguing.. look to try and understand it by creating it. Analyze the details and techniques. Many times, although you think you’ve got the technique to do an item, you don’t. By practicing you will see this and also you will be able to improve it further. Have fun when you practice! Practice on things you might not understand (color, typography, grids). Be creative with new layouts, color combinations, styles. It is your playground.

Seek feedback
Ask people what they think about your work and when they give negative feedback don’t take it personally. Constructive criticism can help you burn some steps. If possible find an experienced designer to be your mentor. The directions they might provide will be invaluable. A few ways to do this:
1. Submit on contests - checkpoint feedback is normally provided for everyone and even losing means advancing a little;
2. Ask studio designers on Slack about feedback on personal projects only (maybe we should have a channel for this?)
3. Seek feedback on Behance, Dribbble or other communities.
4. Ask Adam and Trevor if they have time to provide any additional feedback or comments (especially if you feel like you might be stuck)

Learn the basics

If you are just getting started with design, you will find enough resources to learn online everything you need about color theory, grid theory, typography, golden ratio, etc. Reading theory might not be that fun, but mix it with practice and observations and you’ll see how the dots connect. Also check out existing Design Languages (IBM, Google, Apple and other corporate brands).

5.  Teach others


The moment you have to explain to someone what you have learned is when you have to organize your thoughts around what you know. You might even have to simplify to get the information across, but by doing this you will review and get a deeper understanding of what you’ve already acquired. Plus it feels good to share and help others. :)

Design is not so much magic, is more science than art. There are fixed patterns and best practices that you should know as part of the basics. Be a good observer and researcher. Apply what you know and improve. Take chances...  small daily steps lead to big results.

The Importance of White Space in Design

The space between design elements is called white space. It happens often that clients want to push less space and larger font sizes with more content, while designers would prefer more space to visually separate page elements and content. The goal is to achieve the right balance to create a compelling and engaging design.

  1. Line Height  Most often we used the mini white space between text lines, called line height. This allows the text to be easy to read. If you’re a beginner, you can rely on this formula: line_height = font_size * 1.5.

  2. SeparatorUse larger spaces to separate different page sections. You could also use a line separator or other elements, but white space will keep your page clean and allow the eye to relax. Key here is your use of a grid.

  3. SimplifyWhen there is a lot of information to display, look to simplify and pay attention to all the different spaces. Zoom out to have an “over the tree” view of the page and adjust accordingly.

  4. GroupComplex pages tend to require grouping. Small spaces between elements, will make the eye perceive the content as grouped, while larger space will separate them. It’s also good to pay attention to the size of space compared to the size of element next to it.

  5. Set PrioritiesMost important when defining white space size, is to set priorities. Define what element is more important on a section, maybe a call to action button and a large header and use space to isolate those elements.

How to Get the Most of Your Feedback

There are many tracks on Topcoder, but only the design track receives regular input from customers specifically during the checkpoint stage. The feedback we receive and how we analyze and interpret it is critical to winning a challenge. There may be times where one doesn’t win the checkpoint but is selected as a final placement, because of a better understanding of the checkpoint feedback. Here are some things to understand.

  1. Reading FeedbackMost designers read the individual feedback, the overall general feedback and the feedback provided to the other competitors. The idea is to pay attention to every line of feedback to catch the client’s desires for the design.

  2. EvaluationMake a list with the good and bad items from everyone’s submissions or a checklist of things to add for the second round. Seeing them on paper gives your brain time to think and interpret how to better mix them in your design.

  3. Asking QuestionsMany times, things are not clear on challenges, but we have very few questions on the challenge forum because everyone makes their own assumptions or thinks they will want to disclose their ideas. It is better to ask, rather than work based on wrong assumptions. Never assume!

  4. Researching & SuggestingOnce you have understood what the client is looking for, don’t stop there, go and research more online, on their competitors or similar applications. With the high level of design quality we have on Studio nowadays and if everyone applies the pluses and minuses from the feedback only, the final designs will look pretty similar. Bring new ideas, features to the application beyond what was required, so that client sees the value in it and can pick it as a winner.

What is Atomic Design and How to Use It?

In order to be more efficient when designing for a large number of Responsive screens, we need to use modules and the best approach is to use a design system. The cornerstone of every design system is the style guide, which basically contains the grid system, form labels, inputs, buttons, etc. – called the Atoms. Every element has unique characteristics (size, color, image, etc.) that can’t be broken down without ceasing to be functional.

This may sound like chemistry, but bear with me! It will make sense.

See Brad Frost for a great break down of Atomic Design Methodology.

Just like in chemical reactions, when atoms combine they form Molecules, which in design are simple groups of UI elements functioning together as a unit. Examples from the image above: bottom navigation bar, photo action bar, etc.


Next comes the Organisms: molecules and /or atoms combine to make a relatively complex UI component. Example: photo organism, bottom navigation bar, etc. You recognize organisms as elements you can easily name: footer, primary navigation, cards, etc.


With more Organisms, one creates a Template, which is basically a layout which has placeholder data on it. Now come the Pages, which are the final product based on the skeleton of the templates but with real data.


The power of Atomic Designs consists in creating consistency across all pages, by reusing Molecules/Components to create different Templates and Pages. By using Sketch tool, once we define the Atoms, Molecules, and Components as symbols, every time we modify a button label, textbox (Atom) it will propagate the change through all the pages and will save a lot of time!


Keep in mind Atomic Design for your next project (or Topcoder Challenge).

Visual Hierarchy with Z-PatternDid you ever have too much information for a design and didn’t know how to organize it? Unless you have a landing page design, which has one column, then you are designing for a 2 or 3 columns layout. From project to project, the client’s requirements and the information is different, so you have to judge well in each case.

How do you do that?


First make a list with all the information you need to show, then organize it by priority (in which order do you want the user to see the information and what action do you want them to take?). Then arrange the information in a Z pattern. The reason for Z shape is that people read from left to right, and from top to bottom.

Z-Pattern


Image credit: Tutplus

The information at the top should be items of high interest for the reader. Most of the time, the user always follows the Z pattern on the information above the fold, so any important call to action should have a place here. Of course, we should always keep in mind to balance the text and white space, to give the eyes visual space to rest.


Some of the items that are important in general are always placed on the header section, like the Logo, Notifications, Messages, Settings options, but for the rest we have to focus on how the target users will use the application.


Keep in mind the Z-Pattern for your next projects!

Member Homesnaps

Lecheria, Venezuela – by chekspir

H01-Lecheria-Venezuela-chekspir-1024x768

The Chinese Temple, Surabaya, Indonesia – by yoki

H02-The-Chinese-Temple-By-Yoki-1024x670

Paris, France – by mahestro

H03-Paris-by-Mahestro-1024x679

Thien Mu' Pagoda, Viet Nam – by khanhlinh

H04-khanhlinh-Thien-Mu-Pagoda--1024x576

Chiang Mai, Thailand – by iamtong

H05-Chiang-Mai-Thailand-by-iamtong-1024x1024