Brad Frost: The way TechCrunch responds to design

Brad Frost used responsive design technology in 2013 to redesign TechCrunch, a well-known tech-startup website, to accommodate multiple screen sizes.Mobile reading,

This project allows the development team to review the new web design process.

(Note: the original article is published on the technology entrepreneurship microportal: ternet (Techbrood.com ))

Set Expectations)

Many of the reasons why Post-PSD Era design processes are ineffective are that at the beginning of the project, they were unable to set reasonable project expectations with customers and colleagues.

We have done our best to let the customer understand the real challenges faced by the web page (let's look at the following figure for the customer ),

So because our website needs to be mobile (Fluid), our design process should also match.

We help you understand that development is an important part of the design process. In the months before the start of the Techcrunch project, I Was Thinking deeply about what is the ultimate Atomic Design ),

I have even started to build a powerful mode library to assemble pages in combination with the interface mode. This tool eventually forms the Pattern Lab project,

I introduced the atomic design to all the project team and demonstrated the Pattern Lab. We discussed the benefits of creating a design system compared to a page template that is temporarily collected. It seems that everyone has accepted it and has not gritted my opinion.

Kickoff and Planning)

We started this project in Techcrunch's office, where we talked to the Stakeholders (Stakeholders), conducted a 20-second intuition test, and design studio exercises, this allows you to reach consensus. You can learn more about these exercises, because we have repeated these effective exercises in the Entertainment Weekly project. I also use these exercises in the current pitt0000gh Food Bank website refactoring.

Sketch)

1. Establish a full-Site Information Structure Model

Jennifer (Information architect) extracts shared information structures from the perspective of the entire website, such as "rivers" and "islands". river is an information list such as news reports, islands is recommended.

The advantage of setting up this information mode is that I can immediately establish the organization (Organisms) in the corresponding Atomic Design System in Pattern Lab ), based on Jennifer's gray background block sketch, I will soon use one. the fpo class builds an HTML prototype. Once the HTML prototype is created, the subsequent modifications to the wireframes are as simple as copying and pasting an include.

In addition to converting Jennifer's sketch into the FPO block in Pattern Lab, I was able to immediately start writing a series of atomic and organizational elements (organisms: text elements (bold, highlighted, block references, highlight references, etc.), image types (logo, article images, portraits, etc.), forms (search, subscription, submitted content, contact forms, etc.), ad space elements and more.

 

2. Establish the Visual Direction (Establishing Visual Direction)

At the same time, Dan (visual designer) began to build a visual direction, because Techcrunch's main function is to provide users to read information, Dan believes that the user's first visual experience will be a font Type ). Therefore, use the Typecast Tool.

 

Rolling Up Our Sleeves)

Once we have specific feelings about the information architecture, visual effects, and HTML scaffolding prototype, we can start to fully design and develop the entire website.

1. first, Jennifer built an HTML line diagram for all the use cases, and I developed a template for each page based on the line diagram (at the beginning, it was just an atomic set of these elements, add a style later );

2. Then Dan performs Element Collages. The Element collage is more specific than Style Tile at http://styletil.es/and it is still not a comprehensive design object. The following is an example of how to adapt the interface in various screen sizes:

 

Here, it is good that Dan does not need to worry that users will be distracted like the whole page design, so that he can focus on feedback on headers such as pages, once the customer is satisfied with the Header design, I can begin to follow that visual direction and add styles. I actually started with Header and Footer.

It may seem a bit strange now. From the customer's point of view, some pages have been changed from the line diagram to the final design, while some are still in the gray block, however, as we maintain positive communication with our customers and they understand and actually participate in the entire process, we can get the correct feedback.

 

3. Complete design object (comps)

Believe it or not, we finally generate a complete design diagram for some pages. Bad! Hateful!

However, unlike previous projects, we did not follow the complete design drawing. In fact, comps is the result of the entire process. When Dan finally made part of comps, we have built most website atoms and organizations, and have a deep understanding of the system status of our design.

We submit comps to the customer, and the customer gives feedback. At this time, I can directly modify the comps on HTML, so we do not rely on the complete design drawing (comps ).

In this way, we create visual effects for the web organization (Organisms) and provide the design draft where the complete drawings are required. I will also add appropriate styles for each organism, slowly but precisely implement all the remaining gray blocks.

In this process, some HTML looks ineffective. I will communicate with Dan directly through the HTML page and make small adjustments and modifications. In the end, we realized that some Photoshop documents are unnecessary for customers. In fact, these documents help us to complete some details.

After all the page templates are available, we have tested cross-browser, cross-device, and all use cases (some core functions have been tested during the development process ), finally, it was submitted to the 10up team for implementation on the Wordpress background. A good thing is that we have not only submitted some page templates, but also built a reliable design system that can be reused and feature evolution of subsequent versions.

 

What we Learned (Lessons Learned)

1. it's neither Agile nor Waterfall. I don't know what to call our entire process. I only know that we actively communicate and collaborate (remotely ), always be sincere to the customer and be conscientious to the work of the customer.

2. Work in parallel)

When possible, work in parallel. Break down things and make overall planning.

3. Slow but quality assurance (Slowly build fidelity)

Feeling like in sculpture, first take a small piece of stone, experience the material and cultivate the feeling, then shape the head, shoulders, body, feet... until the completion.

Unlike sculpture, We have Ctrl + Z (Cmd + Z ):)

By iefreer