{"id":2278,"date":"2023-02-11T23:30:00","date_gmt":"2023-02-11T16:30:00","guid":{"rendered":"https:\/\/lazarewww.ru\/cases\/spectr-association\/"},"modified":"2023-02-11T23:30:00","modified_gmt":"2023-02-11T16:30:00","slug":"spectr","status":"publish","type":"isotope","link":"https:\/\/lazarewww.ru\/en\/cases\/spectr\/","title":{"rendered":"Spectr Association"},"content":{"rendered":"<div class=\"wp-bootstrap-blocks-row row\">\n\t\n\n<div class=\"col-12 col-lg-3\">\n\t\t\t\n\n<h2 class=\"wp-block-heading with_decor\" id=\"vvedenie\">Introduction:<\/h2>\n\n\t<\/div>\n\n\n\n<div class=\"col-12 col-lg-5\">\n\t\t\t<div class=\"p-2\">\n\t\t\t\n\n<p class=\"wp-block-paragraph\">The client is the Spectr Association, an alliance of parent-run non-profit organisations in the Novosibirsk region that help people with autism spectrum disorders.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The organisation&#8217;s official site is an information portal: everything you need to know about the association and its work, plus a detailed handbook for the parents of people with ASD.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">All the content was prepared by the association&#8217;s team; I built the site itself.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n<div class=\"wp-bootstrap-blocks-row row case-media case-media--full\">\n\t\n\n<div class=\"col-12\">\n\t\t\t\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"756\" src=\"\/wp-content\/uploads\/2026\/08\/spectr-site.jpg\" alt=\"The Spectr Association site: the first screen with the name of the alliance and a description of its work\" class=\"wp-image-1707\" srcset=\"https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-site.jpg 1600w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-site-300x142.jpg 300w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-site-1024x484.jpg 1024w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-site-768x363.jpg 768w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-site-1536x726.jpg 1536w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-site-900x425.jpg 900w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><figcaption class=\"wp-element-caption\">The home page: about the association and its work.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n\n<hr class=\"hr-dashed opacity-50 my-5\">\n\n\n<div class=\"wp-bootstrap-blocks-row row\">\n\t\n\n<div class=\"col-12 col-lg-3\">\n\t\t\t\n\n<h2 class=\"wp-block-heading with_decor\" id=\"hod-raboty\">How it went:<\/h2>\n\n\t<\/div>\n\n\n\n<div class=\"col-12 col-lg-5\">\n\t\t\t<div class=\"p-2\">\n\t\t\t\n\n<p class=\"wp-block-paragraph\">By the time they came to me, the Spectr team already had a complete mockup of the site they wanted to bring to life: at first they had planned to build it themselves on Tilda. Later it became clear that a site builder would not be enough to do the project properly, and the organisation came to me.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Anna from the association handed the mockup over \u2014 clear enough that it raised no questions.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n<div class=\"wp-bootstrap-blocks-row row case-text\">\n\t\n\n<div class=\"col-12 col-lg-6\">\n\t\t\t<div class=\"p-2\">\n\t\t\t\n\n<p class=\"wp-block-paragraph\">The hard part was not the markup, it was the volume: the parents&#8217; handbook is a great deal of text, and it had to be laid out so that nobody drowns in it. A parent arrives with a specific question and should find the answer, not read the whole thing end to end.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n\n<section class=\"case-showcase case-native case-showcase--laptop case-showcase--w-wide\">\n\t<figure class=\"case-showcase__figure\"\n\t\tstyle=\"--shot-x:13%;--shot-y:5.4161%;--shot-w:74.1667%;--shot-h:73.4478%;--shot-rx:0%;--shot-ry:0%;--shot-ar:1.5852;--shot-travel:93.506%;--shot-full:25.9s;--shot-duration:var(--shot-full);--shot-p:0;--shot-ui:0\"\n\t\tdata-case-showcase\n\t\tdata-shot-duration=\"25.9\"\n\t\tdata-shot-screens=\"14.3987\"\n\t\tdata-shot-travel=\"93.506\">\n\n\t\t<div class=\"case-showcase__frame\">\n\t\t\t\t\t\t<img class=\"case-showcase__device\"\n\t\t\t\tsrc=\"https:\/\/lazarewww.ru\/wp-content\/plugins\/easy-acf-blocks-main\/acf-blocks\/case-showcase\/img\/laptop.png\"\n\t\t\t\talt=\"\"\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\twidth=\"1200\"\n\t\t\t\theight=\"757\"\n\t\t\t\tdecoding=\"async\">\n\n\t\t\t<div class=\"case-showcase__screen\"\n\t\t\t\tid=\"shot-block_6b1a7f19cf001\"\n\t\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\trole=\"group\"\n\t\t\t\taria-label=\"\u042d\u043a\u0440\u0430\u043d: \u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0430\u0439\u0442\u0430 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438 \u00ab\u0421\u043f\u0435\u043a\u0442\u0440\u00bb \u0446\u0435\u043b\u0438\u043a\u043e\u043c: \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u043f\u0430\u043c\u044f\u0442\u043a\u0438 \u0434\u043b\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u043e\u0442 \u0448\u0430\u043f\u043a\u0438 \u0434\u043e \u043f\u043e\u0434\u0432\u0430\u043b\u0430. \u0421\u0442\u0440\u0435\u043b\u043a\u0438 \u2014 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0430, \u043f\u0440\u043e\u0431\u0435\u043b \u2014 \u043f\u0443\u0441\u043a \u0438 \u043f\u0430\u0443\u0437\u0430\"\n\t\t\t\tdata-case-showcase-screen\n\t\t\t\t>\n\t\t\t\t<img class=\"case-showcase__shot\"\n\t\t\t\t\tsrc=\"https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-fullpage-long.jpg\"\n\t\t\t\t\tsrcset=\"https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-fullpage-long-900x8658.jpg 900w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-fullpage-long.jpg 1600w\"\n\t\t\t\t\tsizes=\"auto, (min-width: 992px) 900px, 90vw\"\n\t\t\t\t\twidth=\"1600\"\n\t\t\t\t\theight=\"15392\"\n\t\t\t\t\talt=\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0430\u0439\u0442\u0430 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438 \u00ab\u0421\u043f\u0435\u043a\u0442\u0440\u00bb \u0446\u0435\u043b\u0438\u043a\u043e\u043c: \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u043f\u0430\u043c\u044f\u0442\u043a\u0438 \u0434\u043b\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u043e\u0442 \u0448\u0430\u043f\u043a\u0438 \u0434\u043e \u043f\u043e\u0434\u0432\u0430\u043b\u0430\"\n\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\tdecoding=\"async\">\n\t\t\t<\/div>\n\t\t<\/div>\n\n\t\t\t\t\t\t\t\t<div class=\"case-showcase__bar\" data-case-showcase-bar>\n\t\t\t\t<button type=\"button\" class=\"case-showcase__btn\" data-shot-dir=\"up\"\n\t\t\t\t\taria-label=\"\u041f\u0440\u043e\u043c\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0432\u0435\u0440\u0445\" aria-pressed=\"false\" aria-controls=\"shot-block_6b1a7f19cf001\" disabled>\n\t\t\t\t\t<i class=\"fas fa-long-arrow-alt-up\" aria-hidden=\"true\"><\/i>\n\t\t\t\t<\/button>\n\n\t\t\t\t<button type=\"button\" class=\"case-showcase__btn\" data-shot-dir=\"down\"\n\t\t\t\t\taria-label=\"\u041f\u0440\u043e\u043c\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0438\u0437\" aria-pressed=\"false\" aria-controls=\"shot-block_6b1a7f19cf001\">\n\t\t\t\t\t<i class=\"fas fa-long-arrow-alt-down\" aria-hidden=\"true\"><\/i>\n\t\t\t\t<\/button>\n\n\t\t\t\t\t\t\t\t<input type=\"range\" class=\"case-showcase__range\" data-shot-range\n\t\t\t\t\tmin=\"0\" max=\"1000\" step=\"1\" value=\"0\"\n\t\t\t\t\taria-label=\"\u041f\u043e\u0437\u0438\u0446\u0438\u044f \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u0430\" aria-controls=\"shot-block_6b1a7f19cf001\">\n\n\t\t\t\t\t\t\t\t\t<button type=\"button\" class=\"case-showcase__btn case-showcase__btn--fs\"\n\t\t\t\t\t\tdata-bs-toggle=\"modal\" data-bs-target=\"#shot-block_6b1a7f19cf001-modal\"\n\t\t\t\t\t\taria-label=\"\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u043d\u0430 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d\">\n\t\t\t\t\t\t<i class=\"fas fa-expand\" aria-hidden=\"true\"><\/i>\n\t\t\t\t\t<\/button>\n\t\t\t\t\t\t\t<\/div>\n\t\t\n\t\t\t\t\t<p class=\"case-showcase__hint\">Hover or tap and the site scrolls. \u26f6 \u2014 open full screen<\/p>\n\t\t\n\t\t\t\t\t<figcaption class=\"case-showcase__caption\">The whole page: the entire handbook on a single page.<\/figcaption>\n\t\t\t<\/figure>\n<\/section>\n\n\t\t<div class=\"modal fade case-showcase-modal\" id=\"shot-block_6b1a7f19cf001-modal\" tabindex=\"-1\"\n\t\taria-labelledby=\"shot-block_6b1a7f19cf001-modal-title\" aria-hidden=\"true\"\n\t\tdata-case-showcase-modal-for=\"shot-block_6b1a7f19cf001\">\n\t\t<div class=\"modal-dialog modal-fullscreen\">\n\t\t\t<div class=\"modal-content\">\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<h2 class=\"modal-title case-showcase-modal__title\" id=\"shot-block_6b1a7f19cf001-modal-title\">The whole page: the entire handbook on a single page.<\/h2>\n\t\t\t\t\t<button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"\u0417\u0430\u043a\u0440\u044b\u0442\u044c\"><\/button>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"modal-body\" data-case-showcase-fs>\n\t\t\t\t\t<img class=\"case-showcase__full\"\n\t\t\t\t\t\tsrc=\"https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-fullpage-long.jpg\"\n\t\t\t\t\t\twidth=\"1600\"\n\t\t\t\t\t\theight=\"15392\"\n\t\t\t\t\t\talt=\"\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0430\u0439\u0442\u0430 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438 \u00ab\u0421\u043f\u0435\u043a\u0442\u0440\u00bb \u0446\u0435\u043b\u0438\u043a\u043e\u043c: \u0440\u0430\u0437\u0434\u0435\u043b\u044b \u043f\u0430\u043c\u044f\u0442\u043a\u0438 \u0434\u043b\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u043e\u0442 \u0448\u0430\u043f\u043a\u0438 \u0434\u043e \u043f\u043e\u0434\u0432\u0430\u043b\u0430\"\n\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\tdecoding=\"async\">\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\n\n<div class=\"wp-bootstrap-blocks-row row case-text\">\n\t\n\n<div class=\"col-12 col-lg-6\">\n\t\t\t<div class=\"p-2\">\n\t\t\t\n\n<p class=\"wp-block-paragraph\">So I laid the material out in expandable modal windows: the page shows the structure \u2014 the sections and their headings \u2014 and the reader opens the one they need. That way the whole handbook fits on a single page, stays easy to take in and works as a reference list rather than one endless wall of text.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n<div class=\"wp-bootstrap-blocks-row row case-media\">\n\t\n\n<div class=\"col-12\">\n\t\t\t\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1070\" height=\"644\" src=\"\/wp-content\/uploads\/2026\/08\/spectr-modals.jpg\" alt=\"Expandable blocks on the Spectr Association site: a handbook section opens in a modal window\" class=\"wp-image-1709\" srcset=\"https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-modals.jpg 1070w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-modals-300x181.jpg 300w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-modals-1024x616.jpg 1024w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-modals-768x462.jpg 768w, https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-modals-900x542.jpg 900w\" sizes=\"auto, (max-width: 1070px) 100vw, 1070px\" \/><figcaption class=\"wp-element-caption\">Expandable blocks: the sections are visible on the page, and the one you need opens on click.<\/figcaption><\/figure>\n\n\t<\/div>\n\n<\/div>\n\n\n<div class=\"wp-bootstrap-blocks-row row case-text\">\n\t\n\n<div class=\"col-12 col-lg-6\">\n\t\t\t<div class=\"p-2\">\n\t\t\t\n\n<p class=\"wp-block-paragraph\">I kept the design restrained \u2014 in keeping with the standing of the organisation \u2014 but not bureaucratic: it is parents who come here, not inspectors. The main colours came from the logo.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n\n<hr class=\"hr-dashed opacity-50 my-5\">\n\n\n<div class=\"wp-bootstrap-blocks-row row\">\n\t\n\n<div class=\"col-12 col-lg-3\">\n\t\t\t\n\n<h2 class=\"wp-block-heading with_decor\" id=\"rezultat\">Result:<\/h2>\n\n\t<\/div>\n\n\n\n<div class=\"col-12 col-lg-5\">\n\t\t\t<div class=\"p-2\">\n\t\t\t\n\n<p class=\"wp-block-paragraph\">The parents&#8217; handbook is gathered in one place and works as a reference list: you arrive with a specific question and find the section you need instead of reading everything. Next to it \u2014 information about the association and its work.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>The site is now developed further and supported by the Spectr Association&#8217;s own team.<\/strong><\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n<\/div>\n\n\n<div class=\"wp-bootstrap-blocks-row row case-cta\">\n\t\n\n<div class=\"col-12\">\n\t\t\t\n\n<a class=\"btn btn-outline-primary btn-lg\" href=\"https:\/\/spectrnsk.ru\/\" target=\"_blank\" rel=\"noopener\">Visit the site!<\/a>\n\n\n\n<p class=\"wp-block-paragraph\">For anyone interested in the Spectr Association site.<\/p>\n\n\t<\/div>\n\n<\/div>\n\n\n\n<hr class=\"hr-dashed opacity-50 my-5\">\n\n\n\n\n<section id=\"review\" class=\"pt-3 pb-4 pb-md-5\">\n\t<div class=\"container\">\n\t\t<div class=\"row justify-content-center\">\n\t\t\t<div class=\"col-sm-9 col-md-8 col-xl-6 text-center\">\n\t\t\t\t<h2 class=\"mb-0\">Client feedback:<\/h2>\n\t\t\t\t<p class=\"mb-3 text-primary fw-bold\"><\/p>\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"container\">\n\t\t\t<div class=\"row justify-content-center align-items-center\">\n\n\t\t\t\t\t\t\t\t<div class=\"col-lg-5\">\n\t\t\t\t\t<div class=\"mb-3 mb-lg-0 px-lg-3 d-flex flex-column justify-content-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/lazarewww.ru\/wp-content\/uploads\/2026\/08\/spectr-anna-sorokina-600x600.jpg\" alt=\"\u0410\u043d\u043d\u0430 \u0421\u043e\u0440\u043e\u043a\u0438\u043d\u0430 \u2014 \u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440 \u0441\u0430\u0439\u0442\u0430 \u0410\u0441\u0441\u043e\u0446\u0438\u0430\u0446\u0438\u0438 \u00ab\u0421\u043f\u0435\u043a\u0442\u0440\u00bb, \u0430\u0432\u0442\u043e\u0440 \u043e\u0442\u0437\u044b\u0432\u0430 \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u0441\u0430\u0439\u0442\u043e\u043c\" class=\"img-fluid rounded-circle simple-review-image mx-auto\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"pt-2 text-center\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"simple-review-author\">\n\t\t\t\t\t\t\t\t<h3 class=\"mb-0\" style=\"text-align: center;\">Anna Sorokina<\/h3>\r\n<p class=\"mb-0\" style=\"text-align: center;\">Site administrator, Spectr Association<\/p>\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<div class=\"col-lg-7 ps-3 ps-lg-5 bootstrap-simple-review-text\">\n\t\t\t\t\t<p><em>We came to Pavel when our Spectr Association needed a site of its own. Pavel got to grips with the brief easily and took every wish into account. He did not argue, he offered ideas for making the site better \u2014 we discussed the design and the structure calmly.<\/em><\/p>\n<p><em>He waited patiently while we supplied all the material for the sections. Most important of all \u2014 the site was completely ready exactly on the agreed date! Pavel also sent detailed instructions on how to use it, and promised to stay in touch if we needed help.<\/em><\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\n\t<\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>The site of an alliance of parent-run non-profits helping people with autism across the Novosibirsk region: information about the association and a handbook for parents.<\/p>\n","protected":false},"featured_media":1710,"template":"","isotope_tag":[104],"class_list":["post-2278","isotope","type-isotope","status-publish","has-post-thumbnail","hentry","isotope_category-other-sites-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/isotope\/2278","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/isotope"}],"about":[{"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/types\/isotope"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lazarewww.ru\/?rest_route=\/wp\/v2\/media\/1710"}],"wp:attachment":[{"href":"https:\/\/lazarewww.ru\/?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2278"}],"wp:term":[{"taxonomy":"isotope_tag","embeddable":true,"href":"https:\/\/lazarewww.ru\/?rest_route=%2Fwp%2Fv2%2Fisotope_tag&post=2278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}