TK FOR DESIGNING A WEB STUDIO SITE DESIGN
Printed 2025-04-20
TASK It is necessary to radically update the site design. Make a more modern and, most importantly, high-tech website. Make something not just technological, but mega-super-stylish to justify your positioning. Castcom positions itself as a team that is able to work with high technology and can carry out a project of any complexity. GOAL 1. To convey to the end user that Castcom is not a web studio, it is a Digital Agency that provides a full range of Internet marketing services for a client: from creating a marketing strategy to developing turnkey software and advertising. 2. Inspire customer confidence. 3. Sell the service. Marketing tasks - Increase conversion - Readability of information. Moreover - all texts should be wanted to be read. To do this: o It is necessary to develop a modular site grid in such a way as to pre-determine the location of the text. And also to calculate the maximum number of textacters the user can present "for 1 time", if not diluted with pictures. o Choose a font: size, color. Carefully develop what font size should be applied for this or that heading. - Competent and interesting presentation of the portfolio. - Simplify adding work to the portfolio. On the old version of the site for laying out 1 project, we have to not only make a page for it, but also make an illustration, which overloads the designer. Therefore, it is necessary to develop a standard portfolio template where content managers will upload project layouts to jpeg. - Make the site more dynamic, lively. - Make a good responsive layout. Think over “rebuilding screens.” POSITIONING ON SCREEN For the first screen, a description of the type of company activity (positioning) is best suited. It is necessary to kill several birds with one stone on the first screen: positioning and technology / cool developers. We place services in second place. But they do not need to pay much attention - the more concise, the better. At best, use a combination of infographics and blocks with text to be hidden / collapsed. Large text blocks will be automatically cropped, and to open them completely, you need to click on the button. Limited height blocks are especially convenient for mobile devices. COMPLETED WORKS / PORTFOLIO To display projects, implement a complex grid, where images can be of various sizes, and the grid itself is rebuilt, adapting to different screens. Accordingly, some projects have two options for images that can be uploaded. Ajax technology is used to load new portfolio items. CUSTOMER REVIEWS After the projects, it is necessary to arrange customer reviews. Fix the height of the block with the review and add the "read completely" button if the review is long. Large text blocks are automatically cropped, and to open them completely, you need to click on the button. Limited height blocks are especially convenient for mobile devices. Arrange our customers logos below. PRESENTATION It is necessary to show the presentation in a very organic way, to do it as accurately as possible and not attract too much attention. It is possible to make some kind of intuitive picture a stub, when you click on it, the presentation opens in full screen. For example, as here the creators made a stub for the video: redcollar.ru TEAM NEWS To implement a separate block with a photo or image for each team member, each team member should have a name and job description. ABOUT THE COMPANY All text information is located on the background of the image processed in the style of the site. ANIMATION AND EFFECTS ON THE SITE - All large images on the site must be loaded with scripts depending on the screen width. This is necessary to save traffic on mobile devices. - Disable all complex effects and animations on mobile devices so as not to load a weak GPU. - Also use a script from the Financial Times that removes a delay of 300 ms when you click on items on iPhone-s and old devices based on android. - Most effects need to be tied to scrolling. Redirects and the correct 404 page. It is necessary to save all the URLs that are on the project. Or request a list of urls that require 301 redirects. And pre-embed them in the server settings. This will avoid a lot of errors when starting a site with new page addresses. DESIGN REQUIREMENTS 1. Responsive web design 2. Flat design 3. Vertical scrolling 4. Boring typography for highlighting headlines. 5. Modular designs 6. CSS3 effects 7. Fixed navigation of the top menu 8. Widescreen design 9. Downloadable content 10. Interactive infographics 11. Side folding menu (on the inner pages) 12. Simple color schemes. Use in the design of one, two or three pure simple monochrome colors in combination with classic black or white for other design elements. A kind of color variation of minimalism. Requirements for the feedback form: - Title: Order a call - Alignment of the form in the center - When the form is called, the main background of the site is darkened. - The form has the following active elements: o Close cross-o o Call me button - Fields to fill in: o Name o Phone Individual requirements for some elements of the site: - Draw the preloader by type like this: www.deleteagency. com / services. Those. when loading the page, a preloader drawn based on the Castcom logo should appear. - When selecting text on the site - come up with some kind of highlight. For example, here: www.nimax.ru - www.trionndesign.com sergiopedercini.com http://www.alln1hob.com/ The top menu is right alignment. The menu is minimized to an icon. When hovering deployed in a translucent tape. - Consider placing the logo in the center. For example, here: elfsight.ru - http://www.alienationdigital.co.uk/inside-alienation/Page-2.html - a cool paginator. There, pay attention to the fact that each news has a picture, if there is no picture, then display a stub. Draw a blank. Designs that you like: Site: Pros ABOUT US www.utlab.ru Submission of information: - Project team - The main factors affecting the cost of SEO - How we do projects funcfunc.ru Section "About us" - how we work. Porfolio - project submission. http://www.fish-art.ru/#/slide4 - Availability of photos of team members with job descriptions. http://welovescience.ru/#scienceagency - Submission of information about the company. - Availability of the team photo http://www.aimbulance.com/en/about/ - Breakdown of text into blocks. About the company, about us, our awards. http://serenity.su/about/ - Submission of first-person information - Availability of photos - Block with awards http://le-dantu.ru/#1 - Block Our team. An interesting presentation of each team member. CONTACTS grape.ru/contacts Contact page http://1optima.ru/contacts/ - Contact page - Map to the entire page, as a substrate. - The presence of a feedback form http://artw.ru/company/contacts/ - How to get a description. The presence of a block with a description of different ways to get there. GENERAL PERCEPTION OF SITES http://tochka-ru.ru/ http://www.akaru.fr/ - A very technological site, the presence of geometric animation. Custom design. http://www.nimax.ru/ - Original two-color adaptive design http://redcollar.ru/ - Very good graphics. - Bright design http://droids-digital.com/ - General style of the site - Callback form with a choice of subject line. http://www.axiomadev.ru/ - Blog - List of articles - Section About the company http://www.mstagency.ru/ - Availability of infographics and portfolio submission by years. - http://www.mstagency.ru/portfolio/stachka/ - for example, in this style to make out news http://www.deleteagency.com/ http://www.alienationdigital.co.uk/ - List of articles, design like newspapers http://www.propcom.co.uk/ - A very stylish site. - Consider using the right or left similar menu for the internal pages http://www.ironpaper.com/ - Top menu and pop-up submenus. - The general design style is very close to what we want to get as a result http://www.astramg.ru/ - Submission of text and information - Pictograms. PORTFOLIO http://www.akaru.fr/fr/references/ - Portfolio. Full page, page live. With the movement of the mouse moves. When you hover over each block, a hint appears. http://suprematika.ru/portfolio/category/web - Portfolio submission. - Ability to view the portfolio using the navigation arrows: http://take.ms/zne8c - General portfolio list http://marty.com/puma - an interesting portfolio with the work done http://shibui.me/ - an interesting left menu - animation on the landing page. - portfolio viewing animation - Horizontal scrolling interesting - Feedback form http://lipka.ru/portfolio/ - Presence of the drawn original graphics in the portfolio http://atelier.ua/web/ - Presence of pictograms for each portfolio category or menu item. http://www.laurab.net/ - animation when hovering over an element. A site with an interesting presentation of the portfolio. Interesting pictograms for viewing list, tile and pagination. http://wistech.biz/#portfolio - portfolio animation WORKING PROCESS AND DESCRIPTION OF SERVICES http://www.itech-group.ru/services/index - Description of the list of services. Pictograms http://renart.ru/ - Description of the process work. The presence of stages and animations. http://www.jbidigital.co.uk/ - Change the cursor on the site - Description of services, for example here: http://www.jbidigital.co.uk/we-design/ - List of news or articles : http: // www.jbidigital.co.uk/our-two-cents/ http://www.pirogov.ru/services/sayty/ - Submission of a large amount of text. Readability - To structure the list of services. VACANCIES http://ony.ru/agency - Block with vacancies http://www.traffic-isobar.ru/careers - Page with a list of vacancies
