Site layout and redesign Workflow

Designing of the layout is a process of creating a site using special languages: HTML is the language that is responsible for the structure and sequence of the content displayed on the page; CSS — language of styles — defines the site's appearance (fonts, color of characters and background, element sizes, background images, element positioning, animation effects and much more); JavaScript language breathes life into the site, making it interactive and functional (slider, complex beautiful galleries, etc.).

Layout of high quality should meet the following requirements:

  1. The code must be optimized. The extra code reduces a download speed of the site. Bad layout with poor-quality code loads the site, which negatively affects a loading speed and a correct display of pages.
  2. Adaptive layout allows you to display a content on devices with different screens as convenient and easy to read as possible.
  3. Cross-browser compatibility. The display and operation of the site in all popular browsers should be identical. Identity means the absence of layout errors and the ability to display material with the same degree of readability.
  4. Validity. The correctness of writing and using HTML code must meet the standards. Code validity is very important for cross-browser compatibility, since each browser has its own HTML code error correction mechanism.
  5. Semantic layout. Creating of web pages using special semantic HTML tags that display the clear role of the content on the page. Semantic tags are additional information for robots/indexers (for example, Google), which helps them to better understand the structure of the site, the degree of importance of the content, what content is used for navigation, contact information and so on. The correct semantic layout is an integral part of the SEO (Search Engine Optimization).
  6. Micro-level markup is a markup of data on a page and site that helps the search bot to better recognize the content on your site (for example, it is necessary to place in the product card of an online store the product price, its name, description, image, reviews and rating).

    Micro-level markup: allows improving the appearance of the site in search results, makes snippets more beautiful, informative and interesting for Internet users (snippet is a small information block that contains a brief description of the page, based on the user's request); links to your site, that were shared on social networks, transform as well, become more informative and attractive for users, thus increasing the amount of site visitors: the corresponding picture, page title, author, etc. are generated.

    Consequently, micro-level markup allows not only the search bot to better understand the information on your site, but also contributes to an increase in the number of visitors to the site, in traffic, CTR (click-through rate) of your site and, as a result, an acceleration in online store sales.

In this regard, the layout is one of the main stages of creating a site!

Website redesign

Reasons and necessity to redesign the site

Time flows by and everything evolves, changes and accordingly becomes obsolete. Especially when it comes to the field of information technology and the Internet. Competition, the desire to be better, to keep up with others pushes the Internet and its users to develop new technologies!

In connection with this, your website needs to be maintained and developed. In a competitive environment, it should be technologically advanced, understandable, convenient and attractive for new users and customers, and most importantly — for search engines, as it is due to them, that users can find the necessary information as quickly as possible. All the companies that keep up with the times, every 2 — 5 years redesign their sites.

Site redesign is an upgrade that involves changes to the visual part of the site, without affecting its core and database.

The main goals of the redesign are to display the current activities of the company, to improve and update the product's self-presentation, to enhance interaction with a user, a search engine, to stand out against competitors.

Redesign can be:

  • Visual. Updating of the site color scheme, replacing images with better and more modern ones, adding of animation effects (as well as removing old, disruptive and irrelevant ones). In fact, the design will not change, but the site will look modern and attractive against the background of competitors.
  • Functional. Changes aimed at optimizing information retrieval by a visitor on the site — editing of navigation, menu items, headings, filters, functionality adding and changing (replacing of a basket, slider and other functional blocks). Modernization of the site for optimal display on phones and tablets — the introduction of adaptive layout.
  • Technical. Improvement of software code, SEO. Actions aimed at increasing of the page loading speed and leading out of the site to the first positions of search engines.
  • Complete. Includes visual, functional and technical.

When it is necessary to redesign the site:

  • Search engine optimization data indicates a low speed of page loading.
  • The transition to a new content management system (CMS).
  • Analysis data shows a decrease in conversion (the site has become less interesting to visitors, and they spend less time on it).
  • The site looks outdated, loses to competitors, there are visible page layout errors due to a change in Internet standards.
  • Expansion and change of the company activity area, product updating.
  • The company's entry into a new market, change or expansion of the target audience.
  • The emergence of new products that need to be presented on the site in a special way.

What is included in the redesign?

Depending on the tasks set by the customer, site upgrades may include:

  • Logo redesign (performed if the logo looks outdated, inconvenient to use or when a product or company is changed).
  • Change of design, fonts, style, colors (following modern trends, individual eye-catching design, design, corresponding to the new logo).
  • Adding/change of the content (removal of the obsolete categories, articles and sections, replacing of images with more relevant, modern and of high-quality; text content update). Removal of the irrelevant content allows speeding up page loading, which is welcomed by search engines.
  • The implementation of animated effects and trend visualization (allows creating a sense of interaction and, if used correctly, has a good effect on conversion).
  • Elaboration and cleaning of HTML-code, application of modern layout technologies (important for search engine promotion).
  • Improving in the site comfort for users (user-friendly menu, site navigation, search filters, the ability to navigate intuitively).

Stages of work on the redesign

  1. Concept development. At this stage the sites of competitors are analyzed. The analysis of the site itself is carried out, it is decided, which elements on the site need to be updated, which ones should be deleted. The functional part is being worked out. A plan of changes aimed at site improvement is made, so that it could become the most convenient and understandable to users.
  2. Working out of the redesign and related activities.
  3. Verification and testing. The site is tested after the changes, it is checked for efficiency, convenience and error presence.

Our studio will gladly take on a new project or help your old site to become the most attractive, comfortable and modern again!