{"id":4805,"date":"2018-05-17T17:49:30","date_gmt":"2018-05-17T14:49:30","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=4805"},"modified":"2023-07-24T11:40:44","modified_gmt":"2023-07-24T11:40:44","slug":"case-study-magic-co-creative-landing-page-design","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/case-study-magic-co-creative-landing-page-design\/","title":{"rendered":"Case Study: Magic.Co. Creative Landing Page Design"},"content":{"rendered":"

Making a landing page<\/a> interesting and catchy is as important as its being informative and clear. Today’s case study shares the\u00a0design flow of creating a bright landing page for a company with a diversity of services it offers to its clients. Tubik designer Ludmila Shevchenko shares now only the stages of the project but also useful tips for designers.<\/span><\/p>\n

\"web<\/p>\n

Project<\/span><\/h2>\n

Landing page for the agency that presents different services<\/span><\/p>\n

Process<\/span><\/h2>\n

The given design is a landing page of the agency website. The task was to create a unique, totally new vision of the service for the client. The website\u00a0had to stand out from similar ones, be noticeable and remarkable for a user. Inspired with the task, based on user research and market exploration, the designer decided to solve this task using color and shapes, searching for the perfect combination of these methods.<\/span><\/p>\n

Sketching and Wireframing<\/span><\/h2>\n

The work started from UX wireframing<\/a> when the straightforward structure has been chosen. Here the designer worked out the structure of several sections each devoted to diverse offers. Having each section as a new page, we gain the experience where user attention is concentrated specifically on the information of that section. Ludmila mentions that for her, even when the overall structure doesn\u2019t have a lot of elements, it\u2019s still easier to make the first steps by sketching on paper. The connection of the ideas and instant hand moves can bring to the new ways of representation and composition. While you\u2019re sketching your first vision, the new idea comes to your mind. So, she believes that sketching in the classic old-fashioned way is the best way to blow up creativity.\u00a0<\/span><\/p>\n

\"sketching<\/p>\n

\"sketching<\/p>\n

After shaping the idea on paper and structuring it in mind, she draws the UX in Sketch.<\/a> Depending on the task, the first explorations can be shown to the client whether in hand-drawn sketches or digital wireframes as it happened in this case.<\/p>\n

\"UX<\/p>\n

UI Design<\/span><\/h2>\n

Next, she started to work on UI design. As the first part of the page had only the company name, slogan, and arrow inviting to scroll, the idea was to create a bright and engaging background. The designer started to create an abstract combination of elements keeping in mind that it can be further animated. The first variants were strict figures like rectangles and squares but then she came up with the idea that rounded shapes would look more friendly. As a result, they symbolize the mystery behind the imaginary scenes that the user was invited to discover. Having a slight movement we added liveliness to the page.<\/span><\/p>\n

\"landing<\/p>\n

\"design<\/p>\n

The selection of color<\/a> is always\u00a0one of the most interesting parts of the design process. Keeping the vivid and attractive mood in mind, the designer started to search for the combination of the gradient as with their help the picture becomes lively. It\u2019s not easy to emphasize certain steps of color selection as it\u2019s a creative process with constant research. Overall,\u00a0she got 4 variants based on the specific color palette, and among them,\u00a0she chose the one that kept the harmonious combination of contrast and integrity. The final option had calmer gradient combinations in the middle, where company name and slogan were located, to keep readability at a high level. On the sides, the\u00a0contrast is\u00a0higher.<\/span><\/p>\n

Working with color especially in the project like this is fun and at the same time challenging task. As for the flow,\u00a0Ludmila says she can search for the gradients combinations on the separate page to look whether colors make a smooth color transition or on the contrary, there appears a third color in between. Also,\u00a0she keeps her attention on the colors themselves as they should be clean and vibrant enough.<\/span><\/p>\n

\"color<\/p>\n

Then, the waves continued to appear in all sections preserving the feeling of consistency and integrity. They were the reference to the abstract composition on the first page and the elements that add planning. The CTA buttons<\/a> support waves and gradients. The background<\/a> had photos that could be partially seen and with the help of transparent shading the information and CTA buttons stood out.<\/span><\/p>\n

\"landing<\/p>\n

Last but not least, the animation<\/a> was added to show the way all elements interact with each other and to represent the live view. It was a good example of teamwork<\/a>: different approaches and hints breathed life into the design with motion.<\/span><\/p>\n

\"magicco<\/p>\n

The designer tried different color combinations laying the gradients on the shape. During that phase,\u00a0she could change some colors in gradients, turn the gradation, and reduce the opacity. In such a process, it’s vital to mind the contrast and\u00a0check whether you need a high or a little contrast in certain layout zones. Another tip is to check whether the colors of gradients laying one next to another do not ruffle.<\/span><\/p>\n

Creating the curve, you’re recommended to try using as little anchor points as possible also checking that the curve moves smoothly in these points.<\/span><\/p>\n

\"landing<\/p>\n

As for the gradients in this project, the designer’s idea was to combine warm and cold shades in a way that in the final look the overall picture will keep the warm feeling at the same time being innovative, bright, and youthful. The main gradients were yellow-orange-red, pink-purple, vivid cyan-blue. Creating multiple gradients in one color scheme, she tried to change the shades of the main colors, increase or reduce their intensity and opacity. This way the brightest color combination was set and then there come the lighter gradients. Combining the gradients with totally different colors, she checked whether the edges had an appealing performance so that the page won\u2019t look over contrast<\/span>.<\/span><\/p>\n

\"UI<\/p>\n

Bonus: Designer’s Tips for Boosting Skills<\/span><\/h2>\n

The Tubik designers are often asked\u00a0to share some ideas and tips about boosting the professional level and productivity of the creative process. Ludmila shares the following:<\/span><\/p>\n