Six years in numbers
Website design: what does a business gain?
At Seo-Gen, website designs are developed with future development and SEO in mind. The layout provides space in advance for headings, commercial sections, main content, internal links, FAQs, and other page elements. After approval, the client receives design mockups that can be handed over to developers without having to rebuild the interface logic themselves.
A good interface helps users quickly understand a company's offering, find the right section, and complete the desired action. Therefore, website design focuses on structure, page logic, visual accents, user-friendly forms, and the flow of user actions.
For businesses, the result is a coordinated system of screens and components tailored to a specific project. The design can be used when creating a new website, a complete redesign, or refining individual sections when the existing visual and functional model is already hindering development.
UX/UI and user scenarios
UX describes the logic of a person's interaction with a website: which pages they open, where they search for the information they need, how they compare offers, and how they submit a request. UI is responsible for the visual design of the interface, the arrangement of elements, the states of buttons, fields, cards, and other components.
When developing a website design, it's important to consider real-world user scenarios. A user might navigate directly from a search to a service page, open a product card from a catalog, go back to comparing options, or proceed to a form after reviewing a case study. The layout should support these actions without unnecessary transitions or confusing elements.
Visual style and brand recognition
The visual concept includes typography, color palette, images, icons, grid system, graphic elements, and component design guidelines. These decisions should match the company's brand style and stay the same across the homepage, inner sections, forms, and mobile versions.
If a company already has an identity, the designer uses the existing rules and adapts them for the digital interface. For a new project, the visual system can be built around the logo, brand colors, product identity, and requirements for the website's future development.
Page conversion logic
Every commercial page should lead the visitor to a clear next action. For a service page, this action could be a request, a call, or a quote request, while for an online store, it could be going to the product page, adding the item to the cart, and placing the order.
Therefore, the placement of the CTA, request form, trust block, pricing, case studies, and answers to questions are determined during the prototyping stage. Users should understand what the company offers, how it differs from alternatives, and how to continue interaction.
What it includes
UX/UI design
UX/UI design for websites and web applications: UX research, prototyping, UI design, and preparing mockups for development. We design user-friendly interfaces for businesses.
Website redesign
Order a website redesign from Seo-Gen: UX/UI, structure, development, and SEO preservation. We'll estimate the project cost for businesses in Kyiv and throughout Ukraine.
What is included in website design?
The scope of the service depends on the scale of the project, the number of pages, and the complexity of user scenarios. A small website may require a limited set of templates, while a corporate portal, online store, or service requires a larger number of states, components, and adaptive solutions.
When evaluating a project, research, prototyping, visual concept creation, internal page design, responsive design, and preparation of materials for development are assessed separately. This approach helps understand the scope of work in advance.
Task analysis and brief completion
A website design brief helps gather initial data before the design process begins. It outlines the business objectives, audience, product features, service structure, competitors, brand identity, technical constraints, and visual design preferences.
Reference websites and competitors' solutions are also analyzed, but copying someone else's structure or design is not used as the basis for the project. References help quickly align expectations regarding typography, interface density, graphics, and the nature of visual presentation.
Development of structure and user logic
The development of a website's structure and design begins with defining pages and the connections between them. At this stage, navigation, the sequence of content blocks, key user paths, forms, and the placement of target actions are designed.
Information architecture is especially important for websites with a large number of services, categories, or products. If the structure is confusing, a good visual style won't solve information retrieval problems, so the project's logic is established before detailed design.
Creating a prototype
A prototype shows the layout of page elements without detailed graphic design. It allows you to test the block sequence, content volume, navigation, user flows, and CTA placement before the team dedicates time to visual details.
Website design after an approved prototype proceeds more predictably, since key structural decisions have already been made. If necessary, prototypes can be supplemented with explanations for complex forms, catalogs, and interactive elements.
What are we testing on the prototype?
The prototype tests the flow of information, placement of headings, trust blocks, forms, navigation, and primary buttons. Special attention is paid to screens where the user must select a service option, compare offers, or fill out data.
The page length and the balance of informational and commercial elements are also assessed. After completing the checklist, the team returns to the whole user flow and makes sure that the transitions between sections are clear without the designer's explanation.
Development of a visual concept
The visual concept determines the direction of the subsequent design: typography, color, images, graphics, composition principles, and the design of basic components. The solution must take into account the company's corporate style and the content of the specific project.
The concept is usually tested on one key page or a few representative screens. Once approved, the chosen rules are rolled out to the remaining pages, reducing the number of random visual decisions within a single website.
Development of page design layouts
Website page design development includes a homepage and a set of unique internal templates. These could include service pages, a catalog, a product card, an article, a case study, contact information, an order form, a user account, or another interface as required by the structure.
Each page is defined with its own task and user scenario. Reusable elements are assembled as components so that identical buttons, cards, and forms don't have to be redesigned in every layout.
Responsive design
Developing a responsive website design takes into account the differences between desktop, tablet, and mobile devices. On smaller screens, the available space, the order of elements, the navigation, and the way forms are interacted with change, so simply scaling the layout proportionally is not enough.
Mobile menus, tables, filters, long forms, product cards, and large visual blocks are designed with particular care. Interactive elements must maintain a user-friendly size, and important information must remain accessible without unnecessary interaction.
UI Kit and design system
The UI Kit contains reusable interface elements: buttons, fields, cards, typography, colors, and basic component states. For larger projects, the set of rules is expanded into a design system, which helps maintain a consistent design when adding new pages.
This approach is useful for corporate websites, online stores, and services that are constantly evolving. Developers and designers are provided with common rules, making it easier to create new elements without visual inconsistencies with existing pages.
Preparing the layout for development
Once approved, the design is prepared for handover to the technical team. The mockup must clearly define components, responsive states, dimensions, margins, images, icons, and the behavior of interactive elements.
If a project involves complex animation or non-standard logic, these aspects are described separately. This preparation reduces the number of interpretations during front-end development and helps more accurately translate the agreed-upon interface into the working website.
Stages of website design
The website design process builds from the brief to the finished layout, which can be handed over to the technical team. The number of approvals depends on the scale of the project, but the basic sequence remains clear: first the data and structure, then the prototype, the visual concept, and responsive versions.
This order helps separate structural and visual decisions. Correcting the page logic on a prototype is easier than rebuilding a complete set of desktop and mobile layouts after the work is complete.
Brief and problem statement
At the start, the project's goals, website type, audience, list of required pages, and expected user actions are determined. At the same time, brand assets, content, competitor examples, and technical limitations that may impact the interface are compiled.
If some of the initial data isn't yet ready, the team determines which decisions can be made immediately and which will require further approval. This reduces the risk of rework after the main screens are approved.
Analysis of business, audience and competitors
Analysis helps us understand what tasks users come to the site to solve and what patterns are already familiar to the audience. We examine the structure of competitors' offers, navigation methods, commercial blocks, forms, catalogs, and other elements that influence interaction patterns.
The goal of the analysis is to identify useful solutions and weaknesses, rather than to replicate a specific website. The findings are used in designing your own structure and prototypes.
Development of the structure
At this stage, the set of pages, their purpose, and the connections between sections are determined. A sequence of blocks is created for key templates, taking into account the content, commercial intent, and expected user action.
The structure should also accommodate future website expansion. If new services or categories are added regularly, the navigation and templates are designed so that project growth doesn't require constant redesign of the core architecture.
Prototyping
Prototyping translates the structure into specific screens. The diagrams show the location of the H1, main content, images, cards, forms, FAQs, CTAs, and other elements the user will see on the page.
At this stage, it's convenient to discuss the order of blocks and information priorities without the distraction of color and graphics. Once the logic is agreed upon, we can move on to the visual concept and interface design.
Development of a design concept
A visual direction is selected for key screens that aligns with the brand style and the product's character. The designer determines the typography, grid, color scheme, graphics, and design principles for repeating components.
The approved concept sets the rules for the rest of the website's pages. This ensures that the catalog, service pages, forms, and information sections appear as parts of a single project.
Design of main and internal pages
Once the concept is approved, the remaining unique pages are created. Website design at this stage includes actual content types, interface states, and elements that will be used after launch.
If pages differ only in content, a common template is created for them instead of multiple, nearly identical layouts. This approach simplifies the development and subsequent maintenance of the site.
Responsive versions
After desktop mockups, tablet and mobile versions are developed, if they are included in the project. Elements are rearranged to accommodate the available screen width, touchscreen features, and information priority.
Complex components such as menus, tables, filters, cards, forms, and long lists are tested separately. As a result, developers gain a clear model of interface behavior across different devices.
Approval and handover to development
The final stage includes reviewing mockups, agreeing on any remaining edits, and preparing materials for developers. The team gains access to Figma, components, responsive states, and graphic assets.
If design and development are handled by a single team, the handover occurs within the overall process. When working with the client's developers, mockups are prepared in a way that allows the technical team to understand the structure without reconstructing the logic from static images.
Process flow diagram:
Brief → analysis → structure → prototype → design concept → internal pages → responsive versions → handover to development
The sequence can be supplemented with individual steps for complex services or online stores. The basic logic remains the same: each subsequent decision builds on the agreed-upon previous step.
How long does it take to develop a website design?
The timeframe depends on the scope of the research, the number of unique pages, the complexity of the prototypes, and the speed of approval. A small website with a few standard templates requires fewer steps than an online store or service with numerous user scenarios.
The availability of the initial data also affects the project schedule. If the structure, content, and branding are defined in advance, the team can move on to mockups more quickly. However, without these materials, some decisions must be made during the design process.
Before work begins, it's best to agree on project stages and milestones. This way, the client understands when feedback is needed, and the designer can plan subsequent pages after the basic logic and concept are approved.
How much does it cost to develop a website design?
The cost of website design depends on the number of unique screens, the complexity of the structure, and the amount of preliminary design work. Two pages of the same length may require different amounts of time if one consists of standard information blocks, while the other contains complex forms, filters, and interactive states.
Therefore, website design and pricing are calculated after reviewing the task. Estimates require an understanding of the project type, the list of pages, the number of unique templates, and the need for prototypes, responsive versions, and a design system.
What does the cost of website design depend on?
The final cost is affected by the number of unique pages, navigation complexity, number of user scenarios, volume of responsive states, and graphics requirements. Additional time is required for complex animations, custom components, large catalogs, or user account interfaces.
The cost of website design is also related to the amount of research and prototyping. If the structure hasn't yet been defined, you need to first design the pages and user logic before moving on to the visual component.
What is included in the price?
The estimate may include task analysis, prototyping, design of main and internal pages, responsive versions, a UI kit, and preparing a mockup for delivery to developers. The specific scope of work is determined before work begins, so the client understands what materials they will receive upon completion.
When ordering a comprehensive development, design and programming are priced separately within the overall project. This helps you clearly see the cost of each stage and avoid mixing the designer's work with layout, integrations, and the server side.
Why can two websites of the same size cost differently?
The number of pages only tells a fraction of the story. Ten information pages on a single template require less design effort than ten unique web service screens with tables, filters, forms, user roles, and multiple data states.
Therefore, the question of "how much does it cost to order a website design" is best considered after the structure has been clarified. The price depends on the number of unique solutions, not the total number of URLs that will appear after launch.
Why order website design from Seo-Gen?
Seo-Gen works with websites whose design is linked to further development, SEO, and scaling. Therefore, layouts are designed taking into account the actual page blocks, content, responsive versions, and technical implementation.
When developing a website, we consider how it will function after publication: which pages will appear later, where the main content will be, how the interlinking is structured, and which elements will be reused in templates.
The design is immediately developed taking into account further development: The layout must be feasible without constant compromises even at the front-end stage. Therefore, the designer must consider real components, states, responsive behavior, and the limitations of the chosen website architecture. For a project that is then developed at Seo-Gen, design and technical implementation are reviewed in a single process. This reduces the risk of the approved interface having to be significantly modified due to layout specifics.
SEO is taken into account before the layout stage
The structure of a commercial page is formed taking into account search intent, headings, main content, and internal links. For sections with a large semantic core, templates are planned in advance, allowing for site development without creating random pages.
This approach is especially useful for corporate websites, catalogs, online stores, and projects with a large number of services. There's no need to add an SEO structure on top of the existing visual solution after the design is complete.
One contractor for design and development
With a comprehensive project, the client delegates the task to a single team, which manages the project from structure and layout to technical implementation. The designer and developer work with the same requirements, so interface solutions can be tested before they are included in the final website.
This process reduces the number of discrepancies between the mockup and the final page. The client also doesn't have to explain the logic of components and user flows to an external team.
Scalable design system
For websites with many pages, it's important to establish common interface rules upfront. Buttons, cards, forms, typography, spacing, and other elements are assembled as reusable components.
This facilitates further development of the project and the addition of new sections. The new page can use existing rules, maintaining a unified visual language without having to redraw each standard element separately.
Answers to your questions
What is included in website design?
The scope of work varies depending on the project, but typically includes task analysis, structure, prototyping, visual concept, main page layouts, responsive versions, and preparation of developer resources. Larger websites may also require a UI kit or a full-fledged design system.
Before the start, the scope of work is recorded separately to ensure the number of unique screens and responsive states is clearly defined. This also helps to more accurately estimate the cost and timeline before detailed rendering begins.
How much does it cost to order a website design?
The price of a website design depends on the number of unique pages, user scenarios, the amount of prototyping, responsive versions, and the complexity of the visual system. The cost of designing a single homepage and a large online store is calculated based on different scopes of work.
To get an accurate estimate, you need to determine the project type and template list. This will help you determine how many screens need to be developed and what additional tasks are included in the project.
How long does it take to develop a website design?
The timeframe depends on the number of screens, the complexity of the interface, and the number of approval stages. If the project already has a structure, branding, and prepared content, the work usually proceeds more quickly than if all source materials are developed simultaneously.
For large projects, it's more convenient to plan the work in stages. First, the structure and prototypes are agreed upon, followed by the visual concept, internal pages, and responsive versions.
Is it possible to order only the design without website development?
Yes, a design can be prepared for the client's in-house technical team if this format is agreed upon before the project begins. In this case, preparing mockups for handover to the developers is especially important.
Figma captures components, element states, responsive behavior, and interface rules. The technical team gains a working system that enables front-end development without having to independently recreate the designer's vision.
How is custom design different from a template?
A custom design is created based on the structure, brand, and user scenarios of a specific project. The template already contains a ready-made composition and set of components, so some solutions must be adapted to its limitations.
The choice depends on the goals and budget. For a small, standard website, a template may be a rational solution, but a complex product or large commercial project often requires a custom interface system.
Do you do responsive design for smartphones and tablets?
Responsive states are provided for projects where they are part of the agreed scope of work. The mobile screen is developed separately, taking into account navigation, the size of interactive elements, and the order of content.
Forms, menus, filters, cards, tables, and other complex components are tested especially carefully. They must maintain a clear interaction logic across different devices.
Is it possible to redesign an existing website?
Yes, before a redesign, we first evaluate the current structure, interface, and problematic scenarios. This helps us understand which parts of the website are worth preserving and which require rework.
A complete redesign isn't always necessary. Sometimes, updating key commercial pages, mobile navigation, forms, and the visual system without changing the parts of the site that already work is sufficient.
What program is used to create website design?
Figma is commonly used for interface development because it's easy to assemble components, prototypes, and responsive layouts, and hand off materials to developers. The specific toolset used depends on the project's task and format.
Additional programs may be used for individual graphic materials. The main working layout must remain accessible to the team implementing the website.
Who prepares the design specifications?
The website design specifications are based on the business objective, project structure, and technical requirements. The process may involve the client, designer, SEO specialist, project manager, and developer.
The number of participants depends on the website's complexity. The more functionality and page types there are, the more useful it is to coordinate the requirements of different specialists before visual rendering begins.
More on: Website design
When is it worth ordering a website design?
It's best to order a website design before front-end development begins if the project structure has already been defined or is still in the design phase. This approach reduces the number of changes during the layout process, as key decisions regarding element placement, adaptive features, and interface states are agreed upon in advance.
Website design services are also needed for existing projects when the interface no longer aligns with the business structure, visual style, or user habits. In this case, the current website is first assessed, after which the scope of the redesign is determined.
For a new website
For a new project, website design begins after defining the goals, structure, and primary page types. Jumping straight to the home screen without understanding the other sections may result in a visual concept that doesn't scale well to the catalog, cards, information pages, and forms.
At an early stage, it's helpful to define business goals, target audience, information architecture, and a list of unique templates. After that, a prototype is created, the logic is agreed upon, and visual development begins.
To redesign an existing website
A redesign is necessary when the existing interface interferes with users' usual actions, the mobile version is inconvenient, the structure has become too large, or the visual style no longer aligns with the brand. This may also be due to changes in the company's product, product range, positioning, or service offerings.
Before developing a new layout, it's important to determine which parts of the current website are working properly and can be preserved. This approach helps avoid carrying over old problems into the new interface and reworking successful solutions without reason.
If the client already has developers
Custom website design can be performed separately from programming if the client has an in-house technical team. In this format, the designer prepares prototypes, basic layouts, responsive versions, a UI kit, component states, and materials for further layout.
Design handover should be clear to developers without constantly refining the underlying logic. To achieve this, Figma captures reusable components, dimensions, margins, interactive element states, and interface behavior rules across screens.
Which design to choose: unique or template?
The choice depends on the project's objectives, budget, timeframe, and development requirements. A ready-made set of components may be sufficient for a small informational website, while a service with complex logic will require custom interface development.
It's best to compare options based on the constraints of a specific project. If a ready-made template supports the desired structure and functionality, using it can reduce the amount of work, but custom scenarios often require separate design.
| Option | Best for | Limitations |
|---|---|---|
| Custom design | Projects with their own structure, brand, and complex scenarios | Requires more time for analysis and design |
| Template solution | Small websites with a typical structure | Less freedom when changing the interface |
| Redesign | An existing website with an outdated or inconvenient interface | First, it is necessary to evaluate the current structure |
The table helps choose a direction, but the final decision is made after the project is assessed. For some sites, it makes sense to retain individual working elements and rework only the problematic areas.
Custom website design
Custom website design is suitable for projects that require a unique structure, visual system, and set of components. Layouts are created based on real-world pages, user scenarios, and brand features, without being tied to a predetermined theme.
This approach is easier to scale when a website regularly acquires new sections and functionality. With a design system in place, new elements can be assembled according to agreed-upon rules while maintaining a consistent interface.
Template solution
A template reduces the design effort because the basic structure and some components already exist. This approach is suitable for websites with a small number of standard pages and limited user scenario requirements.
Limitations arise when significant changes to the structure or the addition of non-standard functionality are necessary. In these cases, the project gradually begins to adapt to the template's capabilities, so savings should be assessed alongside future modifications.
Redesign
A redesign is applied to a live website when the interface, structure, or specific user flows need to be updated. Before starting, it's a good idea to check which sections are already understood by the audience and which elements are causing problems.
Not every project requires a complete redesign. Sometimes, it's enough to redesign the homepage, commercial sections, mobile navigation, and forms while preserving some of the existing structure.
Development of responsive website design
Responsive website design is a good idea for any project where users access the site from smartphones and tablets. The mobile version is designed with smaller screens, touchscreen controls, and a different content viewing sequence in mind.
When developing a responsive website design, we check navigation, CTA placement, element sizes, and the behavior of tables, images, forms, and cards. Text blocks should also remain easy to read and not become overly long.
For complex interfaces, responsive behavior rules are defined in advance. This helps the developer understand when the number of columns changes, which elements are hidden or moved, how filters are reorganized, and which actions remain available on the initial screen.
Design for different types of websites
Website design depends on the site's purpose. Online store users interact with the catalog and shopping cart, corporate website visitors explore services and evidence of expertise, and landing pages typically lead to a single, primary action.
Therefore, a single composition isn't suitable for all project types. Before creating the visual component, the main scenarios, content volume, information update frequency, and development requirements are determined.
Landing Page Design
A landing page is built around a single offer or a limited group of related services. It's important to consistently present the offer, outline the terms, provide supporting evidence, address key objections, and lead the user to the desired action.
Design helps to establish visual accents and separate key semantic blocks. CTAs should appear in logical places on the page, rather than repeating after every short paragraph without any connection to the content.
Corporate website design
A corporate website typically contains services, company information, case studies, documents, news, contacts, and other sections. Designing this type of website requires a common template system to ensure that the different pages maintain a consistent visual language.
Particular attention is paid to navigation and the scale of the structure. If a company regularly adds new categories or publications, the interface must support content growth without constantly redesigning the menu and internal pages.
Online store design
In an online store, users interact with the catalog, filters, search, product cards, shopping cart, and checkout. Here, design is directly linked to the amount of data, product options, characteristics, and purchasing logic.
When designing, consider desktop and mobile, empty states, form errors, products missing some specifications, and other real-world situations. A beautiful layout of a perfect product card alone doesn't describe the entire store interface.
Service website design
A service website should quickly explain the company's specialization and help visitors move on to the right service line. Commercial pages typically include a description of the service, the process, terms, case studies, pricing or calculation principles, answers to questions, and a contact form.
Service website design should take into account SEO structure and internal linking between services. If each service is promoted separately, it requires a full-fledged landing page with its own content.
How is web design related to SEO and promotion?
Web design and website development influence how content is arranged and perceived on the page. SEO specialists need a clear heading structure, indexable main text, internal links, breadcrumbs, commercial sections, and space for FAQs if the user actually needs them.
If these elements aren't included in the prototype, you'll have to find space for them or redesign the pages after the design is completed. Therefore, it's best to consider SEO before approving layouts, especially for websites that plan to be promoted for a large number of commercial queries.
Page structure and content
H1–H3 headings should align with the content's logic, and the design should visually support this hierarchy. The main text shouldn't be hidden in awkward elements or placed in an area that's difficult to read on a mobile device.
Internal linking is also considered at the design stage. This can include topic cards, related service blocks, breadcrumbs, and contextual links within the text.
UX and user interaction with the page
Clear navigation helps visitors quickly find the service, category, or form they need. A well-designed page answers key questions as they browse and doesn't force users to search through several unrelated sections.
User behavior depends on many factors, so design can't be judged solely by its visual impact. For a commercial project, clarity of structure, accessibility of information, and predictability of the interface are essential.
What does the client receive after the work is completed?
The service delivers a set of approved mockups, ready for further development. The specific set of deliverables depends on the contract and the scale of the project, so the materials list is finalized before work begins.
Typically a project may include the following deliverables:
- layouts of the main and unique internal pages with a coordinated visual system;
- desktop, tablet and mobile versions for the resolutions provided by the project;
- UI Kit with buttons, fields, cards and other repeating components;
- states of interactive elements required for the correct implementation of the interface;
- graphic materials and assets that are used in approved layouts;
- Access to Figma and comments for project handoff to the technical team.
After handover, the developer must understand the interface structure and component usage rules. If technical limitations arise during implementation, changes are made based on the original page logic, rather than being introduced haphazardly during layout.
Speed and implementation of design
Website performance depends on the technical implementation, but certain decisions are made during the mockup stage. Large amounts of heavy graphics, background videos, complex effects, and animations increase the demands on the frontend and can complicate loading optimization.
When developing a web design, it's a good idea to consider the technical feasibility of components in advance. This helps preserve the visual concept without unnecessarily complicating the code and subsequently removing elements for the sake of speed.
What can design improve and what depends on development?
The designer can provide a rational amount of graphics, clear responsive states, and reusable components. They can also avoid solutions that require heavy effects without practical benefit to the user.
Actual loading speed depends on the implementation: image sizes, code, SSR, caching, server performance, and other technical factors. Therefore, estimating speed based solely on a Figma mockup is inaccurate.
Examples of developed designs
A case study should demonstrate the task and the solution adopted, so a screenshot of the homepage alone is not enough. It's helpful to show the initial requirements, structure, key screens, mobile version, and interface features developed for a specific project in a portfolio.
For each project, you can separately specify the niche, task, scope of work performed, and final set of layouts. If there are any confirmed metrics after launch, they should be included, along with the period and data source.
It's convenient to build a case card on a single template: client task, constraints, prototype, visual solution, responsive version, and the finished website. This format helps evaluate the progress of the work, rather than choosing a contractor based solely on individual, attractive screens.
If you need to develop a new interface or redesign an existing website, you first need to determine the structure, number of unique pages, and primary user scenarios. Based on this data, you can estimate the scope of work, timeframe, and cost of website design without relying on a fixed number of screens.
Seo-Gen can prepare a design for further development and immediately consider SEO structure, responsive versions, and technical implementation. To get started, provide information about the project, your current website, or planned structure, and specify the tasks the new interface should solve.
The next short step is to discuss the project structure and get an estimate of the scope of work.
We reply within one business day. No newsletters, no “just a reminder” calls.
He will look at the site himself instead of passing it to a manager.