{"id":16157,"date":"2022-12-06T17:16:08","date_gmt":"2022-12-06T17:16:08","guid":{"rendered":"https:\/\/getdevdone.com\/blog\/?p=16157"},"modified":"2024-05-14T10:15:16","modified_gmt":"2024-05-14T10:15:16","slug":"how-we-redeveloped-website-for-agency","status":"publish","type":"post","link":"https:\/\/getdevdone.com\/blog\/how-we-redeveloped-website-for-agency.html","title":{"rendered":"How We Redeveloped a Media &amp; Design Agency&#8217;s Website"},"content":{"rendered":"\n<p>Working with agencies can be extremely challenging. They always have strict requirements regarding the quality and timely delivery of services.&nbsp;<\/p>\n\n\n\n<p>Over the years, though, we have learned to give agencies the exact results they expect. We love working with agencies and the case we discuss in this post is a good example of a successful cooperation with one of them.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Client&nbsp;<\/h2>\n\n\n\n<p><a href=\"https:\/\/gdc-design.de\/\" target=\"_blank\" rel=\"noopener\" title=\"\">GDC Media &amp; Design<\/a> is an award-winning full-service design agency from Nuremberg, Germany. It provides a broad range of design services including UX design, digital design, print design, branding, and more.&nbsp;<\/p>\n\n\n\n<p>Among the awards that GDC Media &amp; Design has recently received are the \u201cGerman Brand Award &#8217;22 Special\u201d,&nbsp; the \u201cGerman Design Award Special 2022\u201d, and others. The long list of their successful projects features Hive, Tadano, Sinascope, Geiler Schwede, and Mioty.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Challenge&nbsp;<\/h2>\n\n\n\n<p>GDC Media &amp; Design <strong>has an in-house team of highly professional web developers and designers with years of experience under their belts<\/strong>. However, the agency sometimes finds itself overloaded with orders and short on development resources. That\u2019s when they hire us to handle certain projects and tasks for them.<\/p>\n\n\n\n<p>This time around, the agency\u2019s management was planning on relaunching <strong>their corporate website<\/strong>. We were contacted by Andr\u00e9 Wirth, the agency\u2019s Art Director, who told us that they required our front-end and WordPress development services.&nbsp;<\/p>\n\n\n\n<p>That was <strong>a great honor and responsibility <\/strong>for us since GDC Media &amp; Design entrusted us with rebuilding their <em>own <\/em>website.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Andr\u00e9 provided us with the complete designs for two pages:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Front page<\/li>\n\n\n\n<li>Detail page&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Our task was to create markup and animations\/interactive effects for them.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Additionally, the client requested a hamburger navigation menu for a better user experience on mobile devices.&nbsp;<\/p>\n\n\n\n<p>Andr\u00e9 also wanted us to use the default page editor <strong>Gutenberg <\/strong>on the back-end.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution&nbsp;<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Technologies and Tools&nbsp;<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>To create the <strong>animations and interactive effects<\/strong> on the pages, we used the cutting-edge <strong>WebGL JavaScript API.<\/strong> The best thing about this library is that it requires no plugins, leveraging the capabilities of the hardware graphics acceleration of the user\u2019s device. Developers can use WebGL in &lt;canvas&gt; HTML elements that render on any compatible web browser.&nbsp;<\/li>\n\n\n\n<li>To build <strong>the default and custom blocks<\/strong> for the web pages, we used <strong>Gutenberg<\/strong>, as requested by the client.&nbsp;<\/li>\n\n\n\n<li>To <strong>create the markup<\/strong>, we used the staple web technologies &#8211; HTML5 and CSS3.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Interactive Effects and Animations&nbsp;<\/h3>\n\n\n\n<p>Here are the effects that we added to the pages.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Anchor navigation with smooth scroll<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06112626\/smooth_scroll.gif\" alt=\"\" class=\"wp-image-16184\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">AJAX load more \/ Infinite scroll<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06112722\/infinite_scroll.gif\" alt=\"\" class=\"wp-image-16186\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Smoke animation<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06112821\/smoke_animation.gif\" alt=\"\" class=\"wp-image-16187\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Project image parallax<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06112926\/parallax.gif\" alt=\"\" class=\"wp-image-16188\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Footer background animation<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06113026\/footer.gif\" alt=\"\" class=\"wp-image-16189\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Hamburger menu<\/h4>\n\n\n\n<p>We also developed a hamburger navigation menu with items that become solid on hover.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06113128\/hamburger_menu.gif\" alt=\"\" class=\"wp-image-16190\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Custom mouse cursor&nbsp;<\/h4>\n\n\n\n<p>At the client\u2019s request, we created a white circular mouse cursor with a mix-blend mode, meaning that it changes its size when you hover over interactive elements.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06113229\/1cursor.gif\" alt=\"\" class=\"wp-image-16191\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Magnetic buttons&nbsp;<\/h4>\n\n\n\n<p>Finally, we added the \u201cmagnetic effect\u201d to the buttons, as this animation illustrates:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06113325\/magneticbuttons.gif\" alt=\"\" class=\"wp-image-16193\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">The Outcome&nbsp;<\/h2>\n\n\n\n<p>The client had some comments and update requests when we delivered the project for his review. For instance, on the back-end, we made a custom block with Gutenberg, whereas Andr\u00e9 wanted us to use a default one. It didn\u2019t take us long to fix that.&nbsp;<\/p>\n\n\n\n<p>In general, the client was fully satisfied with the work we did. The GDC Media &amp; Design website is now intuitive to interact with and easy to navigate not only on desktop computers but on mobile devices as well. It also has some engaging interactive effects and animations.&nbsp;<\/p>\n\n\n\n<p>We completed the project in <strong>47.5 <\/strong>business hours which was broken down like so:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Front-end:<\/strong> 25 hrs<\/li>\n\n\n\n<li><strong>JavaScript: <\/strong>10 hrs&nbsp;<\/li>\n\n\n\n<li><strong>Back-end (WordPress, Gutenberg):<\/strong> 6.5 hrs<\/li>\n\n\n\n<li><strong>Quality assurance:<\/strong> 6 hrs&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Want to be our next happy client? Let\u2019s <a href=\"https:\/\/getdevdone.com\/contact-us.html\" target=\"_blank\" rel=\"noopener\" title=\"\">talk<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this post, we discuss one of our WordPress and front-end development projects that we have done for an agency. <\/p>\n","protected":false},"author":19,"featured_media":16169,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[743,752],"tags":[836,774,820,814],"class_list":["post-16157","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-case-study","category-wordpress-development","tag-agencies","tag-cms-development","tag-javascript","tag-wordpress"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Baylor Eaton","author_link":"https:\/\/getdevdone.com\/blog\/author\/baylor"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06171457\/Intro-preview-1-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/case-study\" class=\"advgb-post-tax-term\">Case study<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">WordPress development<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Case study<\/span>","<span class=\"advgb-post-tax-term\">WordPress development<\/span>"]},"tags":{"linked":["<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">Agencies<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">CMS development<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">JavaScript<\/a>","<a href=\"https:\/\/getdevdone.com\/blog\/category\/wordpress-development\" class=\"advgb-post-tax-term\">WordPress<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">Agencies<\/span>","<span class=\"advgb-post-tax-term\">CMS development<\/span>","<span class=\"advgb-post-tax-term\">JavaScript<\/span>","<span class=\"advgb-post-tax-term\">WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 3 years ago","modified":"Updated 2 years ago"},"absolute_dates":{"created":"Posted on December 6, 2022","modified":"Updated on May 14, 2024"},"absolute_dates_time":{"created":"Posted on December 6, 2022 5:16 pm","modified":"Updated on May 14, 2024 10:15 am"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06171457\/Intro-preview-1-723x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06171457\/Intro-preview-1-800x630.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06171457\/Intro-preview-1.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06171457\/Intro-preview-1-770x510.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06171457\/Intro-preview-1.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/12\/06171457\/Intro-preview-1.png"},"featured_post_color":"#9056e0","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/2bc1e2706ee61710b1ba07fb6d106e9c35f8baed29da8ff47798b1e63665bba7?s=96&d=mm&r=g","author_position":"Business Development Manager","reading_time":"<span class=\"span-reading-time rt-reading-time\"><span class=\"rt-label rt-prefix\"><\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">min read<\/span><\/span>","prev_post":{"slug":"react-wordpress-theme-development-benefits-and-drawbacks","name":"React WordPress Theme Development: Benefits and Drawbacks"},"next_post":{"slug":"wordpress-development-company-vs-freelancer","name":"A WordPress Development Company vs Freelancer: How to Choose"},"related_posts":["headless-wordpress-guide-insights","how-to-move-wordpress-site-to-another-domain","conteply-google-docs-as-an-ai-orchestrated-publishing-surface"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/16157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=16157"}],"version-history":[{"count":10,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/16157\/revisions"}],"predecessor-version":[{"id":24699,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/16157\/revisions\/24699"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/16169"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=16157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=16157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=16157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}