Theater "DGU" - website of the theater with repertoire, news
Web Programming
Developed a modern website for the "DGU" theater in Dnipro — focusing on premium visuals, convenient navigation, quick access to the repertoire, news, information about the theater, and the creative team. The project combines the aesthetics of the theatrical space with a practical website structure that is easy to administer and scale.
Project Objectives
The main goal was to create a website that functions not only as a business card for the theater but as a full-fledged cultural platform:
- presents the current repertoire;
- allows quick access to performance details;
- publishes news and events of the theater;
- introduces visitors to the history, mission, and team;
- has a clear structure for further development;
- optimized for SEO and high speed.
Work Stages
1. UI/UX and Design in Figma
In the first stage, a design concept was created in Figma: the structure of the main page, visual system, grid, typography, performance cards, news blocks, "About the Theater" section, team, and footer.
-
Particular attention was paid to the atmosphere of the site: a light minimalist background, large theatrical photos, a restrained color palette, subtle typography, and enough "air" between blocks.
2. Prototyping with Figma Make
To speed up the work and verify the structure of the pages, Figma Make was used. This helped quickly translate the design idea into a working prototype, test the composition of blocks, and prepare the foundation for further layout.
3. Layout and Frontend
After the design was approved, responsive layout of the pages was completed. The site works correctly on desktop, tablet, and mobile, maintaining the quality of composition and user convenience.
Special emphasis was placed on:
- careful adaptation of large photos;
- readability of texts;
- convenient repertoire cards;
- quick transitions to details;
- clean HTML/CSS structure;
- optimization of the interface without unnecessary visual overloads.
4. GitHub and Version Control
Development was conducted through GitHub, allowing for change control, safe edits, maintaining development history, and supporting a structured workflow.
5. Integration with WordPress
The final implementation was transferred to WordPress. The site received a convenient administrative part where one can manage the repertoire, news, pages, photos, and main content without involving a developer for every change.
-
A structure was prepared for the project that can be scaled: adding new performances, pages, news categories, cultural events, and other sections.
SEO and Performance
The site was optimized for search engines and fast loading. Basic SEO preparation was conducted: correct header structure, metadata, clear content hierarchy, image optimization, and technical preparation of pages for indexing.
Performance optimization was also performed:
- image optimization;
- minimization of unnecessary scripts;
- clean page structure;
- fast loading of key sections;
- adaptation to PageSpeed metrics.
As a result, the site achieves 90+ speed points according to PageSpeed Insights, which is important for both SEO and user convenience.
Technologies
Design / UI: Figma, Figma Make
Frontend: HTML, CSS, JavaScript, responsive layout
CMS: WordPress, ACF
Version Control: Git, GitHub
Optimization: SEO optimization, PageSpeed, image optimization, technical performance optimization
Result
As a result, a modern, fast, and visually cohesive website for the theater was created, combining presentation function, poster, news platform, and convenient content management system. The project has a clean structure, high speed, SEO preparation, and the potential for further development without a complete redesign.
#WordPress #Figma #FigmaMake #WebDesign #Frontend #UIUX #TheatreWebsite #SEO #PageSpeed #GitHub #ResponsiveDesign #WordPressDevelopment #Portfolio #WebDevelopment
Project Objectives
The main goal was to create a website that functions not only as a business card for the theater but as a full-fledged cultural platform:
- presents the current repertoire;
- allows quick access to performance details;
- publishes news and events of the theater;
- introduces visitors to the history, mission, and team;
- has a clear structure for further development;
- optimized for SEO and high speed.
Work Stages
1. UI/UX and Design in Figma
In the first stage, a design concept was created in Figma: the structure of the main page, visual system, grid, typography, performance cards, news blocks, "About the Theater" section, team, and footer.
-
Particular attention was paid to the atmosphere of the site: a light minimalist background, large theatrical photos, a restrained color palette, subtle typography, and enough "air" between blocks.
2. Prototyping with Figma Make
To speed up the work and verify the structure of the pages, Figma Make was used. This helped quickly translate the design idea into a working prototype, test the composition of blocks, and prepare the foundation for further layout.
3. Layout and Frontend
After the design was approved, responsive layout of the pages was completed. The site works correctly on desktop, tablet, and mobile, maintaining the quality of composition and user convenience.
Special emphasis was placed on:
- careful adaptation of large photos;
- readability of texts;
- convenient repertoire cards;
- quick transitions to details;
- clean HTML/CSS structure;
- optimization of the interface without unnecessary visual overloads.
4. GitHub and Version Control
Development was conducted through GitHub, allowing for change control, safe edits, maintaining development history, and supporting a structured workflow.
5. Integration with WordPress
The final implementation was transferred to WordPress. The site received a convenient administrative part where one can manage the repertoire, news, pages, photos, and main content without involving a developer for every change.
-
A structure was prepared for the project that can be scaled: adding new performances, pages, news categories, cultural events, and other sections.
SEO and Performance
The site was optimized for search engines and fast loading. Basic SEO preparation was conducted: correct header structure, metadata, clear content hierarchy, image optimization, and technical preparation of pages for indexing.
Performance optimization was also performed:
- image optimization;
- minimization of unnecessary scripts;
- clean page structure;
- fast loading of key sections;
- adaptation to PageSpeed metrics.
As a result, the site achieves 90+ speed points according to PageSpeed Insights, which is important for both SEO and user convenience.
Technologies
Design / UI: Figma, Figma Make
Frontend: HTML, CSS, JavaScript, responsive layout
CMS: WordPress, ACF
Version Control: Git, GitHub
Optimization: SEO optimization, PageSpeed, image optimization, technical performance optimization
Result
As a result, a modern, fast, and visually cohesive website for the theater was created, combining presentation function, poster, news platform, and convenient content management system. The project has a clean structure, high speed, SEO preparation, and the potential for further development without a complete redesign.
#WordPress #Figma #FigmaMake #WebDesign #Frontend #UIUX #TheatreWebsite #SEO #PageSpeed #GitHub #ResponsiveDesign #WordPressDevelopment #Portfolio #WebDevelopment