Modern Design Tools: Adaptive Layouts

As software designers, we have more tools available than ever before to help us design beautiful software and rich interactions. However, I believe we are still in the infancy of design tools, and would like to offer several ideas for how they can mature and evolve to better enable us to create digital experiences.

Hopefully, and if helpful, these ideas will inform the tools we build in the future. These ideas should be taken, built upon, and improved to the end that we as designers will have better tools with which to create better software.

In this article, I’d like to explore an opportunity to improve one fundamental aspect of design tools: layouts.


We live in a world that is dynamic, designing and building software that lives on devices that are always changing and evolving. These devices have multiple screen sizes, densities, orientations. Our experiences live in this medium, and adapt to ever-changing constraints. This leads us to an important principle:

Design tools should have the same properties as the medium for which we are designing.

Today’s design tools are far from this. Photoshop’s primitive is a single, fixed-size raster document, harkening back to an age where designs mostly lived on the printed page. Sketch improved this slightly with vector artboards, allowing you to design for multiple screen sizes and devices in the same page by using multiple artboards. However each artboard is still a single, fixed size. What’s more, objects in these tools all have a fixed sizes and locations as well. Text labels, images, buttons; everything is static. Because our tools are static, we tend to think and design statically for a single screen size without considering how it will adapt to various constraints. Simply put, our primitives are wrong.


An Adaptive Canvas

Let’s take a look at how a modern design tool might work for designing an iPhone app. This tool is simply a straw man intended to be communicate an idea and provoke thought.

We first need to fix our primitives. The vector canvas should be adaptive, meaning the size isn’t fixed, so we can design in and for all the screen sizes and orientations our app will eventually live in. Something like this:

We can now start to design how the layout and each object should adapt to changing constraints, in addition to how they should look. Both Android and iOS have rich layout systems; so too should our design tools. Making intentional decisions about these layout constraints is part of the designer’s job, and allows us to spend time crafting these seemingly small details that are often overlooked, but can add up to a better experience for our users. What’s more, it helps us think in terms of implementation, making collaboration with engineering easier, faster, and better.

Notice how quickly an adaptive canvas brings up questions that we have yet to answer: how should this work on different screen sizes? What happens to these objects? How do they adjust? Does this make us reconsider anything?

Adaptive Layout Objects

Our canvas is adaptive; so too should our layout objects be. By bringing in many of the concepts found in, say, UIKit’s auto-layout, we can now start to think about the behavior of our objects and how they should adapt. With a few simple concepts, such as size, alignment, and pinning, we get a layout system that allows objects to be adaptive relative to each other and the canvas.

A visual explanation of the layout constraints added to objects.

In the below example, notice how fast it is to add layout behavior to objects. The logo should always be centered. The search input should grow in width, but always be pinned 16pts from the left and right edge of the canvas. The weather card should be -90pts pinned below the bottom edge of the canvas, always showing a small preview.

With just a bit more work, we end up with a fully adaptive layout. Since software design is almost always a team sport, a modern design tool would let you share this with anyone easily so they too can see how the layout adapts. This would be especially useful when collaborating with engineering. The ability to inspect each object’s layout constraints would greatly reduce the need to spec or redline static mocks, and make the implementation process far faster and easier than it is today.

One area where a tool like this would be particularly useful is making decisions around how our layout should work in landscape mode. Many apps choose not to support landscape mode, as there is an additional cost in both design and development. But for those apps that do, an adaptive layout system allows you to quickly optimize your design for both portrait and landscape orientations, creating the best experience now matter how a user decides to use your app.

In this example, we can make some interesting but important decisions when optimizing for landscape:

  • Do we need the status bar here? Let’s remove it.
  • We have much more horizontal room now, so let’s make From and To, and the ETA and Route inline.
  • Once we do that, we can now greatly reduce the space the header and footer take up, allowing us to see more of the map.

Adaptive Thinking

Since our tools shape our thinking, it’s critical that we have design tools that allow us to go beyond the static thinking that has encumbered us for so long. While it’s technically possible to design and optimize for various layouts and orientations today, it’s tedious and difficult, which means that we often don’t do it.

The age of pixel perfect design for a fixed size is over. The number of devices and sizes our designs will live on will continue to expand, and so too should our tools.


Further Reading

One of the challenges in building a modern design tool that does this well is the non-trivial nature of expressing rules and layout behavior. Below is a collection of resources for further reading on the subject.


Many of these ideas and those to come would not exist if not for many hours of discussion, debate, and discourse with others, for ‘only in storybooks do inventions come like a thunderbolt, or a lightbulb popping out of the head of a lone individual in a basement or garage.’ Thanks deservedly goes to Koen Bok, Justin Edmund, Soleio Cuervo, Rasmus Andersson, Nathan Borror, Brandon Walkin, Noah Levin, Tisho Georgiev, Colin Dunn, and Wilson Miner for their roles in cultivating worthy ideas and pruning poor ones.


Follow along for the next article, which will explore how design tools should use real data.

Next Story — What does it take to enable great product design?
Currently Reading - What does it take to enable great product design?

What does it take to enable great product design?

It’s interesting to me that whether I’m talking with designers or business leaders, I often hear variations of the same question: “What does it take to make great design outcomes happen?” CEOs and business leaders ask the question because they want to know how much they need to invest in design relative to other priorities. Designers ask the question because they want to know how to sell a design initiative to business leaders.

I’ve been lucky enough to build design teams that have achieved some truly great outcomes, either by creating new products or transforming existing products from good to great. Based on all these experiences and other discussions with design leaders, here is my point of view on what it takes to enable great product design:

Freedom to build a great team

At many companies, it’s hard to get approval to hire or attract the design talent you need. It’s not possible to build a great product without a great team.

Successful product design comes when you not only have a generalist designer partnering with each PM, but also have the freedom to hire specialists like illustrators, motion graphics experts, and UI engineers. These specialists work across teams to ensure that the most important parts of your product are truly outstanding.

It’s a mistake to assume that all designers operate in the same way, or have the same skills. There are different types of designers. Some designers are great visually, others are outstanding at thinking about the underlying structure of a product. Some designers are design documenters and pattern setters; the people who make things consistent from one part of the app to another. Some are visionary inventors, while others know how to take an existing design and optimize. Some are able to give a product a personality that users connect with.

It’s important to staff the right designer on the right problem, and to hire a variety of genius types on your team. You want a diversity of skills and ideas. You want to hire people who are passionate, not just smart. People who fall in love with a problem and can’t rest until it’s solved well. Building a great team means finding people who are extremely gifted and confident, but don’t let ego get in the way of collaboration.

When I talk with product leaders who are frustrated with the quality of the design work coming from their design team, it’s often because they have too few designers, they see all designers as having the same skills, or they try to fix design problems by hiring more PMs. Their designers are spreading themselves too thin by working with several product managers. They aren’t able to take the time to really partner with the PM to internalize the business problem and create a solution that is thoughtful. Companies with struggling products don’t invest in hiring specialists to enrich the product experience.

Executive support

This may seem obvious, but companies that deliver great design, have strong design leaders and support from the CEO to invest in design work & polish. After giving presentations to designers about large design projects I’ve worked on, one of the most common questions I get is, “How did you get the executive team to fund this project? How did you convince them that design was worth investing in?” The honest answer is that I don’t have to work hard at that, because I choose to work for companies that understand that design is important, and I have a seat at the table in defining the roadmap.

At one point in my career I looked at my portfolio and saw some work that was good and some that wasn’t. I was worried that I wasn’t consistently good. When I looked at the context behind the projects that were the most successful and the ones that were not, one key difference was that executives were strongly supportive of the efforts that were the biggest wins. Great products come from a continuous process of building and refining, not just building and building more.

It’s becoming more and more common for companies to have design leadership sitting along side business, product, and engineering leaders helping to make decisions. If a company doesn’t have great design outcomes, it’s likely that they don’t have design leaders who are able to partner with product and engineering leaders to define the roadmap and prioritize design work.

A well defined brand

Another key enabler to product design is a well defined brand. For many software companies, the product is the brand, as that’s where your customers spend the bulk of their time interacting with your company.

Having a well defined brand means knowing the core emotion you want people to feel when they use your product. It means that you know how people should be describing you, and you are actively working to ensure that what you build ladders up to those descriptors. A well defined brand will mean that users feel that they know what makes your company unique; they feel a sense of trust and loyalty to you.

Whether it’s user experience principles or brand attributes, the product team needs a north star that they are working with to know what feels right and what doesn’t when making design choices. Outstanding products offer interactions that help you make a deeper connection with your brand, and with others using your product. A lot of companies can make something functional, but truly great products give people an emotional benefit. They have features, visual metaphors and other experiences that are ownable and sacred. These are areas of the product that get special attention and oversight.

Design thinking across the company

Great design doesn’t come from the design team, it comes from a design thinking company. I’ve been fortunate in that many of the product, marketing & engineering leaders I partner with are great design thinkers. They know how to work with design to make a minimum viable release that still feels great. They think about not just the functional needs but the story we tell to engage with our customers. They are good at beginner’s mind, and are able to see the product through the lens of their target users. They intuitively know that small details matter, and that inconsistencies chip away at a user’s confidence in your product.

One of the most important parts of a design leader’s job is not in fostering design thinking within the design team, but in creating a culture where the whole company participates in design. The most successful projects I’ve experienced have cross functional teams come together to collaborate well.

Engineers that sweat the details

So much of the credit for a great product design should go to the engineer. Companies that have outstanding product design have outstanding engineers who care about every use case, and every detail. They do their own QA and take the time to sweat the details. They think at the component level and understand that reusing consistent patterns benefits the user and helps with engineering velocity. They contribute design ideas and collaborate in product ideation, understanding the goals of the project and offering solutions that are better. Asana has a phenomenal engineering team. We look for design-minded engineers, who work closely with designers. Both the design and the engineering teams have a culture of pride and craftsmanship in getting the details right, but also in moving quickly.

A collaborative & empowering culture

I believe that you can look at the user experience and tell whether the team building it is empowered to do their best work. You can actually see where organizational lines are drawn by looking at the inconsistencies and seams between one area of the product and another. You can see whether a designer had the freedom to think about a page or interaction holistically.

In order to build a great product your team needs to be working and collaborating effectively. You want heated arguments between passionate and smart people, but also a team that knows how to get on board and work together to execute quickly. You want role clarity, but also a lot of role blending and trust.

Having a culture of empowerment is one where employees have the freedom (and responsibility) to build their own company culture and to be responsible for fixing problems in process or collaboration when they arise; one that allows teams to make their own decisions, and leaders who facilitate rather than dictate. At Asana, we’ve been lucky enough to have the flexibility & creativity to build a design culture that consistently delivers outcomes we are proud of. Learn more about the Asana design team at https://asana.com/jobs/design.

Next Story — Top Diversity Tips and Insights from Epicurrence — The Montues
Currently Reading - Top Diversity Tips and Insights from Epicurrence — The Montues

Top Diversity Tips and Insights from Epicurrence — The Montues

It was late. The event room had emptied out. And the panelists walked onto the stage: three African American women, two African American men, two Asian American women, a Muslim Canadian woman, and the facilitator. It was by far, the most diverse panel many of us had ever seen at a tech event.

We all became suddenly aware of contrast, as good designers often are. The crowd was peppered with mostly eager and tired Caucasian men, while the panel included women and men of different colors, ethnicities, sexual orientations, and religious identities. Some panelists were young and emerging professionals on scholarship to the event; others were well-established designer founders, entrepreneurs and senior product designers.

The conversation was passionate and the panel managed to keep us engaged and asking questions well until midnight. Below are some of their tips on how to increase diversity and inclusion in design and tech, along with some of the more interesting Q&A’s that emerged.

Insights and tips:

If everyone looks like you, speak up. The simple act of sharing an observation with your HR, manager, or co-worker can begin to plant a seed that something needs to change or isn’t quite right.

Ask yourself: What’s something I could do tomorrow? There’s no need to solve the entire diversity problem in tech. Small actions will build on themselves, spread, and grow.

When someone you work with feels uncomfortable, don’t dismiss it. For example, don’t say such things as, “You’re being too sensitive; it was just a joke!” On the flip side, if you are feeling uncomfortable, bring it up and don’t feel ashamed.

Have a diverse member involved in the recruitment process. Even if the diverse member is more junior or on a different team, make an effort to involve them in recruitment to help create a more balanced perspective and counter any biases.

For recruitment, start at the top of the funnel by amplifying access. Don’t make any false promises or tell people you’re targeting them because you want more diversity on your team. Instead, focus on amplifying access and distribution to diverse populations that way they have a fair chance. According to one panelist, this strategy would buffer against unintended “reverse discrimination” later on (see below).

Interesting Q&A’s:

“What do I do when people accuse me of ‘reverse discrimination’?” The best response here was to be equipped with facts on how diversity increases economic outcomes and innovation. Explain how it’s in your best interest to recruit a diverse team. Speak their language.

“What should I say to friends who feel a minority didn’t earn their position, but filled a diversity quota instead?” Explain exactly why you hired them, both in consideration of them as an individual and their merits, as well as in their role in diversifying the team.

“I’m getting mixed messages: both diversity and like-mindedness are good. Which should I choose?” Both are possible, but decide which commonalities vs. differences best serve your company. You might want your next hire to share your company’s focus on passion and humility, but have different work and life experiences as a way to increase perspectives on our product.

One attendee asked the last question of the event: “Should we change the culture of this event to be more inclusive?” (For context: some have argued that many of the design event’s themes are too male-centric and privileged [i.e., surfing, snowboarding, making trucker hats, etc.]). One panelist shared that from a business perspective, it might be better to stay niche and appeal to a specific target market. Many acknowledged that one simply can’t and shouldn’t appeal to everybody!

I felt a bit torn with this last one, not sure whether t0 adapt or stay true to the original vision, which feels genuine and authentic. There is probably a balance to strike and it may depend on whether increasing diversity in tech is a core intention of the event. What are your thoughts? I’d love to know. Comment and/or recommend below.


If you’re interested in more diversity in tech, I’ll be helping host our 5th Women in Design event in April. Keep in touch here.

Photo credit: Monica Semergiu

Next Story — 5 Dos and Don’ts for Your Design Portfolio
Currently Reading - 5 Dos and Don’ts for Your Design Portfolio

5 Dos and Don’ts for Your Design Portfolio

I’ve reviewed a lot of design portfolios, from design school applicants to seasoned designers looking to join booming tech startups. In the past few months alone, I’ve reviewed more than a thousand design portfolios to select top candidates for the fifth session of Designer Fund’s Bridge program. As you might expect, a few patterns emerged; some good, some bad. To put a finer point on it, some portfolios were much better at showcasing designers’ skills and abilities.

There are many motivations for having a portfolio site, from personal expression to trying to convince someone that you have the right skills required for a job, school, or program. And the rules are certainly different depending on your goal. I’ve seen many very capable designers get passed over for an interview for the position they really wanted because their portfolio stood in their way. To prevent this from happening to you, here are some tips for making your portfolio as effective as possible:

1.

Do carefully edit your work to create the narrative you want. 
Don’t use your portfolio as an archive of your entire work history.

The work you include, and the order in which you display it, is critical to how the viewer will perceive you as a designer. That’s why it’s important to start the editing process by determining your personal narrative. What is the story you’d like your portfolio to tell? Based on this answer, you can start to group your work by type of project or company/client. In some cases your best work might not be the most relevant to the goal you’re trying to accomplish.

Once you’ve determined how you’d like to group your projects, another consideration is the point of entry, or where a viewer will click first. It doesn’t matter how much time and care you put into subsequent parts of your portfolio if no one ever sees them. Have a clear path for viewers to see your best work and avoid unconventional navigation.

As far as the number of projects to include, it’s better to have fewer than to include outdated work that will bring down your average.

A quick gut check to determine whether or not you should include something is— ‘if this is the only project a potential employer saw, would they be seeing my best work?’

There is no one size fits all solution, but I would aim for 6 projects, with no more than 12 total. You can always include more projects upon request as you go farther in any interview process.

Examples: 
If you’re a freelance designer who wants to focus on designing for mobile moving forward, then you should prominently feature your best mobile work.

Perhaps you’ve spent the past 2 years at a tech company and want to highlight the range of your contributions. Your narrative should be less about your individual output and more about the projects you were a part of and what your team accomplished together.

2.

Do showcase the type of work you want to do professionally.
Don’t include hobbies or personal projects in the professional work section of your portfolio.

The most important thing is that you portray yourself as skilled in the areas for which companies are looking to hire. When you mix in your hobbies without indicating so, it might give the reviewer the impression that your work is inconsistent.

Don’t get me wrong, it’s great to have a well-rounded portfolio and include your personal or side-projects. It not only highlights your passion and personality, but can set you apart as being a self-starter. However, it’s important to distinguish this work from your professional pursuits.

If you’re developing a new skill such as illustration or prototyping and feel strongly about including it in your portfolio, be sure to indicate your beginner status. Or if you’re trying to transition from communication design to product design, your transitional portfolio can show mastery in one area of design with a written statement about your intention to move into another area.

Example: If you’re a product designer pursuing photography on the side — the minute you mix your photographs with your design work, I will hold them to the same standard as your professional projects. Consider having separate sections for professional and personal work.

3.

Do give context.
Don’t
rely on images to do the talking.

It’s impossible to know whether you’ve designed something well unless you explain what you were trying to accomplish, the resources at your disposal, and the timeframe in which you completed the project. I’m not the first one to insist on this sort of explanation for product design portfolios, but it’s necessary for communication design as well. How will the reviewer know if you’ve achieved the brand identity you set out to convey? You have to spell it out. Literally. With words.

The trick is to have a balanced portfolio. If you have a lot of words, you likely need to add something interesting to look at, and if you have a bunch of glossy images, you probably need some more words.

There is a trend toward detailed case studies in design portfolios. It’s a good trend. One strong case study says more about your design ability than 100 thumbnails.

One caveat: if you have work that has yet to ship or is under NDA, you can omit context in favor of a teaser logo and a sentence saying to request more information (assuming your employer or client is okay with sharing your work in a confidential setting).

4.

Do think about how to represent your work in a compelling way.
Don’t follow the same format for every project.

Not every project will fit neatly into the same template. For a given project, think about what steps are important to include, which can be excluded altogether, and how to best represent each part. For example, sometimes a thoughtfully written explanation will serve you better than a snapshot of an illegible whiteboard. If you are trying to show breadth of your research or exploration, show a compilation of sketches, but be sure to explain why you chose the direction you did.

Don’t overlook beautifully representing your work. Think about what style of presentation will really do your final work justice. If it’s physical work (printed collateral, packaging), invest in good photography. If it’s visual design for an app, show it on a device. For an onboarding flow, include an interactive prototype.

Whatever you do, please don’t take a screenshot and skew it at an aggressive angle so that the design itself is impossible to discern.

5.

Do consider the UI/experience of your portfolio site.
Don’t let the design of your portfolio site become a distraction.

The design of your portfolio should be functional and should serve as a backdrop to support your work.

Many designers choose to design their own portfolios. This can be a great way to set yourself apart from the pack if done well.

Just like dressing for an interview isn’t the right time to experiment wildly — you don’t want it to take away from the carefully curated and annotated works you’ve put together.

If you’re not sure where to draw the line, tools like Squarespace or Semplice offer professionally designed portfolio templates, which are well-supported and look good regardless of how they are viewed. I always resize portfolios to see whether they are responsive.

Medium is also an increasingly popular platform to showcase your portfolio. This is effective because the writing portion is so critical and it helps that there’s a talented design team at Medium working to ensure that it looks and feels professional.

Even if you’re confident in your abilities and wish to showcase your design skills with a custom portfolio site, sometimes it’s better to err on the side of simplicity.


Sure, this is a lot of work, and it’s just the beginning of the interview process. But if you want to distinguish yourself in a competitive field, you’ve got to take the time to sweat the details. Not only will it help you get your foot in the door, it will serve as excellent preparation to present your work in person.

If you’re a designer actively seeking new opportunities with top tech companies, please tell us more about yourself here and we’ll be in touch.

Next Story — The Importance of Good Feedback
Currently Reading - The Importance of Good Feedback

The Importance of Good Feedback

by Laura Elizabeth


Recently I was on a chat with Marissa Louie from BearBear.

Marissa has a strong background in design boasting clients such as Apple and Yahoo but decided to pack in the more corporate lifestyle and focus on her passion: making and selling teddy bears!

During our chat Marissa said something that really stuck with me.

“All designers suck in their first two years of designing”.

It’s good to know it wasn’t just me that sucked in my first two years!

The thing is, 2 years is a long time to be practicing design before you can consider your work good.

What do you do if you’re just starting your design journey but you already have clients that expect (and pay you for) good design work?

At this stage you’re probably still learning with a mixture of basic knowledge, trial and error. You can’t simply ‘learn faster’ or quit your job to focus on the subtle nuances of typography full time.

So what can you do now to make your designs better?

Get feedback from people who have already been there.

Seriously. They won’t bite.

In fact most designers love to be able to make a few comments and help transform someones design from mediocre to pretty darn hot.

But where do you go to get this feedback from? Maybe you work from home and you’re finding your dog isn’t giving you the detailed critiques you’re looking for.

Luckily a bunch of places have been popping up recently that are seriously amazing for getting feedback on your work. I am truly humbled by the helpfulness of the design community.

Slack

Slack: All your communication in one place, integrating with the tools and services you use every day.

If you haven’t heard of Slack yet, where have you been?!

Slack is a channel where people can form groups and chat.

There are Slack groups popping up everywhere and it may take some time to find the sweet spot between one that is so big and active it’s almost impersonal and ones that promise good things but are completely dead with nothing but the odd promotion going on.

My favourite Slack group is a modest sized one that you get if you sign up to Nusii (a beautifully simple proposal software service).

I feel like I know everybody in there really well and they are all amazing when someone has a problem or needs a bit of feedback.

It’s not content chatter every day, but I like that because I’m busy and I bet you are too. It can be so easy to turn Slack into a black hole of time wasting.

(By the way, if anybody has any links to some great — ideally free — Slack groups, leave a comment here and I’ll put them up).

Hunie

Hunie: Connecting designers, founders and developers for design feedback.

Hunie is my favourite tool for getting specific design feedback as it is so efficient.

All you have to do is upload your design, write a brief comment about the kind of feedback you want and you will get designers from all over giving you helpful, insightful feedback on your work.

Because Hunie is made for critiquing everybody on there gives actionable advice and it is fantastic to see the transformations in people’s work just from critiques made in Hunie.

Sometimes it is the smallest things that can let a design down. One critique I seem to give a lot is to increase the leading in paragraphs (leading is the space between the lines, or the line height). You’d be amazed what a difference this simple task can make.

Hunie is currently invite only but if anybody wants to join I still have a few invites left, so feel free to email me and I’ll get you signed up.

Find a Friend or Mastermind Group

If you know somebody who is in the same boat as you, why not form a mastermind group with them. Nathan Powell writes a great post about mentorship groups here. It can be a really good way to keep yourself accountable, especially with side projects, to set up a specific day and time every week to get together and talk about what you’ve been working on and ask any questions.

I do this with my good friend Richard Child of Grid North Design. I keep an (Ever)note handy and jot down anything I want to get his opinion on. “What do you think of this colour scheme”, “Which of these two concepts do you prefer” and we can get some really good feedback going that way.

We schedule a time once a week, every Saturday to go through our work with each other. It’s a great way of getting another pair of eyes on your projects — Richard will always spot important things I’ve managed to miss.


So if you’re a new designer, or a seasoned one stuck in a rut I urge you to try one of the above techniques and you’ll see not only your designs improve, but you’ll get to v’meet some like-minded people in the process.

Just remember when you’re a shit hot designer to come back and give others feedback too.

It’s just the circle of life.

Sign up to continue reading what matters most to you

Great stories deserve a great audience

Continue reading