Mobile design school: the process of completing a test task. Yandex has opened a free online course for the School of Design Teamwork

Yandex, as a market leader, regularly holds educational events on professional topics. At the beginning of this year they launched the “Yandex Design School” project on Youtube. In video format, experts from Yandex talk about the principles and features of web design, analyze various examples and provide valuable theoretical materials.

Description of the first series of videos on design:

Video course for those who want to develop in the field of product design.
To successfully pass, you need basic experience in interface design or related fields, confident command of graphical tools, and the ability to design interactions with the interface to suit the task at hand. In addition, it is important to know the basics of HTML, CSS and JavaScript for learning.

The Yandex Design School video course classes are structured in such a way that students go through the entire process of working on a product: from idea to launch.

The program consists of four sections:
– Design in a large company
– Prototyping
– Product Design
– Teamwork

Playlist

Mobile Design School 2016 recently started.

Video course for interface designers who want to gain additional knowledge and skills in creating mobile products with a large audience. Based on lectures at the School of Mobile Design, held as part of the Mobilization project. The program includes lectures on the features of mobile product design, prototyping and animation, as well as teamwork. Videos are published every Tuesday from October 18 to December 13, 2016.

I highly recommend it to anyone interested in design.

In the summer of 2015 the first Yandex Design School. Video materials filmed over the summer formed the basis of a distance learning course. Taras Sharov, co-author of the school, made an introductory video in which he briefly explains:

1. Who is the School of Design intended for?
2. What is our school about?
3. How to correctly perceive school materials?
4. How to complete the training?
5. Where to start?

1. WHO IS THE SCHOOL OF DESIGN FOR?

The school is not designed for beginners in design.

2. WHAT IS OUR SCHOOL ABOUT?

The training is divided into 4 blocks:
1. Design in a large company.
2. Prototyping.
3. Product design.
4. Teamwork.
And also your personal project (practice).

3. HOW TO CORRECTLY PERCEIVE SCHOOL MATERIALS?

Put aside criticism for a while and be open to everything new. Try to study in more detail the topics that will be discussed in the school materials.

4. HOW TO GET TRAINED?

1. Get ready to work.
2. Choose a brand and imagine yourself as a designer working for that brand.
3. Come up with a product idea that will complement the brand's product line. It should be a small product - no more complicated than Instagram.
4. Work on the Russian version of the product.
5. During the first and second sections of our school, act based on your intuition. Starting from the third section, follow our recommendations.

5. WHERE TO START?

If you are not familiar with HTML, CSS and JavaScript, then you should start with the basic courses on Codeacademy. Also, before the start, we recommend warming up your brains with a few tips from Gorbunov’s Bureau.

School of Design, launched in the summer of 2015 - course students will be able to sequentially go through all sections of the School, listening to lectures by Yandex employees and simultaneously working on their own projects. Video lectures will be published sequentially, every week on Tuesdays. The course lasts 10 weeks and ends on April 5th.

The editors of the site learned from the creators of the School details about the new video course and its work.

Tell us about the results of the School of Design. Are you happy with the results?

Lola Kristallinskaya, organizer of the School of Design, deputy head of the Yandex design department: In the summer of 2015, we held the School of Design for the first time. For the large team of Yandex designers - by the way, there are already about 140 designers in our company - this was an important event for which we were seriously preparing.

We argued heatedly about the program and format of training: “What is design in a big company? What should a product designer know? How should he work with the team?” Beginning designers have a lot of questions, and it was necessary to understand how to gather seemingly scattered knowledge into a coherent story and fit it into a 2.5-month intensive course.

As a result, the program included not only practical blocks, such as prototyping, but also about teamwork, the benefits of related professions, and others. The order of the sections was not chosen by chance - according to our plan, the School student gradually develops practical skills, reaches a certain professional maturity - and by the finals is ready to defend his project.

There is great interest in product design, and not only from employers - we received 780 applications for training, with completed test tasks, and conducted 70 interviews, which 32 people successfully completed.

One of them, even at the start of school, decided to try to get a job at Yandex and, having successfully passed interviews, joined us. It was very important for us to choose guys who took their training seriously. We succeeded, and 30 School students out of 31 applicants reached the final defense of the project.

As a result of the School, Yandex hired 16 graduates; other guys went to develop their own projects or returned to the companies they worked for.

Taras Sharov, organizer of the school, head of the prototyping group for new products of Search, Yandex: The portrait of an ideal student at our school looks like this: you, as a designer, have more than once coped with the tasks assigned to you, your customers accepted your work and were satisfied with it. Gradually, you began to doubt that the customer really understood what he needed. Or there is no customer at all, and the closest contender for this role is yourself. You often ask yourself “how to understand: what is right and what is wrong?”, You have the motivation to thoroughly understand this issue.

When developing the school program, we tried to answer the question “what should a product designer in a company like Yandex know and be able to do?” So, we have an aspiring interface designer. Where should he develop?

We used the following analogy: the development of a designer is like cutting a tree - the more experience, the more rings on the cut. Closer to the core of the cut are craft skills - after all, many start with practice. And closer to the outer ring of the slice there is abstract knowledge - these are reflections on the real meaning of the designer’s work.

What is the idea behind the School of Design video course launched today?

Today, Yandex is opening a remote video course for the School of Design - course participants will be able to sequentially go through all sections of the School, listening to lectures by Yandex employees and simultaneously working on their own project.

At the beginning of the course, you need to choose a well-known and familiar brand, imagine yourself as a designer working for it, and come up with an idea for a small product that will complement the product line. You will work with this product throughout the course. Simply watching videos is unlikely to be effective.

Details are in the introductory lesson from Taras Sharov:

Introductory lecture outline:

1. Who is the School of Design intended for?
2. What is our school about?
3. How to properly perceive school materials?
4. How to get training?
5. Where to begin?

Video lectures will be published sequentially, every week on Tuesdays. The course lasts 10 weeks and ends on April 5th.

Can course participants send projects to Yandex for review?

Lola Kristallinskaya: We are ready to recruit an experimental group that will have the opportunity to receive consultations from our teachers while studying the project. We will inform you about the start and conditions of recruitment additionally during February.

In the meantime, we recommend getting ready for serious work: watch lectures, read additional literature and, at the same time, work on your project. During the learning process, its concept can seriously change. Your goal is not so much the end result as the process. The school gives you the opportunity to broaden your horizons and try to work on a product the way they do in large companies.

Are you planning to launch a second intake to the School of Design?

Lola Kristallinskaya: Yes, we are planning to open a Mobile Design School this year. We will tell you about the start and conditions of recruitment in March.

An excellent opportunity to enter a new profession. Therefore, I decided to perform a test task.

The task consists of two parts:

1. Check out Yandex's mobile products and suggest a couple of ideas for improving any of them.
2. Propose a concept for a mobile application for the Yandex.Travel service. The result should be a few key screens and a description of how it works and why.

The second task turned out to be more difficult than I thought. It seems that I made all the mistakes I could, and I’ll talk about that below.

Process

I learned about enrollment at the School right before going to Yekaterinburg for DAMP. On the way on the train, I began to think through the application interface and draw screens in a notepad.

This was the first mistake. I started building interfaces the way I wanted. The right thing to do would be to first understand what needs the interface should solve and build it accordingly.

When I returned from Yekaterinburg, I had 12 days to complete two tasks as part of the test task. To better understand the passage of time, I hung a piece of paper with days in front of me to remember the deadline. Every evening I crossed out the previous day.

Icon

The user gets acquainted with the application before launching it. The app icon matters a lot, so I started there. I took the icon of an already existing Yandex.Travel web service as a basis.

I started by drawing an icon in my:

My second mistake. It looks nice, but in reality it is of no use. When I started drawing in Sketch, it turned out to be complete crap:

The right thing to do would be not to redraw an existing icon, but to start with the associations that the service evokes. Yandex.Travel is a service for searching for tours and choosing hotels.

The first association that came to mind was a glass of cocktail; it allows you to relax, like a trip to the sea.

I agree, it looks pathetic. Although you can even notice the Y from the Yandex logo. This option is not suitable, since associating the service with an alcoholic drink is not a good idea. Next travel associations: palm trees!

I realized that I had made a mistake again. Yes, I started drawing icons based on associations, but they were in a vacuum. It would be more correct to study the icons of Yandex mobile applications, highlight common features and use them in combination with associations to draw an icon.

Who would want to accept such a freak into their family?

Yandex's application icons are simple and don't carry too many associations. For Transport they have a bus, for Post they have an envelope, and for Market they have a grocery cart.

I start looking for simple associations for Travel: luggage, bag, ticket. While I'm looking for simple implementations of icons, I come across a compass. Indeed, the compass and its image are familiar to everyone. I draw an icon and dress it in corporate colors. I check how she feels in the family:

I remember that half the time before the deadline is behind me. One week left. Drawing an icon is not an easy task. I settle on the option with a compass and move on to the mobile application interface.

On the left is an icon with borders for a page with a list of mobile applications, on the right is an icon for use in a prototype, it should not have borders.

The icon feels good in its natural habitat:

Mobile app

I opened Yandex.Travel on my smartphone to see what the mobile version of the site looks like. Next, I installed the following applications: Booking, Ostrovok, Travelata.ru, Aviasales and AirBnB to see what the interface might look like in applications dedicated to travel and searching for hotels/tours. I installed all the Yandex applications available for iPhone to find common patterns in interfaces.

I started looking for shots on dribble in the hope of finding interesting interfaces and using them as a basis for my concept. This was my next mistake.

The pictures in dribbble turned out to be divorced from life. The screens I found were beautiful, but they were in a vacuum and did not solve the problem.

Determined who will use the Travel mobile application. First of all, these are those users who have already used the service through the mobile version of the site.

The transition to the application from the mobile version of the site should be as painless as possible for the user, therefore the interface should be familiar and familiar.

I took the interface of the mobile version of the site as a basis and modified it to suit mobile realities. The result was an 8.7 MB sketch file and 15 artboards:

Unlike the mobile version, the application now has a page with a selection of personal tours, the ability to add search results to favorites, and a “History” button, which stores the history of the user’s search queries.

Prototype

At this stage, I realized that I had made the biggest mistake during the entire test task.

I drew interfaces for the screen of my old iPhone 4es to demonstrate the concept’s operation on it. When I opened the application image for the first time, I realized that the size of the artboards did not correspond to the size of the smartphone screen.

In Sketch, my screens had dimensions of 320 by 480 pixels, but they needed 640 by 960. I started redoing all the screens. Then I realized that the elements look good in Sketch, but on a smartphone they are small.

It would be more correct to approach the process differently: not “Draw the interface” → “Start prototyping”, but draw one screen and immediately check how it is displayed on a smartphone, which would save a couple of days of work.

Before starting the test task, I decided on a prototyping tool - Framer Studio. There you can write in CoffeeScript and make cool animations. In fact, it turned out that it was not easy to master Framer’s capabilities and implement my interface on it in a short time. There is nowhere to go, the deadline is looming, we need to flex.

At school, Anton Shein mentioned the InVision service. I started to figure it out.

The service turned out to be intuitive: you upload pictures and link them with transitions. You can customize animations for transitions, set your own application icon, which will be displayed when saved to the iPhone home screen. That's what I need!

Prototyping process in InVision

There were some problems. I had to struggle with the status bar.

The status bar is an interface bar that displays the time, battery charge and cellular signal. My layouts had their own status bar, but InVision can display the system one. If you save the icon to the home screen and launch the application through it, the status bar merges with the background.

When we save the site icon to the home screen and launch it, the site opens through the web view. The status bar can be configured via the apple-touch-icon meta tag. Unfortunately, the status bar cannot be configured to be transparent and have black text. Only with white text and black background.

Solution to the problem: install InVision App and use it for demonstration.

Since the concept had to be shown through another application, the integrity of the demonstration was violated. I came up with a scenario: show the running application, return to the icon, talk about it and return to the application, without clicking on the icon.

Result

Σ

Yes, I completely forgot to say. Before the test task, I had never worked in Sketch. As it turns out, it's easy to learn.

It is much more difficult to switch to mobile application design. As a web developer, I only have web interfaces in my head. The applications have a completely different use case and different features.

The main reason why I want to enroll in the School of Mobile Design is to gain knowledge and experience in creating application design, and learn to think like a designer.

I recently completed the Yandex.Design course. I studied the material on my own. But I did not have the opportunity to communicate with other students, ask questions to lecturers, and it was difficult to feel the atmosphere of the School.

Therefore, I want to enroll in the School of Mobile Design and personally attend lectures, ask questions and, most importantly, gain experience in creating a product together with other students.

Only 30 people will be accepted, the results will be announced by May 27. All that remains is to wait for the results and hope for the best, but in the meantime you can support me by liking and commenting on the post.

I will be glad to hear comments and suggestions on the test task.