Chao Hotel Beijing / gmp Architects

© Christian Gahl

( c) Christian Gahl

Architects: gmp Inventor

Location: Workers’ Stadium E Rd, Chaoyang, Beijing, China

Architect In Commission: Meinhard von Gerkan, Stephan Schutz, Stephan Rewolle

Design Crew: Liu Xiao, Xiao Wenda, Yang Ying, Lin Da, Ding Qiao, Zhou Yihan

Project Management: Su Jun

Area: 31372.0 m2

Project Year: 2018

Photographs: Christian Gahl

Facade Consultant: SuP Ingenieure GmbH, Beijing

Interior Design: CITI( Beijing) Construction Co ., Ltd; gmp

Structural Design& Hvac: Beijing Institute of Architectural Design( Group) Co ., Ltd( BIAD)

Patient: Chao Hotel

© Christian Gahl

( c) Christian Gahl

Text description provided by the designers. The brand-new facade by von Gerkan, Marg and Spouse Architects( gmp) channels a lightness and a sculptural consequence to the renewed inn pillar, which can be seen from afar. Its angled vertical points and the rotate shut and glazed committees create a play of light and shadow. Horizontal ledges are put every 2 stories, thus creating a allay facade geometry with balanced proportions. In addition to the external envelope, gmp designed the multifunctional “Glasshouse” to compute a venue with a special atmosphere to the inn complex.

© Christian Gahl

( c) Christian Gahl

Masterplan

Masterplan

Courtesy of gmp

Courtesy of gmp

Since its modernization and reopening in 2016, the 80 -meter-high hotel tower is one of the popular destinations in the Sanlitun business quarter of Beijing. The former “Beijing City Hotel” was established in 1990 as China began to open up. The onetime look of the building and its scant relationship with the urban issues context were an expression of the results of Beijing’s fast urbanization process. The motif by gmp poses a peer and hitherto long-term functional hotel architecture that reestablishes the position of the tower in the urban context.

© Christian Gahl

( c) Christian Gahl

The three-dimensional zig-zag-like building envelope shows the triangular footprint of the 26 -story tower and reinforces the recognizability of the building. Curtain-wall elements in light-footed gray-headed glass-fiber concrete change with gray-tinted glass bodies and the angled grouping of these panels and aspects means that, depending on the considering inclination, the sides of the building appear to change between open and closed.

© Christian Gahl

( c) Christian Gahl

Slender horizontal steps made of glass-fiber concrete have been inserted every other story, thus creating a amicable rhythmic disagreement of the facade. The geometric organisation and the story-high glazing opens the formerly introverted building to the circumventing urban cavity and appoints a brand-new spatial aspect in the hotel rooms.

Standard Floorplan

Standard Floorplan

The materials and structure of the high-rise facade continue in the new lengthened admission expanse of the hotel. A colonnade on the west and south line-ups of the building consisting of ten-meter-high glass-fiber concrete ingredients visually defines the entering and screens the semi-public forecourt to the south of the hotel.

© Christian Gahl

( c) Christian Gahl

The vertical panels with triangular cross-sections are stood at different directions, which has the effect of navigating inn patrons intuitively from the noisy Workers’ Stadium North Road to the adjourned, formerly terribly concealed, hotel entry. Likewise, the venue modernise by gmp and be called “Glasshouse” shows the clear geometry of the facade designing. Subscribed by an arched organization, a double-skin ceiling with an external mantle of glazing and internal louvers admits daylight into the opening below, which has aptly been reputation “Glasshouse”.

© Christian Gahl

( c) Christian Gahl

The louvers run as solar screening inventions, lightening the natural flare, and as a means of attenuating music. The interplay of emblazons of the concrete archways and wooden louvers in combination with the play of light and shadow create a practically spiritual atmosphere in the seat below.

Read more about this at: feedproxy.google.com

Guangxi Culture & Art Center / gmp Architects

© Christian Gahl

( c) Christian Gahl

Designers: gmp Architects

Location: Liangqing Qu, Nanning shi, Guangxi Zhuangzuzizhiqu, China

Architect In Bill: Meinhard von Gerkan, Nikolaus Goetze, Dirk Heller

Project Managent: Dirk Seyffert

Partner Practice In China: ECADI, Shanghai& Shanghai Modern

Area: 113764.0 m2

Project Year: 2018

Photographs: Christian Gahl

Competition Design Unit: Christoph Berle, Hanna Diers, Jessica Last, Mikael Stenberg, Ziheng Wu, Xinling Xu

Detailed Design Team: Christoph Berle, Cai Feng, Maike Jager, Liwen Knoll, Jessica Last, Holger Schmucker, Alexander Schnieber, Mikael Stenberg, Marcus Tanzen, Xinling Xu

Project Management China: Di Wu, Wei Lin, Zheng Wang, Mei Pan, Yangjiao Liu

Structural Design: schlaich bergermann spouse GmbH, Stuttgart/ Shanghai

Fassade Consultant: SuP Facade Design, Darmstadt/ Beijing

Landscape Design: WES, Hamburg

Lighting Design: ag-Licht, Bonn

Media Technology/ Acoustics: Muller BBM, Munich

Stage Technology/ Stage Lighting: Kunkel Consulting, Burstadt

Client: Weining Ltd ., Nanning, China

© Christian Gahl

( c) Christian Gahl

Text description provided by the inventors. The Guangxi Culture& Art Center in Nanning has opened its openings. It is a glorious theater of the genu that is very popular in China and suffices as a venue for a broader range of musical and cultural planneds: in addition to classical works in the European legend of operas, happens include concerts, melodics, and gala shows.

© Christian Gahl

( c) Christian Gahl

© Christian Gahl

( c) Christian Gahl

Three concert hall have been arranged as detached works on a natural stone-clad plinth build that alters the service functions. The opera house to the south-west with its 1,600 accommodates and a 600 square-meter stage opens out to a newly founded lake.

© Christian Gahl

( c) Christian Gahl

Following the tradition of classical opera houses, the seating has been laid out in the form of a horseshoe. The stops and balconies are contacted via a vestibule and an arrangement of stairs. Softly arcked wood-paneled skin-deeps create a warm interior flavour, and the reverberation time of 1.5 to 1.8 seconds supplies ideal acoustic conditions.

© Christian Gahl

( c) Christian Gahl

Section of the opera house

Section of the opera house

© Christian Gahl

( c) Christian Gahl

The concert hall with its 1,200 sits are currently in the east side and has been designed as an oblong hexagon with a rounded stagecoach neighborhood. It features an organ with 64 registers and is therefore is ideal for a wide range of musical accomplishments ranging from chamber music to symphony concerts by composers like Bruckner. Wide wooden stripes on walls and ceilings provision one particular rhythmic fiat to the visual appearance.

© Christian Gahl

( c) Christian Gahl

The smallest residence, with 550 sets, is a multi-functional hallway and is located to the north. Its electronically verified acoustics guarantees to the reverberation time can be adjusted with infinite variability. Different theatre situations for music, ballet, and theater conducts as well as manner pictures can be created with the assistance provided by raising platforms.

© Christian Gahl

( c) Christian Gahl

The three venue constructs are mingled by a shared, apparently moving ceiling. Similar to the facades, it looms as a large design of louvers, which has been constructed with a steel formulate substructure and lily-white folded aluminum committees as cladding. When goal from the opposite bank of the River Yong or from the approach via Nanning Bridge, the radiant white-hot determine of this outstanding culture center of Nanning and the Guangxi state sees confidently in contrast to its borders. Depending on the position, the silhouette of the building changes dynamically, conjuring associations with the natural karst formations that are so normal of the Guangxi landscape.

© Christian Gahl

( c) Christian Gahl

Read more about this at: feedproxy.google.com

Collaborative design fuels shared understanding—the fundamental currency of Lean UX

Lean UX begins with the idea that user experience design should be a collaborative process.

As you navigate through the rest of your life, be open to collaboration. Other people and other people’s ideas are often better than your own. Find a group of people who challenge and inspire you, spend a lot of time with them, and it will change your life.

—Amy Poehler

What is a “user experience”? It’s the sum total of all of the interactions a user has with your product and service. It’s created by all of the decisions that you and your team make about your product or service: the way you price it, the way you package and sell it, the way you onboard users, the way you support it and maintain it and upgrade it, and so on and so on. In other words, it’s created by a team, not an individual user interface designer. For this reason, Lean UX begins with the idea that user experience design should be a collaborative process.


Figure 1-1. The Lean UX cycle

Lean UX brings designers and nondesigners together in co-creation. It yields ideas that are bigger and better than their individual contributors. But it’s not design-by-committee. It’s a process that is orchestrated and facilitated by designers, but one that’s executed by specialists working in their individual discipline who work from a common playbook you create together. Lean UX increases your team’s ownership over the work by providing an opportunity for individual points of view to be shared much earlier in the process.

In this chapter we’ll explore the many benefits that come from this close, cross-functional collaboration. Specifically, we’ll look at the following:

Why everybody gets to design

How low-fidelity artifacts increase collaboration

Building a shared understanding across your team

We’ll also look at a set of techniques that enable this more productive way of working:

Design Studio—a collaborative sketching exercise for the entire team

Design systems and style guides—living repositories of all the customer-facing elements of your product

Collaboration techniques for geographically distributed teams

Let’s dig in…

Collaborative Design

In not available, you learned about hypotheses. To test your hypotheses, you sometimes simply conduct research. But other times, you need to design and build something that will help you to test these hypotheses. For example, if you’re in the early stage of a project, you might test demand by creating a landing page that will measure how many customers sign up for your service. Or if you’re later in the product lifecycle, you might be working at the feature level—adding some new functionality that will make users more productive, for example. Navigating the many possible design options for these features can be difficult for teams. How often have you experienced team conflict over design choices?

The most effective way we’ve found to rally a team around a design direction is through collaboration. Over the long haul, collaboration yields better results than hero-based design (the practice of calling in a designer or design team to drop in, come up with something beautiful, and take off to rescue the next project). Teams rarely learn or get better from working with heroes. Instead, in the same way that creating hypotheses together increases the Product IQ of the team, designing together increases the Design IQ of the team. It allows all of the members of the team to articulate their ideas. It gives designers a much broader set of ideas to draw upon as they refine the design. This, in turn, increases the entire team’s feelings of ownership in the work. Finally, collaborative design builds team-wide shared understanding. It is this shared understanding that is the currency of Lean UX. The more the team collectively understands, the less it has to document in order to move forward.

Collaborative design is an approach that allows a team to design together. It helps teams build a shared understanding of both the design problem and the solution. It provides the means for them to work together to decide which functionality and interface elements best implement the feature they want to create.

Collaborative design is still a designer-led activity. It’s the designer’s responsibility to not only call collaborative design meetings but to facilitate them, as well. Sometimes, you’ll have informal chats and sketching sessions. Sometimes, more structured one-on-one sessions with a developer at a whiteboard. Other times, you will gather the entire team for a Design Studio exercise. The key is to collaborate with a diverse group of team members.

In a typical collaborative design session, teams sketch together, critique the work as it emerges, and ultimately converge on a solution they feel has the greatest chance of success. The designer, while still producing designs, takes on the additional role of facilitator to lead the team through a series of exercises.

The output of these sessions typically consists of low-fidelity sketches and wireframes. This level of fidelity is important. First, it makes it possible for everyone to contribute, even team members with less sophisticated drawing skills. Second, it’s critical to maintaining the malleability of the work. This gives the team the ability to pivot quickly if their tests reveal that the approach isn’t working. It’s much easier to pivot from a failed approach if you haven’t spent too much time laboriously drawing, documenting, and detailing that approach.

Collaborative Design: The Informal Approach

A few years ago, Jeff was designing a dashboard for a web app targeted at TheLadders’ recruiter and employer audience. There was a lot of information to fit on one screen and he was struggling to make it all work. Instead of burning too much time at his desk pushing pixels, he grabbed a whiteboard and asked Greg, the lead developer, to join him. Jeff sketched his original idea about how to lay out all of the content and functionality for this dashboard (see Figure 1-2). The two of them then discussed the idea, and eventually Jeff handed Greg the marker. He sketched his ideas on the same whiteboard. They went back and forth, ultimately converging on a layout and flow that they felt was both usable and feasible, given that they needed to deliver a solution within the current two-week sprint. At the end of that two-hour session, they returned to their desks and began working. Jeff refined the sketch into a more formal wireframe and workflow while Greg began to write the infrastructure code necessary to get the data they needed to the presentation layer.


Figure 1-2. Examples of whiteboard sketches

They had built a shared understanding through their collaborative design session. They both knew what they were going to build and what the feature needed to do. They didn’t need to wait to document it. This allowed them to get the first version of this idea built within a two-week time frame.

Conversation: Your Most Powerful Tool

Lean UX promotes conversation as the primary means of communication among team members. In this way, it is very much in line with the Agile Manifesto that promotes “Individuals and interactions over processes and tools.” Conversation unites a team around a shared vision. It also brings insights from different disciplines to the project much earlier than a traditional design cycle would allow. As new ideas are formed or changes are made to the design, a team member’s insight can quickly challenge those changes in a way the designer alone wouldn’t have recognized.

By having these conversations early and often, the team is aware of everyone’s ideas and can get started on their own work earlier. If they know that the proposed solution requires a certain backend infrastructure, for example, the team’s engineers can get started on that work while the design is refined and finalized. Parallel paths for software development and design are the fastest route to reach an actual experience.

These conversations might seem awkward at first; after all, you’re breaking down time-tested walls between disciplines. As the conversation evolves, however, designers provide developers with input on the implementation of certain features, ensuring the proper evolution of their vision. These conversations promote transparency of process and progress. This transparency builds a common language and deeper bonds between team members. Teammates who trust one another are more motivated to work together to produce higher-quality work.

Find ways to have more conversations with your teammates, both work-related and not. Time spent cultivating social ties with your team—eating meals together, for example—can make work-related conversations easier, more honest, and more productive.

Collaborative Design: A More Structured Approach

When your team is comfortable collaborating, informal sessions like the one we’ve just described take place all the time. But sometimes, you are going to need to gather everyone for a formal working session. Design Studio is a popular way to do this.1

This method, born in the architecture world where it was called Design Charrette, is a way to bring a cross-functional team together to visualize potential solutions to a design problem. It breaks down organizational silos and creates a forum for your fellow teammates’ points of view. By putting designers, developers, subject matter experts, product managers, business analysts, and other competencies together in the same space focused on the same challenge, you create an outcome far greater than working in silos allows. It has another benefit. It begins to build the trust your team will need to move from these formal sessions to more frequent and informal collaborations.

Running a Design Studio

The technique described in the sections that follow is very specific; however, you should feel comfortable to run less or more formal Design Studios as your situation and timing warrants. The specifics of the ritual are not the point as much as the activity of solving problems with your colleagues and clients.

Setting

To run a Design Studio session, you’ll want to find a dedicated block of time within which you can bring the team together. You should plan on at least a three-hour block. You’ll want a room with tables that folks can gather around. The room should have good wall space, so you can post the work in progress to the walls as you go.

The team

The process works best for a team of five to eight people. If you have more people, you can just create more teams and have the teams compare output at the end of the process. (Larger groups take a long time to get through the critique and feedback steps, so it’s important to split groups larger than about eight people into smaller teams who can each go through the following process in parallel, converging at the end.)

Process

Design Studio works within the following flow:

Problem definition and constraints

Individual idea generation (diverge)

Presentation and critique

Iterate and refine in pairs (emerge)

Team idea generation (converge)

Supplies

Here’s what you’ll need:

Pencils

Pens

Felt-tip markers or similar (multiple colors/thickness)

Highlighters (multiple colors)

Sketching templates (you can use preprinted one-up and six-up templates or you can use blank sheets of 11″ x 17″ [A3] paper divided into 6 boxes)

25″ x 30.5″ (A1) self-stick easel pads

Drafting dots (or any kind of small stickers)

Problem definition and constraints (15–45 minutes)

The first step in Design Studio is to ensure that everyone is aware of the problem you are trying to solve, the assumptions you’ve declared, the users you are serving, the hypotheses you’ve generated, and the constraints within which you are working. This can be a formal presentation with slides or it can be a group discussion.

Individual idea generation (10 minutes)

You’ll be working individually in this step. Give each member of the team a six-up template, which is a sheet of paper with six empty boxes on it, as depicted in Figure 1-3. You can make one by folding a blank sheet of 11″ x 17″ paper or make a preprinted template to hand to participants. (Some teams like to hand out small individual whiteboards to each participant. These are great because they’re easy to erase and tend to make people feel relaxed.)


Figure 1-3. A blank “six-up” template

Sometimes, people find they have hard time facing a blank page. If that’s the case, try this optional step. Ask everyone to label each box on their sheets with one of your personas and the specific pain point or problem they will be addressing for that persona. Write the persona’s name and pain point at the top of each of the six boxes. You can write the same persona/pain point pair as many times as you have solutions for that problem or you can write a different persona/pain point combination for each box. Any combination works. Spend five minutes doing this.

Next, with your six-up sheets in front of you, give everyone five minutes to generate six, low-fidelity sketches of solutions (see Figure 1-4 and Figure 1-7) for each persona/problem pair on their six-up sheet. These should be visual articulations (UI sketches, workflows, diagrams, etc.) and not written words. Encourage your team by revealing the dirty secret of interaction design to level the playing field: If you can draw a circle, square, and a triangle, you can draw every interface. We’re confident everyone on your team can draw those shapes.


Figure 1-4. A wall full of completed six-up drawings

Presentation and critique (3 minutes per person)

When time is up, share and critique what you’ve done so far. Going around the table, give the participants three minutes to hold up their sketches and present them to the team (Figure 1-5). Presenters should explicitly state who they were solving a problem for (in other words, what persona) and which pain point they were addressing, and then explain the sketch. Each member of the team should provide critique and feedback to the presenter. Team members should focus their feedback on clarifying the presenter’s intentions.

Giving good feedback is an art: In general, it’s better to ask questions than to share opinions. Questions help the team talk about what they’re doing, and help individuals think through their work. Opinions, on the other hand, can stop the conversation, inhibit collaboration, and put people on the defensive. So, when you’re providing critique, try to use questions like, “How does this feature address the persona’s specific problem?” Or, “I don’t understand that part of the drawing. Can you elaborate?” Questions like these are very helpful. Comments such as, “I don’t like that concept,” provide little value and don’t give the presenter concrete ideas to use for iterating.


Figure 1-5. A team presenting and critiquing drawings during a Design Studio

Make sure that every team member presents and receives critique.

Pair up to iterate and refine (10 minutes)

Now ask everyone to pair up for the next round. (If two people at the table had similar ideas, it’s a good idea to ask them to work together.) Each pair will be working to revise their design ideas (Figure 1-6). The goal here is to pick the ideas that have the most merit and develop a more evolved, more integrated version of those ideas. Each pair will have to make some decisions about what to keep, what to change, and what to throw away. Resist the temptation here to create quick agreement by getting more general or abstract. In this step, you need to make some decisions and get more specific. Have each pair produce a single drawing on an 11″ x 17″ (A3) six-up sheet. Give each team 10 minutes for this step.

When the time is up, ask the team to go through the present-and-critique process again.


Figure 1-6. A team working together in a Design Studio exercise

Team idea generation (45 minutes)

Now that all team members have feedback on their individual ideas and people have paired up to develop ideas further, the team must converge on one idea. In this step, the team is trying to select the ideas they feel have the best chance for success. This set of ideas will serve as the basis for the next step in the Lean UX process: creating an MVP and running experiments (both covered in the next chapter).

Ask the team to use a large sheet of self-stick easel pad paper or a whiteboard to sketch the components and workflow for their idea. There will be a lot of compromise and wrangling at this stage, and to get to consensus, the team will need to prioritize and pare back features. Encourage the team to create a “parking lot” for good ideas that don’t make the cut. This will make it easier to let go of ideas. Again, it’s important to make decisions here: resist the temptation to get consensus by generalizing or deferring decisions.

(If you have split a large group into multiple teams in the Design Studio, ask each team to present their final idea to the room when they are finished for one final round of critique and feedback, and if desired, convergence.)

Using the output

Before you break, decide on next steps. You can use the designs you’ve created in this process as the basis for building MVPs, for running experiments, for production design and development—the process is very versatile. Just ensure that, having asked people to spend a lot of time contributing to the final design, you treat their contribution with respect. Decide together on next steps and then stay on top of the progress so that people keep their commitments and follow through.

To keep the output visible, post it on a design wall or another prominent place so that the team can refer back to it. Decide on what (if any) intermediate drawings people want to keep and display these alongside the final drawing, again so that team members can refer back to the ideas. Regardless of what you keep posted on the wall, it’s generally a good idea to photograph everything and keep it in an archive folder of some sort. You never know when you’ll want to go back to find something. It’s also a good idea to put a single person in charge of creating this archive. Creating some accountability will tend to ensure that the team keeps good records.


Figure 1-7. Output of a Design Studio session

Design Systems

So far in this chapter, we’ve focused on the ways that teams can design together. In practice, this usually means that teams are sketching together, either on paper or at a whiteboard. It almost never means that teams are sitting together at a workstation moving pixels around. In fact, this kind of group hovering at the pixel level is what most designers would consider their worst nightmare. (To be clear: don’t do this.)

And yet, design isn’t done when the sketch is done. It’s not completed at the whiteboard. Instead, it’s usually just getting started. So how do we get design to the pixel level? How do we get to finished visual design?

Increasingly, we’re seeing teams turn to design systems. Design systems are like style guides on steroids. They were an emerging species when we completed the first edition of this book but have now become an accepted best practice for digital product teams. Large organizations like Westpac (see Figure 1-8) and GE use them. Technology-native companies like MailChimp and Medium and Salesforce and countless others use them, too. Even the US Federal Government has released a design system. There are even entire two-day conferences dedicated to them. But, before we get into why design systems are having their moment, let’s talk about what they are.


Figure 1-8. The GEL design system website from Westpac

Design Systems: What’s in a Name?

Style guides. Pattern libraries. Brand guidelines. Asset libraries. There’s not a lot of common language in this part of the design world, so let’s take a moment to clarify our terms.

For years, large organizations created brand guidelines—comprehensive documents of brand design and usage rules for those companies. In predigital days, these guidelines were documents, sometimes a few pages, but frequently large, comprehensive bound volumes. As the world moved online, these books sometimes moved onto the Web as PDF documents, web pages, or even wikis.

At the same time, publishers and publications often maintained style guides that covered rules of writing and content presentation. College students in the United States are familiar with the comforting strictness of The Chicago Manual of Style, The MLA Style Manual and Guide to Scholarly Publishing, and others.

The computing world’s version of a style guide is exemplified by Apple’s famous Human Interface Guidelines (HIG). The HIG is a comprehensive document that explains every component in Apple’s operating system, provides rules for using the components, and contains examples that demonstrate proper use of the components.

Finally, developers are familiar with asset libraries. These collections of reusable code elements are intended to make the developer’s job easier by providing tested, reusable code that’s easy to download from an always-current code repository.

As with many ideas in the digital world, digital design systems (which we’ll call design systems for the sake of brevity) are a kind of mash up of all of these ideas. A good design system contains comprehensive documentation of the elements of a design, rules and examples that govern the use of these elements, and crucially, contains the code and other assets that actually implement the design.

In practice, a design system functions as a single source of truth for the presentation layer of a product. Teams can sketch at the whiteboard and then quickly use the elements found in the design system to assemble a prototype or production-ready frontend.

The Value of Design Systems

Design systems are a powerful enabler of Lean UX. They allow the visual and microinteraction details of a design to be developed and maintained in parallel with the other decisions a team makes. So decisions like screen structure, process flow, information hierarchy—things that can be worked out at the whiteboard—can be handled by the right group of teammates, whereas things like color, type, and spacing can be handled by another (very likely overlapping) group of folks.

This has a couple of big benefits for teams:

It allows the team to design faster, because they’re not reinventing the wheel every time they design a screen.

It allows the team to prototype faster, because frontend developers are working from a kit of parts—they don’t need to recreate the elements of a solution each time, they can just go get the appropriate pieces out of the design system.

It also has some big benefits for organizations:

Increased consistency
A good design system is easy for developers to use. So they are more likely to use parts that they find in the design system, and less likely to “roll their own.” This means a greater likelihood that their work will adhere to brand standards.
Increased quality
By centralizing the design and creation of user-facing elements, you can take advantage of the work of a few highly trained and highly specialized designers and UI developers. Their high-quality work can be implemented by other less-specialized developers in the organization to produce top-notch results.
Lower costs
A good design system is not free. It requires investment to build it and staff to maintain it. But over time, it pays for itself by providing tools and frameworks that make the users of the system—the other developers in the organization—more efficient and more productive. It allows new designers to come up to speed more quickly, for example, because it documents all of the frontend conventions used in an app. Similarly, it allows new developers to come up to speed more quickly, because the basic building blocks of their work are available in an easy-to-use framework.

Case Study: GE Design System

In 2012, GE opened GE Software in San Ramon, California. This new “Center of Excellence” (CoE) was designed to help GE improve its software game. A few years earlier, a strategic review helped the company to see just how central software had become to their business—measured in lines of code, GE was something like the 17th largest software company in the world. And yet they felt they were not treating software development with the focus it deserved.

San Ramon included a new team at GE: the GE Software User Experience Team. This small team at the heart of a giant company created their first design system in 2013 in order to scale the impact they could have. Indeed, with fewer than 50 designers to collaborate with more than 14,000 developers (inside an organization of more than 300,000 people), there was no way that this startup design team could grow quickly enough to have a meaningful effect at GE.

The team’s first design system, called IIDS, for the Industrial Internet Design System, was designed by a group of internal designers with the help of a small team from Frog Design, one of the leading design firms in the world. The team built the system on top of Bootstrap, the HTML/CSS framework created by Twitter. It proved incredibly successful. Within a few years it had been downloaded by internal developers more than 11,000 times and had been used to create hundreds of applications. It helped software teams across the company produce better looking, more consistent applications. And, perhaps just as important, it created a huge amount of visibility for the software team and the UX team at San Ramon.

With that success came some problems. To be sure, simply having a good UI kit doesn’t mean that a team can produce a well-designed product. Design systems don’t solve every design problem. And Bootstrap was showing its limits as a platform choice. It had helped the team achieve their first objectives: get something out quickly, provide broad coverage of UI elements, and create wide adoption by being easier to use than “roll-your-own” solutions. But Bootstrap was hard to maintain and update and was just too big for most needs.

In 2015, GE Software, having had great success as an internal service bureau, morphed into GE Digital, a revenue-generating business in its own right. Their first product was called Predix (Figure 1-9), a platform on top of which developers inside and outside of GE can build software for industrial applications. And with this change of strategy, the team realized they needed to rethink their design system. Whereas earlier the goal had been to provide broad coverage and broad adoption, the new design system would be driven by new needs: it needed to enable great Predix applications, which was a more focused problem than before. It needed to limit the number of UI choices rather than supporting every possible UI widget. It still needed to be easy to adopt and use—it was now intended for use by GE customers—but now it was imperative that it be easy to maintain, as well.

The design system team had by this time grown to about 15 people and included design technologists (frontend developers who are passionate about both design and code), interaction designers, graphic designers, a technical writer, and a product owner.


Figure 1-9. The GE Predix Design System

The team chose to move the design system to a new technology platform. No longer based on Bootstrap, the system has instead been created with Polymer, a JavaScript framework that allows the team to implement Web Components. Web Components has emerged in the last few years as a way to enable more mature frontend development practices.

To create the new design system, the team spent nearly six months prototyping. Significantly, the team did not work in isolation. Instead, they paired with one of the application teams, and thus were designing components to meet the needs of their users—in this case the designers and developers working on the application teams. This point is really important. Collaborative design takes many forms. Sometimes it means designing with your cross-functional team. Sometimes it means designing with your end users. In this instance, it was a hybrid: designing with a cross-functional team of designers and developers who actually are your users.


Figure 1-10. The GE Predix Design System on GitHub

Creating a Design System

As the GE story illustrates, there’s more than one way to create a design system, and the choices you and your team make should be driven by the goals you have for the work and capabilities at your disposal. GE is a company with a large enough budget to hire excellent consultants to get the effort started, and the resources to create and dedicate a team to the effort. Is that realistic for your organization? And what goals must your design system support? Is widespread adoption important? Do you need broad coverage from day one or can you build the system over time? All of these questions will drive the approach you take. With that in mind though, here are some common themes to consider as you create your own design system.

Characteristics of successful design systems and style guides

Whether you are creating a full-blown design system or a more limited style guide, consider these important characteristics:

It takes into account audience needs
Remember that the audience for your style guide is the entire product team. Designers, developers, QA people, will all rely on the design system for their work. Include them on the team that creates the system and make sure the contents of the system reflect their needs.
Continual improvement
Design systems must be considered living documents. They must be a single source of truth for your organization. As your product evolves, so too must your design system. The design system should be malleable enough to add updates easily, and you must have a clear process for making these updates.
There is clear ownership
Assign an owner to the design system. This could be a dedicated team with a product owner, an editor, or curator who works with content creators, or simply a single responsible person, but it needs to be clear who is responsible for keeping the design system up-to-date. If this becomes a burdensome responsibility, consider rotating this role on a regular basis every three months.
The system is actionable
Your design system is not just a library or museum for user interface elements. It should be a “widget factory” that can produce any interface element on demand. As each new element is added to the system, make it available for download in whatever formats your team will need. Ensure that not only the code is available but the graphical and wireframe assets, as well. This allows every designer to have a full palette of interface elements with which to create prototypes at any given time.
The system is accessible
Accessibility means that the design system is available to everyone in your organization. Accessible design systems are:

Easily found
Use a memorable URL and ensure that everyone is aware of it.
Easily distributed
Ensure that your teams can access it at their convenience (in the office, out of the office, on mobile devices, etc.).
Easy to search
A comprehensive and accurate search of the design system greatly increases its usage.
Easy to use
Treat this as you would any other design project. If it’s not usable, it will go unused very quickly.

What goes into a design system?

If it’s made of pixels, it goes into the design system. All interaction design elements should be defined and added to the design system. Use design patterns that work well in your existing product as the baseline of your design system. Form fields, labels, drop-down menus, radio button placement and behavior, Ajax and jQuery events, buttons—all of these should be included in the design system, as is illustrated in Figure 1-11, which shows the system for Salesforce.


Figure 1-11. If it’s made of pixels, it goes into the design system

Provide three data points for each interaction design element (see Figure 1-12):

What does the element look like?
Include detail about the minimum and maximum sizes of the element, vertical and horizontal constraints, and any styling demands on the element.
Where it’s usually placed on the screen
Make it clear if an element should be consistently placed in certain areas of the screen as well as any exceptions that might negate this design pattern.
When it should be used
It’s imperative that your team knows when to use a drop-down menu over a radio button and other factors that would determine the selection of one UI element in place of another.


Figure 1-12. A detail from the Westpac GEL design system

Next, include all visual design elements. Begin with the general color palette of your product. Ensure that each primary color is available with hex values along with complementary and secondary color choices. If certain elements, like buttons, for example, have different colors based on state, include this information in the description. Other elements to include here are logos, headers, footers, grid structures, and typographical choices (i.e., which fonts to use where and at what size/weight). The same attributes of what, where, and when provided for interaction design elements should also be provided here.

Finally, you need to codify copywriting styles, as well. Capture the tone of your brand, specific words you will and won’t use, grammatical choices, tolerated (and not) colloquialisms, along with button language (“OK,” “Yes,” “Go,” etc.) and other navigation language (previous/next, more/less, and so on).

Alternatives: The Wiki-Based Style Guide

Of course, not every team will have the wherewithal to create a design system. For teams that can’t justify the effort, you can still get a lot of value out of a wiki-based style guide. Here’s why:

Wikis are familiar places for developers. This means that getting your teammates in engineering to participate in this tool will not involve forcing them to learn a new tool or one that was purpose-built only for designers.

Wikis keep revision histories (good ones do anyway). This is crucial because there will be times when you might want to roll back updates to the UI. Revision histories keep you from having to recreate previous states of the style guide.

Wikis keep track of who changed what and provide commenting functionality. This is ideal for keeping a trail of what decisions were made, who made them, and what the rationale and even the discussion were for making that change. As you onboard new team members, this type of historical capture can bring them up to speed much faster, as well. In other words, wikis are your documentation.

Collaborating with Geographically Distributed Teams

Physical distance is one of the biggest challenges to strong collaboration. Some of the methods we’ve discussed in this chapter—especially Design Studio—become more difficult when a team isn’t all in the same location. But you still find ways to collaborate. Tools such as Skype, Google Hangouts, and Slack can provide teams with the means to collaborate in real time. Google Docs (including Google Draw) and purpose-built services like Mural.com allow teammates to collaborate on a document at the same time. Trello and wikis make it possible for teams to track information together. And a phone with a camera can make it easy to quickly share photos in an ad hoc way. All these tools can make cross-time-zone collaboration more effective and can help teams to feel virtually connected for long periods of time during the day.

Collaborative Design Sessions with Distributed Teams

Working on a geographically distributed team can make collaborative design more difficult. The benefits of collaboration are worth making the extra effort it takes to overcome the challenge of distance. Let’s take a look at how one team we worked with overcame a continent-wide separation and designed solutions together.

This team was spread into two groups in two cities: the product and user experience team was in New York and the development team was in Vancouver. Our goal was to run a Design Studio and affinity mapping session with the entire team.

Set up

We asked the two groups to gather in their individual conference rooms with their own laptops. Each conference room had a Mac in it with a location-specific Skype account (that is, it wasn’t a specific individual’s account—it was an “office” account). The two offices connected to each other via their office Skype accounts so that we could see each other as a group. This visual element was critical because it was the closest we could get to physically being in the same room.

We prepared a very brief (roughly 10 slides) setup presentation that explained the problem statement we were tackling. It included customer testimonials and data, and a very brief recap of our customers’ needs. The presentation also included the constraints of the solution space.

Priming the pump with affinity mapping

We kicked things off with an affinity mapping exercise. Typically, these are done by using sticky notes and a whiteboard. In this case, we used a shared Google Doc spreadsheet to conduct the exercise, as shown in Figure 1-13. We asked everyone in both offices to sign in to the shared spreadsheet. The spreadsheet itself had a column labeled for each person. Google Docs allows multiple editors to work in the same document. For this meeting, we had eight team members in the document at the same time!

We asked the team to come up with as many ideas as they could think of to solve the problem we presented. Each team member wrote one idea per cell in the column marked with that individual’s name. We gave the team five minutes to generate as many ideas as they could.

Next, to make sure everyone in each location was aware of all of the proposals, we asked the team members to read their ideas to the distributed team. Some ideas went by quickly, whereas others generated more discussion.


Figure 1-13. Using Google Sheets for an affinity mapping session with a distributed team

To simulate affinity grouping in the shared spreadsheet, one member of the team, serving as a facilitator, began a second sheet in the document using a personal laptop. The facilitator created some initial column headers in the second sheet that reflected recurring themes that emerged from discussion.

Then, we asked the team to group the ideas under the themes. Everyone moved their own ideas into the theme sheet, and people were free to add new themes if they felt their ideas didn’t fit into any of the existing themes. At the end of this process, we had created a spreadsheet filled with ideas that were sorted into themes. Some themes had just a pair of ideas; others had as many as eight.

Design Studio with remote teams

To set up for the next step, a Design Studio session, we tried to mimic a colocated version of the activity as much as possible. We provided paper and pens at each location. We created a dual-monitor setup in each conference room so that each room would be able to see the sketches on one monitor while still being able to see their teammates via Skype on the second monitor, as shown in Figure 1-14. We asked each team to use a phone to photograph their sketches and email them to everyone else. This helped connect the dialog and the artifact to the conversation.


Figure 1-14. Dual monitor setup during remote Design Studio

After that initial setup, we were able to proceed with the Design Studio process as normal. Team members were able to present their ideas to both rooms and to receive trans-continental critique. The two teams were able to refine their ideas together and were eventually able to converge on one idea to take forward.

Making Collaboration Work

Not every team will find that collaboration comes easily. Most of us begin our careers by developing our individual technical skills as designers, developers, and so on. And in many organizations, collaboration across disciplines is rare. So it’s no wonder that it can feel challenging.

One of the most powerful tools for improving collaboration is the Agile technique of the retrospective and the related practice of creating Team Working Agreements. Retrospectives are regularly scheduled meetings, usually held at the end of every sprint, in which the team takes an honest look back at the past sprint. They examine what went well, what went poorly, and what the team wants to improve. Usually, the team will select a few things to work on for the next sprint. We can think of no more powerful tool for improving collaboration than the regular practice of effective retrospectives.

A Team Working Agreement is a document that serves as a partner to the retrospective. It keeps track of how the team has chosen to work together. It’s a self-created, continuously updated rule book that the team agrees to follow. At each retrospective, the team should check in with their Working Agreement to see if they’re still following it and if they need to update it to include new agreements or remove old ones that no longer make sense.

Here’s an outline for what you should consider covering in your Team Working Agreements (we’ve made a copy of our favorite template available online at http://leanuxbook.com/links):

Process overview
What kind of process are we using? Agile? If so, what flavor? How long are our iterations?
Ceremonies
What rituals will the team observe? For example, when is stand-up each day? When do we hold planning meetings and demos?
Communication/Tools
What systems will we use to communicate and document our work? What is our project management tool? Where do we keep our assets?
Working hours
Who works where? When are folks in the office? If we’re in different locations, what accommodations will we make for time-zone differences?
Requirements and design
How do we handle requirements definition, story writing, and prioritization? When is a story ready for design? When is a design ready to be broken into stories?
Development
What practices have we settled on? Do we use pair programming? What testing style will we use? What methods will we use for source control?
Work-in-progress limits
What is our backlog and icebox size? What WIP limits exist in various stages of our process?
Deployment
What is our release cadence? How do we do story acceptance?

And, any additional agreements.

Wrapping Up

Collaborative design (Figure 1-15) is an evolution of the UX design process. In this chapter, we discussed how opening up the design process brings the entire team deeper into the project. We talked about how the low-fidelity drawings created in Design Studio sessions can help teams generate many ideas and then converge on a set that the entire team can get behind. We showed you practical techniques you can use to create shared understanding—the fundamental currency of Lean UX. Using tools like design systems, style guides, collaborative design sessions, Design Studio, and simple conversation, your team can build a shared understanding that allows them to move forward at a much faster pace than in traditional environments.


Figure 1-15. A team using collaborative design techniques

Now that we have all of our assumptions declared and our design hypotheses created, we can begin the learning process. In the next chapter, we cover the Minimum Viable Product and how to use it to plan experiments. We use those experiments to test the validity of our assumptions and decide how to move forward with our project.

1In the years since we published the first edition of this book, the Design Studio method has become increasingly popular. There are now two comprehensive guides to the method. If you want to go deeper than our coverage, see Design Sprint by Banfield, Lombardo, and Wax and Sprint by Knapp, Zeratsky, and Kowitz.

Continue reading Collaborative design fuels shared understanding—the fundamental currency of Lean UX.

Read more about this at: feedproxy.google.com

Hábitat Learning Community / Lara Hermanos


© Lorena Darquea

© Lorena Darquea

Architects: Lara Hermanos
Location: Tlaquepaque, Jalisco, México
Architect In Charge: Mauricio y Sebastián Lara
Area: 553.0 m2
Project Year: 2017
Photographs: Lorena Darquea

Industrial Design: Flor Khol, Alejandra Gutiérrez
Graphic Design: Ana Rodríguez
Interior Design: Lorena Quirarte
Architect: Paulina Olvera
Construction: Constructoras ILSSE y EDICA Construcciones
Project Management: Julio Sánchez González


© Lorena Darquea

© Lorena Darquea


Sketch

Sketch

“The school named “Habitat Learning Community”, is a “Metaproject” dedicated to childhood, with a new educational concept in Mexico inspired by the Italian philosophy of Reggio Emilia, Located in Santa Anita, Jalisco, Mexico. It is a complex environment made of contrasts, due to a multiplicity of factors. It must be conceived as a polysensory and self-learning space.


© Lorena Darquea

© Lorena Darquea

It is not the representation of a traditional school, is a representation of a diversified, stimulating and welcoming ecosystem, which facilitates the development of the child with the relationship of the context in an empathic way.


© Lorena Darquea

© Lorena Darquea

In this project we involve different disciplines of the design, we work since the generation of the name, the graphic image, communication and signage, until the architectural project, lighting, interior design, industrial design, furniture and landscape. We consider that the name of the school should involve intrinsically everything related to what the Reggio Emilia philosophy proposes, taking into account: balance, respect, coexistence, synergy, participation, collaboration and learning. In addition, the name also be a short word, easy to remember, and do not has a translation and can be pronounced in different languages.


© Lorena Darquea

© Lorena Darquea

Habitat Learning Community, is a transformable, ductile space, capable of allowing different ways to live it and use it in the course of the day or with the passage of the time. But it is also personalized, sweet, available to receive footprint. The child is the protagonist and the space helps him to his self-learning.


© Lorena Darquea

© Lorena Darquea

The design is comfortable and safe with the ability of having a relationship with the interior and exterior, where users can enjoy harmony, balance and interaction, with the objective of giving to the child and adult a stimulating wealth for the formation of the processes of knowledge, education and identity.”


Scheme

Scheme

Read more about this at: feedproxy.google.com

How to Create Your Own Custom Stationery in InDesign

Custom Stationery in InDesign Tutorial

Learn how to make a customized stationery set in Adobe InDesign with this letterhead and business card template tutorial. Give your business communication a sleek and unique look.

This letterhead and business card template make it quick and simple to create custom stationery in InDesign. With a stylish look that’s easily customizable, this is the perfect how-to for a start-up or small business looking to create original stationery. You can easily adapt the design, including fonts and color scheme, to create a completely unique look.

Suitable for beginners to InDesign, this is a great introduction to creating artwork for print in InDesign.

What You Need to Create a Stationery Set

We’re going to create the template artwork in Adobe InDesign. If you’d like to add optional patterns to your artwork you’ll also need access to vector software like Adobe Illustrator or CorelDRAW.

The font used in this design is Picadilly. Check out more business font options.

Below is a selection of patterns you could use to add a decorative look to your letterhead:

Triangles pattern
Line pattern
Memphis Style pattern

1. How to Set Up Your InDesign Document

Step 1

Open up InDesign and go to File > New > Document.

From the Print options choose US Letter (8.5 by 11 in).Set the Margins to 0.5 in and add a Bleed of 0.25 in.

Set up InDesign document

Step 2

Expand the Layers panel (Window > Layers) and double-click on Layer 1 to rename it Background. Then create three more new layers — Pattern, Color and finally Type.

Lock all the layers except Background, which we’ll work on first.

Create layers in InDesign

Step 3

Expand the Swatches panel (Window > Color > Swatches) and choose New Color Swatch from the panel’s drop-down menu.

Set the levels to C=7 M=0 Y=88 K=0, click Add and Done.

Repeat the process to create five more new CMYK swatches:

C=0 M=45 Y=31 K=0
C=90 M=54 Y=10 K=1
C=56 M=28 Y=57 K=11
C=0 M=83 Y=85 K=0
C=4 M=9 Y=17 K=0

Create swatches in InDesign

2. How to Create a Letterhead in InDesign

Step 1

Working on the Background layer, use the Rectangle Tool (M) to create a shape across the whole page, extending the edges up to the bleed.

From the Swatches panel set the Fill to one of the new swatches. Here I’ve gone for C=0 M=45 Y=31 K=0.

Add fill color to background layer from one of the swatches

Step 2

Lock the Background layer and unlock the Color layer.

Use the Pen Tool (P) to create a rectangle shape around the whole page, adding corners on the top-left, bottom-left and bottom-right. At the top-right corner, click across diagonally to create a triangular cut-out.

Set the Fill to the neutral swatch, C=4 M=9 Y=17 K=0.

Use the pen tool to create a rectangular shape on the Color layer

Step 3

Lock the Color layer and unlock the top layer, Type.

Switch to the Type Tool (T) and drag onto the top-left of the page to create a large text frame. Type in the name of the business, and from either the top Controls panel or the Character and Paragraph panels (Window > Type & Tables > Character / Paragraph) set the Font to Picadilly Bold, Size 44 pt and increase the Tracking to 110.

From the Swatches panel set the Font Color to match the swatch of the shape sitting on the Background layer.

Add text using the type tool on the type layer

Step 4

Use the Type Tool (T) to create text frames above and below the main heading, listing the address and contact details of the business. Set the Font to Picadilly, and the text in the bottom frame to Align Right. Set the Font Color to match the heading.

Add additional text for location and contact info

Step 5

Create a large text frame across the main body of the page. Set the Font to Picadilly Regular, Size 10 pt and Leading to 20.

Here you can type up the text of your letter, or insert filler text for now (Type > Fill with Placeholder Text).

You can add a signature (using the Rectangle Frame Tool, and File > Place, choosing a transparent-background PNG or EPS image), and optional contact details for the sender of the letter.

Add body text for letter contents

Step 6

If you want to add a more decorative touch to your letter, you can insert a pattern onto the Pattern layer, using the Rectangle Frame Tool (F) to create an image frame over the top-right corner of the page.

Here I’ve used this triangle pattern and removed the colored background of the image in Illustrator before placing it into InDesign.

Add a pattern for more character

Step 7

To create another letterhead with a different color option, expand the Pages panel (Window > Pages) and Right-Click > Duplicate Spread onto the Page 1 icon.

Duplicate spread

Working on Page 2, edit the Fill Color of the shape on the Background layer, and the Font Color of the headings on the Type layer, to match.

You can also drop in an optional different pattern (like this one) onto the Pattern layer.

On Duplicate page use new colors and patterns

3. How to Create a Business Card in InDesign

Step 1

In the Pages panel, click on the Create New Page button. Working on Page 3, select the Page Tool (Shift+P) and click onto the page to select it. From the top Controls panel, type in a new Width of 3.5 in and a new Height of 2 in.

Business card page setup in InDesign

With the page still selected go to Layout > Margins and Columns. Reduce the Margins to 0.125 in and click OK.

Set margins for business card in InDesign

Step 2

Working on the Background layer use the Rectangle Tool (M) to create a shape across the page, setting the Fill to one of your swatches, here C=0 M=83 Y=85 K=0.

Add a background fill using the rectangle tool

Step 3

On the Type layer, Copy and Paste the main heading down from the letterhead onto your business card, and resize it using the Free Transform Tool (E) until it suits the scale of the page.

Add text using the type tool

Step 4

On Page 3 in the Pages panel, Right-Click > Duplicate Spread. This will be the reverse side of your business card.

To begin with, switch the Fill Color of the shape on the Background layer to a contrasting swatch, such as C=90 M=54 Y=10 K=1.

Duplicate spread to create reverse side of business card

Add text frames on the Type layer, listing the contact details of the business and individual. Set the Font to Picadilly Regular.

Add text to business card

Step 5

To create another color option for the business card, go to the Pages panel, click to select both pages of the business card and Right-Click > Duplicate Spreads.

Adjust the background color and Font Color on the front of the card.

Create another color option for business card

Do the same for the reverse of the card too.

Second business card option

4. How to Export Your InDesign Documents for Printing

If you have access to an edge-to-edge printer at home or in your office, you can print your letterheads by simply going to File > Print. However, you’ll probably want to have your business cards printed professionally, and perhaps your letterheads too. To do this, follow the steps below.

Step 1

Go to File > Export and name your file ‘Letterhead_for print’. Choose Adobe PDF (Print) from the Save as type menu at the bottom. Click Save.

Step 2

In the Export to Adobe PDF window that opens choose [Press Quality] from the Preset menu at the top. Make sure to set the page range to only the pages with your letterhead(s) on them, here 1-2.

Click on Marks and Bleeds in the window’s left-hand menu. Check All Printer’s Marks and Use Document Bleed Settings, before hitting Export.

Print settings for letterhead and business card

Repeat the process for the pages of your business card(s). You’ll end up with two press-ready PDF files you can send straight off to the printers. Great job!

Final letterhead design

Final business card design

Your Finished Stationery Set

Now that you’ve created your stationery set, you can use this as a template for creating more cool letterheads and business cards. Make sure to File > Save your InDesign file, so you can come back to it later.

Why not try switching up the font or trying a different pattern to make the design more unique?

How to Create Your Own Custom Stationery in InDesign – Stationery Set Flat Lay

Want more InDesign tutorials? Check these out.

How to Create a Trifold Brochure in Adobe InDesign
Paper Cut-Out Tutorial: Give Your Typography a Digital Craft Look
InDesign Secrets: 10 Hidden Features and Little-Known Design Tips
Tutorial: Create a Modern Poster with a Neon-Pastel Gradient
Tutorial: Create a 3D Typographic Poster in InDesign and Photoshop

Terrazzo background used in image above by Ikunl

The post How to Create Your Own Custom Stationery in InDesign appeared first on The Shutterstock Blog.

Read more about this at: shutterstock.com

Top 6 Wireframe Tools You Need to Know in 2018

woman looking at wireframe software on computer

Whether you’re building a PWA (Progressive Web App), an SPA (Single Page Application), or a native mobile app, wireframing plays a pivotal role in software design. The humble wireframe serves as the perfect communication tool through which designers, developers, project managers, and marketing professionals are able to kick-start the ideation process.

Here’s a quick look at the top six wireframe tools you need to know in 2018.

Balsamiq

[Image via.]

Balsamiq bills itself as a rapid wireframing tool that captures the magic of brainstorming ideas on a whiteboard and brings it to the computer. The platform’s sketch-style aesthetics ensure everyone stays focused on content and interaction, removing distractions such as color, details, and other minutiae that can be tackled at a later date.

Sketch

For those who prefer the flexibility and power of a full-featured vector graphics editor, Sketch is perfect for whipping up responsive wireframes. Wireframing with an image editor is the digital analogue of working with pencil and paper. For the uninitiated, vector-based design tools give you the image editing capability of a powerful tool such as Photoshop but without the hassle of having to worry about screen densities and resolutions. Sketch is easily one of the most popular drawing tools out there among designers who work with Macs.

Lucidchart

Lucidchart is a popular general-purpose diagramming software that lets you build flowcharts, mind maps, wireframes, and other organizational charts with a simple drag-and-drop UI. The platform also doubles as a collaboration tool, supporting commenting, in-editor chat, and video chat.

UXPin

UXPin is a comprehensive UX design platform and collaboration tool that helps designers work alongside project managers and developers through every step of the product design process. UXPin makes the flow from low-fidelity wireframes to high-fidelity mockups to developer handoff as seamless as possible. Integrations with project management tools such as Slack and Jira, as well as with other design tools such as Photoshop and Sketch, make it easy to incorporate UXPin into your product design team’s workflow.

Visio

[Image via.]

Microsoft Visio pioneered the world of drag-and-drop diagramming tools. From flowcharts to floor plans to wireframes, Visio boasts an impressive library of premade shapes, connectors, and symbols. The platform also supports real-time collaboration, commenting, and the ability to view drawings on the web. As part of the Office 365 suite, Visio’s a natural fit for any teams working with a Microsoft-heavy technology stack in their workflow.

 

Gliffy

Gliffy is a cloud-based HTML5 app that sports all the bells and whistles one expects from a professional diagramming/collaboration tool. What sets Gliffy apart from the competition is its close history with Atlassian, starting out as a standalone app in 2005 and adding a Confluence plugin in 2006 and a Jira plugin in 2009. Today it integrates seamlessly with the Atlassian and Google product lines.

Choose the right wireframing tool for your needs

This list barely scratched the surface of wireframing tools out there. Noteworthy absentees include Proto.io, InVision, Marvel, and Framer. For this list, I wanted to give a good spread of the different types of tools that can be used to create wireframes. Check out our Hiring Headquarters for more tools and tips that can improve your product design workflow.

Read more about this at: feedproxy.google.com

4 Principles of Designing with Indigenous Communities


Squamish Lil’Wat Cultural Center - First Nations Lil’Wat Nation and Squamish Nation, British Columbia - Alfred Waugh, MRAIC (Architect in Charge), Formline Architecture, Wanda Dalla Costa and Adam Slawinski. Image © Formline Architecture

Squamish Lil’Wat Cultural Center – First Nations Lil’Wat Nation and Squamish Nation, British Columbia – Alfred Waugh, MRAIC (Architect in Charge), Formline Architecture, Wanda Dalla Costa and Adam Slawinski. Image © Formline Architecture

Indigenous co-design—a more specific form of the general concept of co-design in which an architect collaborates with a stakeholder community—is a collaborative design process between architects and the Indigenous community as the client. The Royal Architectural Institute of Canada (RAIC) recently released a unique resource aimed at designers, clients, funders and policymakers looking for a guide in Indigenous co-design.

Four Case Studies Exemplifying Best Practices in Architectural Co-design and Building with First Nations builds on the success of the RAIC International Indigenous Architecture and Design Symposium held in May 2017. The four case studies set out to explore best practices in Indigenous co-design in the context of three First Nations and one Inuit community in Canada, with one case study selected from each of the four asset classes: “schools, community and cultural centers, administration and business centers, and housing.”

Each case study is anchored in the Indigenous peoples’ connection with the natural world and reflects who they are as people—their “traditions, culture, values and lifestyles, and their aspirations.” Interviews were conducted with architects and designers, Indigenous chiefs, community leaders, government employees, contractors and construction company officials, academics and government funders asking questions related to the collaborative experience in architectural co-design. Out of this case study research, done by Ottowa consultant Louise Atkins, come the most important aspects of co-design. The report offers four best practice principles, which we at ArchDaily have boiled down to “4 ‘I’s of Indigenous co-design.”

1. Initiation


Nunavik Pilot Duplex Houses - Quaqtaq Inuit Community, Nunavik, Quebec - Alain Fournier, FIRAC, EVOQ Architecture, Montreal, Quebec. Image © EVOQ Architecture

Nunavik Pilot Duplex Houses – Quaqtaq Inuit Community, Nunavik, Quebec – Alain Fournier, FIRAC, EVOQ Architecture, Montreal, Quebec. Image © EVOQ Architecture

Just as each Indigenous culture has its own customs and traditions, the initiation of each case study project was also different. Ranging from a smaller-scale renovation project to a substantial cultural center, each project met a specific need in its respective society. This characteristic is not specifically different from traditional architectural practice, but it is particularly important when it comes to co-design due to the unique community relationship.

For example, the parties involved in the Squamish Lil’Wat Cultural Center started with a vision for a tourism hub, celebrating the heritage of the two First Nations. After a period of bi-partisan leadership, the partners used the 2002 bid for the 2010 Winter Olympics as a catalyst to create an agreement for a joint Squamish and Lil’Wat cultural center. After Vancouver won the bid in 2003, the financial backing afforded the First Nations the opportunity to push the project forward.


Quilakwa Center - First Nation Splatsin te Secwepemc, British Columbia - Norman Goddard, Principal, Norman Goddard Architecture Ltd. & Civic Design; Kevin Halchuk, President, KH Designs; Peter Sperlich, Owner, Canadian Pride Log and Timber Products and Sperlich Construction Inc., and Graham Go, Project Manager. Image © Sperlich Log Construction Inc

Quilakwa Center – First Nation Splatsin te Secwepemc, British Columbia – Norman Goddard, Principal, Norman Goddard Architecture Ltd. & Civic Design; Kevin Halchuk, President, KH Designs; Peter Sperlich, Owner, Canadian Pride Log and Timber Products and Sperlich Construction Inc., and Graham Go, Project Manager. Image © Sperlich Log Construction Inc

Compare the Cultural Center case study to that of the Quilakwa Centre—a renovation of a burned-down convenience store that turned into a tribal administrative hub and artisan shop—and you can begin to see the importance of the expression of culture from the very beginning of the project, no matter the scale. As explained in the report, this ultimately gives “agency back to Indigenous people and promoting their aspirations.”


Emily C. General Elementary Schools - Six Nations of the Grand River, Ontario - Brian Porter, MMMC Architects, Brantford, Ontario. Image © www.mmmc.on.ca

Emily C. General Elementary Schools – Six Nations of the Grand River, Ontario – Brian Porter, MMMC Architects, Brantford, Ontario. Image © www.mmmc.on.ca

2. Identity


IL Thomas Elementary School - Six Nations of the Grand River, Ontario - Brian Porter, MMMC Architects, Brantford, Ontario. Image © Two Row Architect

IL Thomas Elementary School – Six Nations of the Grand River, Ontario – Brian Porter, MMMC Architects, Brantford, Ontario. Image © Two Row Architect

Each situation presents its own unique set of challenges, as well as a unique community identity. In every case example, the buildings were anchored to their natural surroundings, integrating traditional materials. Each project maximized energy conservation through designs that utilized natural heating, cooling and air circulation systems alongside conventional mechanical systems. For all four projects, Indigenous respondents underlined the importance of architects who “listen well to the community vision and engage in ongoing dialogue.”

In Nunavik, traditional ways of life are important to the cultural identity and well-being. The overriding theme for the Inuit housing project was that sustainable housing design would go beyond technical issues of safety, energy and environmental considerations to embrace and emphasize “cultural responsiveness and empowerment.” Overall, the success of the project relies heavily on the ability of all parties involved to convey the culture and values of the Indigenous people effectively as well as to incorporate innovative design elements.

3. Involvement


Quilakwa Center - First Nation Splatsin te Secwepemc, British Columbia - Norman Goddard, Principal, Norman Goddard Architecture Ltd. & Civic Design; Kevin Halchuk, President, KH Designs; Peter Sperlich, Owner, Canadian Pride Log and Timber Products and Sperlich Construction Inc., and Graham Go, Project Manager. Image © Sperlich Log Construction Inc

Quilakwa Center – First Nation Splatsin te Secwepemc, British Columbia – Norman Goddard, Principal, Norman Goddard Architecture Ltd. & Civic Design; Kevin Halchuk, President, KH Designs; Peter Sperlich, Owner, Canadian Pride Log and Timber Products and Sperlich Construction Inc., and Graham Go, Project Manager. Image © Sperlich Log Construction Inc

Each community took a hands-on approach to the building process, as each building was built through large community contributions. According to the report, “project management and the majority of the construction was done by Indigenous-owned entities employing local Indigenous tradespeople.” This exemplifies best practices in “employment, skills development, pride in the work and a sense of community ownership” as they relate to architectural co-design.

4. Impact


IL Thomas Elementary School - Six Nations of the Grand River, Ontario - Brian Porter, MMMC Architects, Brantford, Ontario. Image © www.mmmc.on.ca

IL Thomas Elementary School – Six Nations of the Grand River, Ontario – Brian Porter, MMMC Architects, Brantford, Ontario. Image © www.mmmc.on.ca

The end result is perhaps the most important aspect of this type of design. Creating buildings that resonate with the community and will be of lasting value encapsulates all of the other best practices previously mentioned. The collaborative process is shown in the finished buildings in how the project not only recognizes the community identity and involvement, but also contributes to carrying on that identity through the design.


Emily C. General Elementary Schools - Six Nations of the Grand River, Ontario - Brian Porter, MMMC Architects, Brantford, Ontario. Image © www.mmmc.on.ca

Emily C. General Elementary Schools – Six Nations of the Grand River, Ontario – Brian Porter, MMMC Architects, Brantford, Ontario. Image © www.mmmc.on.ca

You can see more about the report from the RAIC at their website here.

News via: RAIC

Read more about this at: feedproxy.google.com

Uber EMEA Headquarters / Assembly Design Studio + Cannon Design


© Jasper Sanidad

© Jasper Sanidad

Architects: Assembly Design Studio, Cannon Design
Location: Amsterdam, The Netherlands
Architect Of Record: Tetris Design and Build
Design Team: Liz Guerrero, Denise Cherry, Michelle Richter, Megan Sveiven, David Hunter, Courtney DeWalt, Jeorge Jordan, Sarah Dziuba, Colleen Masusako, Dion Dekker
Area: 8300.0 m2
Project Year: 2017
Photographs: Jasper Sanidad

Project Management: JLL
General Contractor: Tetris Design and Build
Mep Consultant: Smits van Burgst
Structural Engineer: Zonnefeld Ingenieurs
Lighting Consultant: Smits van Burgst
Millwork: Harmeling Interieurconcepten
Consultant: Hospitality Group
Leed Consultant: BREEAM Consultant/ DGMR
Graphic Design: Assembly Design Studio
Furniture Dealer: Ahrend
Sub Contractor: InZee
Av Consultant: System Video
Stair Sub Contractor: AllStairs Graphic


© Jasper Sanidad

© Jasper Sanidad

Text description provided by the architects. With services offered in more than 65 countries and over 450 cities worldwide, Uber is one of the tech industry’s fastest global expansions. The key to Uber’s rapid globalization was to “think local to expand global”. In 2017, Uber moved and expanded their EMEA headquarters in Amsterdam to establish a global presence, connect people and cultures, and understand the ever-evolving markets around them.


© Jasper Sanidad

© Jasper Sanidad

As design lead on the project, Assembly Design Studio worked with Uber to create an international office in Amsterdam that celebrates and embraces the diversity and culture of their global community. While still incorporating Uber’s core values of grounded, populist, inspiring, highly evolved, and elevated, the EMEA headquarters reflects the pulse and influences of Amsterdam while highlighting different regions of Europe, Africa, and the Middle East. What emerged was a fusion of colors, materials, and patterns that perfectly expresses the notion of bringing people together.


© Jasper Sanidad

© Jasper Sanidad

The space is built around the concept of activity-based working. There are no assigned seats, instead employees are placed within team-based neighborhoods. Each neighborhood is multi-functional and akin to a small office. There is an opportunity to personalize, an opportunity to come together in a comfortable setting, and an opportunity to meet formally all within the open environment. Featured in every neighborhood is at least one “mantle,” a simple but warm way to allow each team to collectively personalize their space.


© Jasper Sanidad

© Jasper Sanidad

Woven throughout the space is a complex network of places to meet and work. Every style of collaboration is represented from casual lounge spaces to tucked away hubs overlooking the canals, from an espresso bar to a restaurant. The diversity of space doesn’t end with collaboration and meeting spaces. The designers sought to incorporate how each person transitions and works throughout the day, by creating different experiences and alternative types of postures while working from standing work top tables to semi-private nooks to walking paths.


© Jasper Sanidad

© Jasper Sanidad

Visible throughout the atrium is a central staircase that acts as a connective spine between all four floors. The green, concentric rings, inspired by Amsterdam’s canals, spiral upward and become a central gathering point at each floor landing. Clean lines, timeless materials, and local products are core to the Dutch design and bridges the surrounding neighborhoods and regions together.


© Jasper Sanidad

© Jasper Sanidad

The EMEA regions are expressed on each floor by richly, colored hues that also serve as a wayfinding guide. The palette for each was determined by the natural colors of its region – bright, rich blues of the Mediterranean; warm, inviting yellows of the Middle East; lush, vibrant greens of Western Europe. Every wall is moment of inspiration and is as rich as the backgrounds and diversity of the people who work here.


Floor Plan

Floor Plan

Uber wanted to establish a sense of community throughout their workspace by placing a restaurant on the ground floor, putting it front and center. The layout is open with a variety of seating arrangements, and the materials are reminiscent of the cobblestones and bricks lining the portals and retail shops along the streets of Amsterdam. “We wanted to make this space feel comfortable, where employees could come together. Uber’s culture at their EMEA headquarters is welcoming and has become a true melting pot. The teams see real value in taking a pause from their workday to come together over a meal, and we wanted to create a place to continue that tradition in their new space” says Liz Guerrero, Principal of Assembly.


© Jasper Sanidad

© Jasper Sanidad

Uber EMEA’s multi-cultural design story creates a crisp, fresh natural environment that allows every individual from any region feel represented, comfortable, and welcomed. Based around an activity-based work environment with choice of meeting spaces, both formal and informal, tucked away nooks, espresso bar and restaurant, lounge areas, adaptable work postures—the modern, local work environment is transformed within a global context.


© Jasper Sanidad

© Jasper Sanidad

Read more about this at: feedproxy.google.com

Zhengzhou Twin Towers / gmp Architects


© ZMG China

© ZMG China

Architects: gmp Architects
Location: Zhengzhou, Henan, China
Design: Meinhard von Gerkan, Stephan Schütz, Nicolas Pomränke
Competition Project Management: Niklas Veelken
Competition Design Team: Jan Deml, Amelie Neusen, Michael Reiss, Susan Schwarz, Sabine Stage, Jochen Sültrup, Thilo Zehme, Bin Zhou
Detail Design Project Management: Niklas Veelken, Jens Weiler
Detail Design Team: Markus Busch, Ping Cao, Lan Chen, Yue Chen, Andrew Davis, Jan Deml, Christian Dorndorf, Johannes Erdmann, Kuno von Häfen, Boyan Kolchakov, Lin Lin, Fernando Nassare, Kristin Schoyerer, Elsa Tang, Thilo Zehme, Zhou Bin
Partner Practice In China: TJADRI Group, Co., Ltd., Shanghai
Area: 746000.0 m2
Project Year: 2018
Photographs: ZMG China, Jianghe Zeng

Project Management China: Ling Li
Structural Design: schlaich bergermann partner GmbH, Stuttgart
Facade Consultants: MAE, Meiss Architecture & Engineering Office
Landscape Design: WES und Partner, Berlin
Lighting Design: conceptlicht GmbH, Traunreut
Elevator Consultants: Parsons Brinckerhoff Engineering Technology Co. Ltd., Peking
Client: Zhongyuan Real Estate Business Department of Shanghai Greenland Group


View from railway station. Image © Jianghe Zeng

View from railway station. Image © Jianghe Zeng

Text description provided by the architects. Zhengzhou, the capital of Henan Province, is experiencing ongoing growth. According to current estimates, the metropolis on the Yellow River will have over 11 million inhabitants by 2020. In order to prepare for this development, a new railway station has been built in recent years to the east of the city to create a central traffic interchange.


View from the west. Image © Jianghe Zeng

View from the west. Image © Jianghe Zeng


Site Plan

Site Plan

The new buildings by gmp close off an urban design axis to the west, an axis that leads from the new railway station towards the city center. Like an entrance door to the city, the high-rise buildings form a vertical counterpoise to the horizontal building of the railway station. A plaza between the towers forms a linking element. Owing to their height of 284 meters, the twin towers are significantly higher than the other high-rise buildings in the vicinity and, as identity-creating buildings in the skyline of Zhengzhou, are visible from afar.


Sky Lobby. Image © Jianghe Zeng

Sky Lobby. Image © Jianghe Zeng

The 63 stories of the Greenland Towers accommodate mostly offices. One tower comprises about 232,000 square meters—a comparatively large area for a high-rise building of this height, which is due to the very large area per floor of 4,000 square meters. This makes it possible to flexibly divide the floor area of each floor into up to 15 units.


View of facade. Image © Jianghe Zeng

View of facade. Image © Jianghe Zeng

At their base, both towers have to their side L-shaped plinth buildings that accommodate commercial functions. By separating the towers from the plinth buildings, there is unrestricted access to the lobbies of the towers from all sides. Almost 12,000 people cross the foyer of each tower every day on their way to the upper floors.


Swimming pool in the spa. Image © Jianghe Zeng

Swimming pool in the spa. Image © Jianghe Zeng

In plan, the layout of the towers has been arranged offset in windmill fashion around the square core of the building. All offices benefit from natural ventilation via concealed openings in the facade profiles. With the sky lobbies on every eighth floor, the office towers have prestigious areas in the vertical that can be used in many different ways by the local companies. An unusual feature in a high-rise building of this size is that the employees are given the opportunity to use an outside terrace at high level and, from here, to enjoy the view across the cityscape of Zhengzhou.


Foyer. Image © Jianghe Zeng

Foyer. Image © Jianghe Zeng

The top stories of the Greenland Towers accommodate the eight-story Sky Atrium, which is reserved for exclusive functions: the co-called “Sky Commerce” with restaurants, shops, and a spa extends across three floors next to the atrium. Luxurious offices in the north tower and exclusive club facilities and apartments in the south tower make up the uppermost floors of the towers. With the Sky Atrium, an attractive public venue has been created for art exhibitions and concerts, thus enriching vertical urban life in China with a new attraction at a height of 240 meters.


Staircase in „Sky Atrium“ . Image © Jianghe Zeng

Staircase in „Sky Atrium“ . Image © Jianghe Zeng


Illumination by night. Image © Jianghe Zeng

Illumination by night. Image © Jianghe Zeng

Read more about this at: feedproxy.google.com