Как делать веб-дизайн быстро

Name: Как делать веб-дизайн быстро
Uploaded: 2019-01-05T14:56:15.000Z
Duration: 3 h 32 min 24 s

Introduction

The speaker introduces the webinar and welcomes the audience to the Skillbox broadcast.

About Skillbox

The speaker talks about Skillbox, an educational platform that offers courses in programming, marketing, management, and design. They have over 21,000 successful students and more than 50 developed courses.

Becoming a Speed Designer

The speaker discusses how to become a speed designer without sacrificing quality. They ask if it's possible before discussing technical aspects of the broadcast.

Technical Aspects of Broadcast

Viewers can adjust video quality by clicking on the gear icon.

To check if sound is working properly, viewers are asked to type "1" in the chat.

What is a Speed Designer?

The speaker defines what they mean by "speed designer." They explain that it means being able to create a prototype for a main page within one hour and designing a main page for a website or landing page within one day.

How to Become a Speed Designer

The speaker explains how designers can improve their speed without sacrificing quality.

Tips for Becoming a Speed Designer

Use templates and pre-made elements.

Learn keyboard shortcuts.

Use plugins and extensions.

Practice regularly.

Importance of Time Management for Designers

In this section, the speaker emphasizes the importance of time management for designers and how it affects their pricing and reputation.

Don't Rush Your Work

Rushing your work can lead to a decrease in price and reputation.

Avoid sending designs to clients immediately after completing them. Wait until the standard development period has passed before sending them.

Use All Available Tools

Familiarize yourself with all available design tools to increase your speed and efficiency.

Photoshop, Sketch, and Figma are popular design tools that designers should be familiar with.

Specialization is Not Always Good

Relying on only one tool can limit your capabilities as a designer.

Using multiple tools allows you to take advantage of each tool's strengths.

Common Mistakes That Waste Time for Designers

This section discusses common mistakes that designers make that waste time.

Lack of Keyboard Shortcuts Knowledge

Not knowing keyboard shortcuts slows down the design process.

Learning keyboard shortcuts can save significant amounts of time in the long run.

Poor File Organization

Poor file organization leads to wasted time searching for files.

Organizing files into folders by project or client name saves time and increases productivity.

Failure to Use Templates and Libraries

Creating new designs from scratch wastes time when templates or libraries could be used instead.

Utilizing templates and libraries speeds up the design process while maintaining quality.

Ignoring Client Feedback Early On

Ignoring client feedback early on leads to wasted time later in the project when changes must be made.

Addressing client feedback early on saves time by avoiding major revisions later.

Choosing Fonts for Design

In this section, the speaker discusses how to choose fonts for design and emphasizes the importance of selecting a basic set of fonts to work with.

Basic Set of Fonts

A basic set of 4 fonts is sufficient for most design work.

Use thin or thick font styles based on your preference.

For headings, use bold fonts while thin fonts are suitable for subheadings.

Personalized fonts may be required for corporate branding purposes.

Developing a Design Style

In this section, the speaker talks about developing a unique design style and how it takes time to develop one's own style.

Developing Your Own Style

Over time, designers develop their own unique style that becomes recognizable.

It is common for beginners to want their designs to look different from each other but over time they will develop their own style.

Avoiding Time Wastage in Design Work

In this section, the speaker highlights some common mistakes made by designers that lead to wastage of time during design work.

Common Mistakes Made by Designers

Spend less time choosing fonts and instead focus on using a basic set of fonts.

Do not waste time creating elements such as sliders or buttons from scratch every time. Instead, create a library of ready-made elements that can be modified as needed.

Beginners should avoid spending too much time trying to draw simple shapes like crosses or circles. Instead, use existing resources such as websites or libraries.

Creating Libraries for Reusable Elements

In this section, the speaker emphasizes the importance of creating libraries for reusable elements in design work.

Creating Libraries for Reusable Elements

Create a library of all the elements that you have created for a project.

This library can be used in future projects and modified as needed.

It is important to create libraries for all types of elements, including buttons, sliders, and icons.

Standardizing Design Elements

In this section, the speaker discusses the importance of standardizing design elements such as hover effects, error messages, and other design elements that can be frustrating for programmers and designers when they change from one layout to another. The speaker suggests creating a library of ready-made solutions for common design elements.

Creating a Library of Ready-Made Solutions

The speaker suggests creating a library of ready-made solutions for common design elements such as menus, landing pages, and interfaces.

This library should include different types of menus and layouts that can be modified to fit specific needs.

By having these pre-made solutions available, designers can save time and focus on more complex design tasks.

Using Pre-Made Design Elements

In this section, the speaker emphasizes the importance of using pre-made design elements to speed up the design process. They suggest that designers should not waste time trying to create every element from scratch but instead use pre-existing templates or libraries.

Benefits of Using Pre-Made Design Elements

Using pre-made design elements such as menus and sliders can save significant amounts of time.

Having a library of pre-made solutions allows designers to quickly find what they need without having to start from scratch.

By using these pre-existing templates or libraries, designers can focus on more complex tasks rather than spending hours designing simple elements.

Progressive Design Process

In this section, the speaker discusses the benefits of using a progressive design process where designs are created in stages rather than all at once. They compare it to the way images used to load on slow internet connections.

Benefits of a Progressive Design Process

A progressive design process allows designers to see the design as it progresses and make changes along the way.

By designing in stages, designers can focus on one element at a time and ensure that each element is designed correctly before moving on.

This approach can save time by allowing designers to quickly identify what works and what doesn't, rather than spending hours on a design that may not be effective.

Introduction to Design Process

In this section, the speaker introduces the design process and explains how it can be broken down into different stages.

Understanding the Task

The first step in the design process is to understand the task at hand.

This involves analyzing what the website or project is about, who its target audience is, and what its goals are.

This analysis helps to form a structure for the main page of the website.

Working with Analysts

It's important to work with analysts who have already discussed analytical aspects of a project with clients.

They will provide an idea of how banners should look like and what tasks need to be accomplished.

The designer needs to ensure that they are able to deliver on these tasks.

Creating a Prototype

After understanding the task, creating a prototype is essential.

This involves adding reviews and enhancing impressions about your company on your website's homepage.

A good structure for your homepage should take no more than 5 minutes to create.

Gathering References

Collecting references from other websites can help you create a better prototype faster.

Spend time collecting examples of elements such as icons, images, and videos that you can use in your design.

Having these references ready saves time when designing later on.

Analyzing Tasks & Creating Structure

In this section, we learn about analyzing tasks and creating structures for web pages.

Analyzing Tasks

Before starting any redesign project, it's important to analyze what needs improvement.

Understanding what works well and what doesn't will help guide decisions during redesign.

Knowing who your target audience is also crucial in making informed decisions.

Creating a Structure

Once you have analyzed the task, creating a structure for your website is essential.

This involves creating a rough sketch of what your homepage should look like.

Spend time selecting and organizing elements such as menus, sliders, and videos.

Building Prototypes

After creating a structure, building prototypes is the next step.

This involves using pre-existing elements such as icons and images to create mockups of your design.

These prototypes should be reviewed by an art director or project manager before moving forward.

Practical Example

In this section, we see a practical example of how to use the design process to redesign a website.

Redesigning a Website

The speaker shows an example of how to redesign an existing website.

The first step is analyzing what needs improvement on the current site.

Next, create a rough sketch of what the new homepage should look like.

Using References

Collecting references from other websites can help speed up the design process.

Spend time collecting examples of elements such as icons, images, and videos that you can use in your design.

Having these references ready saves time when designing later on.

Building Prototypes

After creating a structure and gathering references, building prototypes is the next step.

Use pre-existing elements such as icons and images to create mockups of your design.

These prototypes should be reviewed by an art director or project manager before moving forward.

Introduction

The speaker introduces the project and explains that it is a toy store. They analyze the current layout of the website and suggest improvements.

Analysis of Current Layout

The website sells toys from various brands.

There is a banner on the homepage that doesn't serve any purpose.

The logo and popular products are present but could be made more prominent.

Announcements for new series and videos are available on the homepage.

A slider for new series or special offers would be more appropriate than the current banner.

Catalog Improvements

The speaker suggests changes to improve the catalog section of the website.

Catalog Suggestions

Add a download button for an updated catalog on the homepage.

Create a small catalog on the homepage to showcase new products, discounts, and promotions.

Make logos and product images larger as they are likely what suppliers come to see.

Personal Account System

The speaker proposes adding a personal account system to improve customer experience.

Personal Account System Suggestions

Create a personal account system with bonuses, points, discounts, and personalized offers.

Add a login button to access this feature from the homepage.

Reference Library

The speaker discusses how reference libraries can help in designing websites.

Reference Library Benefits

Reference libraries provide solutions for design problems before starting work on them.

They help in organizing content effectively by providing examples of how others have done it before.

Prototype Creation

The speaker demonstrates creating a prototype using Photoshop before moving onto actual design work.

Creating Prototypes

Prototyping helps in visualizing ideas quickly without investing too much time into them.

Photoshop is a useful tool for creating prototypes as it allows for easy editing and manipulation of design elements.

Designing a Website Layout

In this section, the speaker discusses the process of designing a website layout. They cover topics such as menu design, slider implementation, product catalog creation, and footer design.

Menu Design

The speaker adjusts the alignment of the menu to ensure that it is properly aligned.

They add an icon for user login instead of using the letter "E".

The final menu will have sections listed with a link to the user's account.

Slider Implementation

The speaker wants to include a slider for special offers on the website.

They take inspiration from Rostelecom's slider design and implement it quickly without worrying about alignment.

Product Catalog Creation

The speaker finds a cool concept for IKEA's product catalog and decides to use it as inspiration.

They adjust some elements of the original concept to fit their needs better.

There are some issues with alignment that need fixing before presenting it to management.

Footer Design

The speaker likes Amazon's footer design and decides to use it as inspiration.

They add language switching functionality and adjust some elements to fit their needs better.

Understanding the First Draft

In this section, the speaker discusses the importance of having a clear understanding of what is expected in the first draft. They explain that it is normal to receive feedback on the first draft and make changes accordingly.

Importance of Clear Expectations

The first draft should have a clear understanding of what is expected.

Feedback will be given on the first draft, and changes may need to be made.

Making Changes Based on Feedback

Art directors or account managers may provide feedback on specific elements such as menus or sliders.

It's important to consider content when making changes.

Micrographics can be adjusted for better presentation.

Prototypes can be difficult to understand, so it's best to use block diagrams instead.

Using Filmora for Design Work

In this section, the speaker explains how they use Filmora for design work. They discuss how it helps them create grids and banners more efficiently.

Advantages of Using Filmora

Filmora allows for creating grids and banners quickly.

The program has many features that help with design work.

It's easier to work with than Photoshop in some cases.

Benefits of Using Grids in Design Work

In this section, the speaker discusses how using grids can help with design work. They explain that grids simplify sizing and placement decisions.

Simplifying Sizing Decisions

Grids simplify sizing decisions by providing a framework for placement.

Screens can be placed side-by-side for easy comparison.

Creating Banners in Photoshop

In this section, the speaker explains how they create banners in Photoshop. They discuss how they use a basic framework to start and then add details later.

Starting with a Basic Framework

A basic framework is created for the banner.

Details such as shadows and object placement are added later.

Creating Grids for Design Work

In this section, the speaker discusses how grids can be used to simplify design work. They explain that grids help with sizing decisions and provide a framework for placement.

Simplifying Sizing Decisions

Grids simplify sizing decisions by providing a framework for placement.

Screens can be placed side-by-side for easy comparison.

Using Fonts and Micrographics

In this section, the speaker discusses the use of fonts and micrographics in design projects.

Font Selection

The speaker uses the Les Uns font in their recent projects.

They will use two different font weights for their current project.

The font size will be adjusted later.

Micrographics

The speaker shows some micrographics they have created for a slider.

They choose a color that is not too bright to avoid being distracting.

Paid Graphics Resources

There are many paid and free graphics resources available online.

The speaker recommends Fine Dry Icons as a resource for vector icons.

It is important to find graphics that fit your specific needs.

Choosing Design Tools

In this section, the speaker discusses choosing design tools based on their purpose and efficiency.

Photoshop vs Filmora

The speaker prefers using Filmora over Photoshop because it saves time.

In Filmora, they can quickly find tools without having to search through menus like in Photoshop.

TopNews Tool for Designers

While any tool can be used by designers, TopNews is not commonly used by professional studios or companies.

It may be useful for personal projects or small-scale websites.

Language Switching and Target Audience Analysis

In this section, the speaker discusses language switching on websites and analyzing target audiences.

Language Switching on Websites

Adding a language switcher to a website's footer may not be necessary if the target audience is primarily one language group.

If an international audience is expected, then adding a language switcher may be necessary.

Analyzing Target Audiences

When analyzing target audiences, it is important to consider what actions they are likely to take on the website.

For example, a phone number may be necessary for an e-commerce website, but not for a blog.

Phone Numbers on Websites

Some websites do not display phone numbers because they prefer to communicate with customers through chat or email.

It is important to consider the preferences of the target audience when deciding whether or not to include a phone number.

Optimizing Design Workflow

In this section, the speaker discusses how to optimize design workflow and increase productivity.

Importance of Optimization

Learning from professionals who can complete tasks in minutes.

Using methods that allow for faster completion of tasks.

Optimization is a strange thing but very useful.

Specialization and Speed

The more specialized you are, the faster you can complete projects.

Specializing in landing pages or e-commerce sites allows for quicker completion of similar projects.

There are only a few variations of designs for certain types of projects, so once you have tried them all, it becomes easier to create new ones.

Grids and Templates

Grids make it easy to align elements without much effort.

Templates help speed up the process by providing a starting point for designs.

Creating grids and templates takes time initially but saves time in the long run.

Hiring Designers

When hiring designers, look at their portfolio and how they approach tasks.

A good test is to ask them to format an existing project in their own style.

Understanding the Target Audience and Designers

In this section, the speaker discusses the importance of understanding the target audience and how designers can help achieve that goal.

Importance of Understanding Target Audience

It is important to understand the target audience when creating a design.

Experienced designers who have their own clients are preferred because they know how to present a product to its intended audience.

When evaluating a designer, it is important to look at their portfolio and see if they can work with fonts, forms, and other design elements.

However, it is difficult to determine if a designer will be a good fit for a project based solely on their portfolio. It requires an understanding of logic and critical thinking skills.

Working with Designers

Having in-house designers who can take on freelance projects is beneficial because they can present products effectively.

Communication between the client and designer is crucial. The designer should not just send designs without explaining why certain decisions were made.

Art directors prioritize harmony over sales. They want designs that look good rather than ones that sell well.

Creating a Banner

In this section, the speaker walks through the process of creating a banner design.

Designing the Banner

The first step in designing a banner is determining what content needs to be included.

The banner's appearance should appeal to its intended audience. If it does not, there may be questions about its effectiveness.

A base image for the banner can be found online and modified to fit the design.

The banner should have a diagonal separator, which can be created using a dark color.

The background of the base image should be removed using Photoshop's pen tool or quick selection tool.

Photoshop is not ideal for removing backgrounds from images, but it is currently the best option available.

Introduction to Graphic Design Tools

In this section, the speaker discusses the importance of reading and learning about new graphic design tools. They also share their experience with using different tools for photo editing.

Learning New Tools

Reading and learning about new graphic design tools is important.

The speaker shares their experience with using different tools for photo editing, including the Pen Tool and mask selection.

It's recommended to dedicate a certain amount of time each week to learning new skills.

Efficient Editing Techniques

The speaker demonstrates an efficient technique for removing artifacts from images using a brush tool.

There are many different tools available for graphic design, but it's important to use them efficiently and effectively.

The speaker emphasizes the importance of creating high-quality designs in a timely manner.

Creating Shadows

The speaker discusses their struggles with creating shadows in their designs.

They demonstrate a simple technique for adding shadows to an image using basic shapes and gradients.

Introduction

The speaker introduces the topic of becoming a faster designer and discusses the importance of not wasting time on unnecessary tasks.

Becoming a Faster Designer

The speaker suggests that designers should focus on being efficient with their time and not waste it on tasks that are not necessary.

They recommend using pre-made templates or designs to save time, rather than starting from scratch every time.

The speaker emphasizes the importance of regular practice and improvement in order to become a faster designer.

Importance of Specialization

The speaker discusses the importance of specializing in specific areas to become more efficient as a designer.

Specializing in Specific Areas

The speaker recommends specializing in specific areas such as micrographics or designing headers, footers, and product cards.

They suggest that by specializing, designers can become more efficient and complete projects more quickly.

The speaker also recommends reusing previous designs or elements from past projects to save time.

Importance of Regular Practice

The speaker emphasizes the importance of regular practice and improvement for becoming a faster designer.

Regular Practice for Improvement

The speaker stresses the need for regular practice and improvement in order to become a faster designer.

They recommend following best practices and learning new techniques regularly to improve skills.

By practicing regularly, designers can develop their own style and work more efficiently.

Conclusion

The speaker summarizes the key points discussed throughout the video.

Key Takeaways

Designers should focus on being efficient with their time by using pre-made templates or designs when possible.

Specializing in specific areas can help designers become more efficient and complete projects more quickly.

Regular practice is essential for improving skills and becoming a faster designer.

Finding Design Solutions

In this section, the speaker discusses how to find design solutions and where to look for inspiration.

Ready-made Solutions

Ready-made solutions can be found online, such as templates from Forest or Template Monster.

These templates can be used as a starting point and customized to fit specific needs.

It's important not to plagiarize and instead use these solutions as inspiration.

Searching for Specific Solutions

When looking for specific design solutions, it's helpful to search for them online.

Interactive elements and unique designs can be found on websites like Awwwards or Behance.

Following designers whose work you admire on social media platforms can also provide inspiration.

Saving Inspiration

It's important to save any design inspiration found for future reference.

Screenshots or saving links in a designated folder are good ways to keep track of ideas.

Cloud storage is also useful for sharing inspiration with team members.

Payment Structures in Design Work

In this section, the speaker discusses different payment structures in design work and what they entail.

Results-Based Pay

Some companies pay based on results, such as the number of banners created per day or winning a tender bid.

This type of pay structure requires consistent output and may not allow much time for experimentation or creativity.

Fixed Pay

Other companies offer fixed pay regardless of output or results.

This allows more freedom for experimentation and creativity but may not incentivize productivity.

Bonus-Based Pay

Some companies offer bonuses based on performance or winning tenders.

This type of pay structure can motivate employees to work harder towards specific goals.

The Role of Design Tools

In this section, the speaker discusses the role of design tools and how they can be used to achieve specific goals.

Design Tools for Specific Tasks

Design tools are meant to help achieve specific tasks.

Ronaldo's football moves are an example of using a tool (his body) to achieve a specific goal (scoring).

A designer's choice of tool depends on their goal. For example, if they want to show off, they might use a more complex tool than necessary.

In a business context, design tools should be used to solve problems efficiently rather than for show.

Improving Design Logic

In this section, the speaker talks about improving design logic and how it can benefit designers and clients.

Methods for Improving Design Logic

There are methods for improving design logic that can benefit both designers and clients.

One method is to present designs in a way that helps clients understand them better. This can lead to increased sales and profitability.

Another method is to challenge other designers by making bets or challenges that force them to think creatively.

Junior designers tend to focus on completing individual tasks while senior designers consider the bigger picture and how their work affects the company as a whole.

Using Games for Learning

In this section, the speaker discusses using games as a way of learning new skills.

Using Games for Learning

Games can be used as an effective way of learning new skills.

Junior designers tend to focus on completing individual tasks while senior designers consider the bigger picture and how their work affects the company as a whole.

By using games, designers can learn to think more strategically and consider the impact of their work on the company's profitability.

Design is just one part of a larger process that involves solving problems for clients. Designers should focus on finding solutions that are profitable for clients rather than just creating something that looks good.

Understanding Clients' Needs

In this section, the speaker talks about understanding clients' needs and how it can lead to better design outcomes.

Understanding Clients' Needs

To create effective designs, designers need to understand their clients' needs.

This involves understanding how clients' businesses operate and what they need from a design perspective in order to be successful.

By focusing on meeting clients' needs, designers can create designs that are both aesthetically pleasing and profitable for their clients.

Catalogue Creation for Easy Ordering

In this section, the speaker discusses the importance of having a catalogue that allows customers to easily place orders. The speaker suggests that instead of a standard e-commerce website, clients should have access to a long price list with filters and options to select quantities.

Importance of Catalogue Creation

Clients need an easy way to place orders.

A long price list with filters and options would be more effective than a standard e-commerce website.

Meeting with Clients

Meetings are important for developing the logic behind creating an effective catalogue.

These meetings help identify what clients need and how they want their catalogue to function.

Understanding Client Needs

It is important to understand client needs in order to create an effective catalogue.

For example, understanding how large companies' procurement departments work can help create a system that works for them.

Skillbox Course Sale

In this section, the speaker promotes Skillbox courses on design. They explain that there are many different course packages available and provide information on how interested individuals can sign up.

Skillbox Course Sale

There is currently a sale on Skillbox courses on design.

Many different course packages are available.

Interested individuals can sign up by filling out their name, phone number, and email address.

Once signed up, individuals will receive information about the courses available and can choose which ones they want to take.

Introduction

The speaker introduces the company and mentions some of the projects they have worked on. They also mention that there are various programs available for interested individuals to learn from.

Company Introduction

The company has worked on projects for Mail.ru, Kaspi Bank, Yota, VTB24, and Etiquette-Lenta.

There are various programs available for interested individuals to learn from.

Program Consultation

The speaker talks about how interested individuals can get consultation on the programs offered by the company.

Program Consultation

Interested individuals can leave a request and a specialist will call them back to provide consultation.

If the program is not suitable, the request can be cancelled.

New Year's Sale

The speaker talks about an upcoming sale and packages that have been put together for those who want to make progress in 2019.

New Year's Sale

Winter sales at Skillbox are closed.

Packages have been put together for those who want to make progress in 2019.

Courses can be taken parallelly with other activities.

Homework assignments are checked by professionals in the field.

Programs have already been tested and developed by companies with awards and successful clients.

Flexible Learning

The speaker talks about how learning is flexible at Skillbox.

Flexible Learning

Theory lessons are pre-recorded so students can learn at their own pace.

Teachers check homework assignments based on real-life situations.

Students can communicate with teachers through chat or email support.

Canceling Requests

The speaker explains how requests work and how they do not obligate individuals to anything.

Canceling Requests

Leaving a request does not obligate individuals to anything.

The company will provide more information about the program if requested.

If the program is not suitable, the request can be cancelled.

Double Discount Sale

The speaker talks about a double discount sale for those who leave a request during the live stream.

Double Discount Sale

A double discount sale is available for those who leave a request during the live stream.

Those who leave a request will receive an email with more information and consultation.

Real Programs

The speaker emphasizes that programs are based on real-life situations and developed by successful companies.

Real Programs

Programs are based on real-life situations and developed by successful companies.

Teachers are professionals in their field and check homework assignments based on real-life situations.

Technical Support

The speaker talks about technical support available to students.

Technical Support

Technical support is available through phone or email.

Students can communicate with each other through chat to exchange ideas and feedback.

Diploma Project

The speaker talks about how students work on diploma projects with real clients.

Diploma Project

Students work on diploma projects with real clients based on actual briefs.

Projects can be defended online if necessary.

Job Guarantee

The speaker guarantees job placement within Russia for graduates of Skillbox programs.

Job Guarantee

Graduates of Skillbox programs are guaranteed job placement within Russia.

Skillbox Webinar

In this webinar, the speaker discusses the benefits of enrolling in Skillbox's year-long program and how it can help individuals develop their skills and earn money through freelancing or employment.

Benefits of Enrolling in Skillbox's Year-Long Program

Individuals who enroll in Skillbox's year-long program receive six months of free education.

After six months, individuals begin making monthly payments for their education based on the skills they have learned.

It takes about four months to gain enough knowledge to start earning money through freelancing or employment.

Employment opportunities include working in an office for a salary of approximately 60,000 rubles per month or project-based work for around 20,000 rubles per project.

Importance of Choosing a Quality Learning Program

Free learning programs may not provide quality material that is relevant to one's profession.

Skillbox offers pre-designed programs that cater to different skill levels and allow individuals to learn while simultaneously working in their chosen field.

Conclusion

The webinar concludes with an invitation to enroll in Skillbox's year-long program by filling out an application form.