{"id":263,"date":"2024-06-03T08:30:58","date_gmt":"2024-06-03T08:30:58","guid":{"rendered":"https:\/\/sandagerdesign.dk\/?page_id=263"},"modified":"2024-06-19T20:53:57","modified_gmt":"2024-06-19T20:53:57","slug":"enemaerkets-hostahave","status":"publish","type":"page","link":"https:\/\/sandagerdesign.dk\/en\/enemaerkets-hostahave\/","title":{"rendered":"Enem\u00e6rkets Hostahave"},"content":{"rendered":"<section class=\"bde-section-263-442 bde-section bde-preset-836a2b38-8832-4e2e-865c-14ef8e1c18a6\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-263-443 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-444 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-445 bde-div bde-preset-d1dd2f56-6e8b-4880-a05c-5e258c003f0d\">\n  \n\t\n\n\n\n<h1 class=\"bde-heading-263-446 bde-heading\">\nEnem\u00e6rkets Hostahave\n<\/h1><div class=\"bde-div-263-447 bde-div bde-preset-441622cb-2814-4300-882a-de47b0a7f2bf\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-448 bde-div bde-preset-0729ae6c-22cf-49b5-880f-366c39993063\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-449 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-450 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-451 bde-heading\">\nContext\n<\/h2>\n<\/div><div class=\"bde-text-263-452 bde-text\">\nAcademic project\n<\/div><div class=\"bde-text-263-453 bde-text\">\nDesign &amp; development\n<\/div><div class=\"bde-text-263-472 bde-text\">\nApril 4th 2024 - May 22nd 2024\n<\/div>\n<\/div><div class=\"bde-div-263-454 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-455 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-456 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-457 bde-heading\">\nTechnologies\n<\/h2>\n<\/div><div class=\"bde-text-263-249 bde-text\">\nWordPress\n<\/div><div class=\"bde-text-263-254 bde-text\">\nphp, CSS & HTML\n<\/div><div class=\"bde-text-263-253 bde-text\">\nAdobe XD\n<\/div><div class=\"bde-text-263-250 bde-text\">\nBreakdance\n<\/div><div class=\"bde-text-263-251 bde-text\">\nACF\n<\/div><div class=\"bde-text-263-252 bde-text\">\nAdobe Illustrator\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-263-461 bde-div bde-preset-bd7055e3-042d-4bfd-8c82-1679c8185b32\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-462 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-463 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-464 bde-heading\">\nIntroduction\n<\/h2>\n<\/div><div class=\"bde-div-263-465 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-466 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-rich-text-263-470 bde-rich-text breakdance-rich-text-styles\">\n<p>Enem\u00e6rkets Hostahave is a company that combines a physical visitor garden and nursery with online plant sales. After a change of ownership five years ago, the new owners have focused on attracting more visitors to the garden through a dedicated online effort to keep up with the times. With my advice, they have successfully created a social media presence that has grown from 100 to over 6,000 followers on Facebook over the years, but they feel that their website has not kept pace.<\/p>\n<\/div>\n<\/div><div class=\"bde-div-263-468 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-rich-text-263-471 bde-rich-text breakdance-rich-text-styles\">\n<p>The website before the redesign was a solution they inherited with the change of ownership, and it appears outdated and with suboptimal features. They wanted a complete redesign of the site to make it appear more trustworthy, modern, and professional. However, the primary goal was to create an intuitive and easy backend because the more time they spend on the website, the less time they have to tend to the garden.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-263-397 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-image-comparison-263-398 bde-image-comparison\" data-before-label=\"F\u00f8r\" data-after-label=\"Efter\">\n\n<div class=\"bde-image-comparison__container js-image-container\">\n\t<div class=\"bde-image-comparison__wrapper bde-image-comparison__wrapper--horizontal bde-image-comparison__wrapper--separator-visible bde-image-comparison__wrapper--labels-visible\">\n\t\t<div class=\"js-comparison-container\">\n\t\t\t<div class=\"images\">\n\t\t\t\t<div class=\"image-rgt js-image-after\" data-src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/hhafter.webp\"><\/div>\n\t\t\t\t<div class=\"image-lft js-image-before\" data-src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/hhbefore.webp\"><\/div>\n\t\t\t<\/div>\n\t\t\t<div class=\"ui\">\n\n\t\t\t\t<div class=\"un-slide-img-label label-before\">Before<\/div>\n\t\t\t\t<div class=\"un-slide-img-label label-after\">After<\/div>\n\n\t\t\t\t<div class=\"dragger\">\n\t\t\t\t\t<div class=\"dragger-arrow\"><\/div>\n\t\t\t\t\t<div class=\"dragger-arrow\"><\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-263-267 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-columns-263-283 bde-columns bde-preset-1e474a07-ab19-42c1-8101-f180bbd3b336\"><div class=\"bde-column-263-304 bde-column\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-333 bde-div bde-preset-b5370023-6ab8-43b5-bc8d-afe726b68730\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-334 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-335 bde-heading\">\nLaptop\n<\/h2>\n<\/div><div class=\"bde-div-263-299 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-300 bde-image\">\n<figure class=\"breakdance-image breakdance-image--202\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/breakdancedemos.com\/supa\/wp-content\/uploads\/sites\/9\/2023\/02\/airmac-mockup.svg\" width=\"928\" height=\"562\" sizes=\"(max-width: 928px) 100vw, 928px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-masker-263-301 bde-masker\"><div class=\"bde-image-263-303 bde-image\">\n<figure class=\"breakdance-image breakdance-image--463\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_12_03-e1717586315196.png\" width=\"3010\" height=\"8928\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_12_03-e1717586315196.png 3010w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_12_03-e1717586315196-101x300.png 101w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_12_03-e1717586315196-345x1024.png 345w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_12_03-e1717586315196-768x2278.png 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_12_03-e1717586315196-518x1536.png 518w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_12_03-e1717586315196-690x2048.png 690w\" sizes=\"(max-width: 3010px) 100vw, 3010px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div>\r\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-263-284 bde-column bde-preset-3f45cedc-fef1-45d0-bbfb-ee714aec96b3\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-336 bde-div bde-preset-b5370023-6ab8-43b5-bc8d-afe726b68730\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-337 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-338 bde-heading\">\nTablet\n<\/h2>\n<\/div><div class=\"bde-div-263-285 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-286 bde-image\">\n<figure class=\"breakdance-image breakdance-image--200\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/breakdancedemos.com\/supa\/wp-content\/uploads\/sites\/9\/2023\/02\/mockup-tablet.svg\" width=\"1200\" height=\"764\" sizes=\"(max-width: 1200px) 100vw, 1200px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-masker-263-287 bde-masker\"><div class=\"bde-image-263-306 bde-image\">\n<figure class=\"breakdance-image breakdance-image--464\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_15_15.png\" width=\"912\" height=\"6490\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_15_15.png 912w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_15_15-42x300.png 42w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_15_15-144x1024.png 144w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_15_15-768x5465.png 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_15_15-216x1536.png 216w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_15_15-288x2048.png 288w\" sizes=\"(max-width: 912px) 100vw, 912px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div>\r\n<\/div>\n<\/div>\n<\/div><div class=\"bde-column-263-291 bde-column bde-preset-3f45cedc-fef1-45d0-bbfb-ee714aec96b3\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-339 bde-div bde-preset-b5370023-6ab8-43b5-bc8d-afe726b68730\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-340 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-341 bde-heading\">\nMobile\n<\/h2>\n<\/div><div class=\"bde-div-263-292 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-293 bde-image\">\n<figure class=\"breakdance-image breakdance-image--205\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"https:\/\/breakdancedemos.com\/supa\/wp-content\/uploads\/sites\/9\/2023\/02\/mobile-mockup.svg\" width=\"672\" height=\"1360\" sizes=\"(max-width: 672px) 100vw, 672px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-masker-263-294 bde-masker\"><div class=\"bde-image-263-305 bde-image\">\n<figure class=\"breakdance-image breakdance-image--465\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/screencapture-hovedopgavemultimediedesigner-sandagerdesign-dk-2024-06-05-13_16_25.png\" width=\"640\" height=\"13418\" sizes=\"(max-width: 640px) 100vw, 640px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div>\r\n<\/div>\n<\/div>\n<\/div><\/div><\/div>\n<\/section><section class=\"bde-section-263-379 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-simple-testimonial-263-380 bde-simple-testimonial bde-preset-f7498d88-2052-452a-b8ff-f2210fbc1a56\">\n\n\n\n    \n        \n\n\n\n    <div class='simple-testimonial__quote'>\n        <blockquote >\n            We've had Sarah renew our website with the aim of attracting more visitors to our garden.<br><br>Sarah has taken a professional approach to both our desires and needs. She has listened and provided constructive ideas for development. Additionally, she has created a new logo for our company to make us appear more credible.<br><br>We would use Sarah again anytime and recommend her work.\n        <\/blockquote>\n\n        \n            \n            \n            \n            \n                                <svg class='simple-testimonial__quote-mark left-icon' xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 200 200\">\n        <path d=\"M198 12h-71.794v85.606L168.527 187l27.206-13.636-37.031-89.394H198V12ZM71.794 12H0v85.606L42.32 187l27.962-13.636L32.496 83.97h39.298V12Z\" fill=\"currentColor\"\/>\n    <\/svg>\n    <svg class='simple-testimonial__quote-mark right-icon' xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 200 200\">\n        <path d=\"M198 12h-71.794v85.606L168.527 187l27.206-13.636-37.031-89.394H198V12ZM71.794 12H0v85.606L42.32 187l27.962-13.636L32.496 83.97h39.298V12Z\" fill=\"currentColor\"\/>\n    <\/svg>\n\n            \n        \n    <\/div>\n\n\n    <div class='simple-testimonial__author' >\n        Helle S.\n    <\/div>\n\n    <div class='simple-testimonial__author-info' >\n        Owner of Enem\u00e6rkets Hostahave\n    <\/div>\n\n\n\n<\/div><\/div>\n<\/section><section class=\"bde-section-263-166 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div id=\"scrolling-image\" class=\"bde-scrolling-image-263-157 bde-scrolling-image\">\n    \n  <div class=\"ee-scrollimage-icon\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" id=\"icon-arrow-down2\" viewbox=\"0 0 32 32\">\n<path d=\"M27.414 19.414l-10 10c-0.781 0.781-2.047 0.781-2.828 0l-10-10c-0.781-0.781-0.781-2.047 0-2.828s2.047-0.781 2.828 0l6.586 6.586v-19.172c0-1.105 0.895-2 2-2s2 0.895 2 2v19.172l6.586-6.586c0.39-0.39 0.902-0.586 1.414-0.586s1.024 0.195 1.414 0.586c0.781 0.781 0.781 2.047 0 2.828z\"\/>\n<\/svg>\n  <\/div>\n    \n<\/div><div class=\"bde-div-263-187 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-193 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-194 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-195 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-196 bde-heading\">\nProject requirements\n<\/h2>\n<\/div><div class=\"bde-rich-text-263-197 bde-rich-text breakdance-rich-text-styles\">\n<p>The page is to consist of both a 'visitor's garden'-part as well as a webshop.<\/p>\n<p>There needs to be a system for setting up events on the site.<\/p>\n<p>There should be a separate system for blog posts, as well as one for care guides for hostas and other plants.<\/p>\n<\/div>\n<\/div><div class=\"bde-div-263-192 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-188 bde-div bde-preset-5bedad1c-9ecb-4220-85dc-0c6922d997af\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-189 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-190 bde-heading\">\nOther important considerations\n<\/h2>\n<\/div><div class=\"bde-rich-text-263-191 bde-rich-text breakdance-rich-text-styles\">\n<p>The target audience primarily consists of women over 45 years old, but many are also 60+. For this reason, it was especially important that the site was easy to navigate for people who do not consider themselves tech-savvy and have poorer vision. Therefore, no 'smart' and modern features were implemented; instead, familiar and intuitive solutions were chosen, which were tested on the target audience to ensure user-friendliness.\"<\/p>\n<p>A large portion of the target audience also preferred to browse the site on their mobile devices. While it's always important to have a responsive design, this was particularly emphasized as their original website did not provide a good mobile experience.<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-263-256 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-263-265 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-266 bde-image\">\n<figure class=\"breakdance-image breakdance-image--451\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Asset-19.png\" width=\"1646\" height=\"1191\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Asset-19.png 1646w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Asset-19-300x217.png 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Asset-19-1024x741.png 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Asset-19-768x556.png 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Asset-19-1536x1111.png 1536w\" sizes=\"(max-width: 1646px) 100vw, 1646px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div>\n<\/div><div id=\"logoanchor\" class=\"bde-div-263-259 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-260 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-261 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-262 bde-heading\">\nVisual design\n<\/h2>\n<\/div><div class=\"bde-rich-text-263-263 bde-rich-text breakdance-rich-text-styles\">\n<p>Before the redesign, Enem\u00e6rkets Hostahave had a logo. The logo was a low-quality bitmap image with a white background included in the image itself, making it difficult to use on different backgrounds. Additionally, it became extremely pixelated when scaled up in size for signage.<\/p>\n<p>To address this issue, I created a new logo that would serve as the foundation for the new visual identity. In close collaboration with the company, we developed a logo that met their requirements.<\/p>\n<\/div><div class=\"bde-checkmark-list-263-264 bde-checkmark-list\">\n<ul>\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes  bg-yes'>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\"><path d=\"M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z\"\/><\/svg>\n              <\/span>\n      <div >\n        Scalable\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes  bg-yes'>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\"><path d=\"M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z\"\/><\/svg>\n              <\/span>\n      <div >\n        Works on a dark and light background - a white version of the logo was created for this\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes  bg-yes'>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\"><path d=\"M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z\"\/><\/svg>\n              <\/span>\n      <div >\n        Virke p\u00e5 b\u00e5de m\u00f8rk og lys baggrund - der blev skabt en hvid version\n      <\/div>\n\n    <\/li>\n\n  \n              \n              \n    <li>\n      <span class='bde-checkmark-list__icon bde-checkmark-list__icon_yes  bg-yes'>\n                  <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 24 24\"><path d=\"M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z\"\/><\/svg>\n              <\/span>\n      <div >\n        Logotype in a different color than the emblem.\n      <\/div>\n\n    <\/li>\n\n  <\/ul>\n\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-263-130 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-263-131 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-132 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-133 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-134 bde-heading\">\nProcess\n<\/h2><div class=\"bde-back-to-top-263-176 bde-back-to-top bde-back-to-top--progress is-sticky\">\n\n\n<button aria-label=\"Back to top\" tabindex=\"0\" class=\"bde-back-to-top__button bde-back-to-top__button--progress bde-back-to-top__button--show-always bde-back-to-top__button--animation-fade is-sticky  js-ee-back-to-top\">\n    \t<svg class=\"bde-back-to-top__progress-svg js-progress-svg\" width=\"100%\" height=\"100%\" viewbox=\"-1 -1 102 102\">\n\t  <path class=\"background\" d=\"M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98\"\/>\n      <path class=\"tracker\" d=\"M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98\"\/>\n  \t<\/svg>\n         <div class=\"bde-back-to-top__icon-wrap\">\n              <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 384 512\"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https:\/\/fontawesome.com License - https:\/\/fontawesome.com\/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d=\"M214.6 57.4L192 34.7 169.4 57.4l-144 144L2.7 224 48 269.2l22.6-22.6L160 157.2V448v32h64V448 157.2l89.4 89.4L336 269.2 381.3 224l-22.6-22.6-144-144z\"\/><\/svg>\n          <\/div>\n    <\/button>\n\n\n<\/div>\n<\/div><div class=\"bde-grid-263-168 bde-grid\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-154 bde-div bde-preset-650dbe27-ae61-48d5-bed8-57104c0cbfb6\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-175 bde-image\">\n<figure class=\"breakdance-image breakdance-image--373\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.28.46.png\" width=\"2994\" height=\"1406\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.28.46.png 2994w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.28.46-300x141.png 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.28.46-1024x481.png 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.28.46-768x361.png 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.28.46-1536x721.png 1536w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.28.46-2048x962.png 2048w\" sizes=\"(max-width: 2994px) 100vw, 2994px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-div-263-170 bde-div\">\n  \n\t\n\n\n\n<h2 class=\"bde-heading-263-158 bde-heading\">\nSemi-structured interviews\n<\/h2><div class=\"bde-text-263-159 bde-text\">\nAt the beginning of the project, I conducted interviews with informants from the target audience. <br><br>During these interviews, I sought to clarify their desires for the new website, identify pain points with other sites, and explore a visual direction by examining competitors' websites.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-263-160 bde-div bde-preset-650dbe27-ae61-48d5-bed8-57104c0cbfb6\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-171 bde-image\">\n<figure class=\"breakdance-image breakdance-image--368\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.23.17.png\" width=\"1244\" height=\"1030\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.23.17.png 1244w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.23.17-300x248.png 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.23.17-1024x848.png 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.23.17-768x636.png 768w\" sizes=\"(max-width: 1244px) 100vw, 1244px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-div-263-172 bde-div\">\n  \n\t\n\n\n\n<h2 class=\"bde-heading-263-161 bde-heading\">\nWireframe testing\n<\/h2><div class=\"bde-text-263-162 bde-text\">\nI created an interactive low-fidelity prototype in Adobe XD and conducted a series of user tests.<br><br>Through assigned tasks, I gained insight into how the target audience interacts with the site and whether the proposed interaction design and information architecture were intuitive or frustrating for the audience.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-263-163 bde-div bde-preset-650dbe27-ae61-48d5-bed8-57104c0cbfb6\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-173 bde-image\">\n<figure class=\"breakdance-image breakdance-image--371\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.26.03.png\" width=\"1188\" height=\"912\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.26.03.png 1188w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.26.03-300x230.png 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.26.03-1024x786.png 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-13.26.03-768x590.png 768w\" sizes=\"(max-width: 1188px) 100vw, 1188px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-div-263-174 bde-div\">\n  \n\t\n\n\n\n<h2 class=\"bde-heading-263-164 bde-heading\">\nMockup interviews\n<\/h2><div class=\"bde-text-263-165 bde-text\">\nBased on the insights, I created mockups that were shown to the target audience. <br>The mockups were developed based on A\/B testing, where one element was changed at a time, and the target audience was asked about what appealed to them the most. <br><br>Furthermore, they were asked whether the website appeared credible and suited Enem\u00e6rkets Hostahave.\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-263-198 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-div-263-199 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-200 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-201 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-202 bde-heading\">\nWebsite construction\n<\/h2>\n<\/div>\n<\/div><div class=\"bde-grid-263-381 bde-grid\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-205 bde-div bde-preset-27d92a56-ee1c-41b2-9fb4-cffb2989514c\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-206 bde-image\">\n<figure class=\"breakdance-image breakdance-image--419\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.36.24.png\" width=\"2018\" height=\"1240\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.36.24.png 2018w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.36.24-300x184.png 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.36.24-1024x629.png 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.36.24-768x472.png 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.36.24-1536x944.png 1536w\" sizes=\"(max-width: 2018px) 100vw, 2018px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-div-263-207 bde-div\">\n  \n\t\n\n\n\n<h2 class=\"bde-heading-263-208 bde-heading\">\nBackend\n<\/h2><div class=\"bde-text-263-209 bde-text\">\nThrough the use of Advanced Custom Fields, I was able to create custom fields that were quick and easy for the owners to fill out in the backend.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-263-236 bde-div bde-preset-27d92a56-ee1c-41b2-9fb4-cffb2989514c\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-237 bde-image\">\n<figure class=\"breakdance-image breakdance-image--420\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.38.25.png\" width=\"566\" height=\"792\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.38.25.png 566w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.38.25-214x300.png 214w\" sizes=\"(max-width: 566px) 100vw, 566px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-div-263-238 bde-div\">\n  \n\t\n\n\n\n<h2 class=\"bde-heading-263-239 bde-heading\">\nSetup\n<\/h2><div class=\"bde-text-263-240 bde-text\">\nWith the Breakdance page builder, I created templates that dynamically fetch content from the fields, hide them if the fields were not filled out, and update the information in multiple places at once.\n<\/div>\n<\/div>\n<\/div><div class=\"bde-div-263-231 bde-div bde-preset-27d92a56-ee1c-41b2-9fb4-cffb2989514c\">\n  \n\t\n\n\n\n<div class=\"bde-image-263-232 bde-image\">\n<figure class=\"breakdance-image breakdance-image--421\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.39.12.png\" width=\"2982\" height=\"1492\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.39.12.png 2982w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.39.12-300x150.png 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.39.12-1024x512.png 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.39.12-768x384.png 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.39.12-1536x769.png 1536w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/Skaermbillede-2024-06-03-kl.-16.39.12-2048x1025.png 2048w\" sizes=\"(max-width: 2982px) 100vw, 2982px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div><div class=\"bde-div-263-233 bde-div\">\n  \n\t\n\n\n\n<h2 class=\"bde-heading-263-234 bde-heading\">\nFrontend\n<\/h2><div class=\"bde-text-263-235 bde-text\">\nThe result was a visually appealing frontend experience, which the site owners don't need to spend time maintaining the design guidelines themselves since their content is simply pulled from the backend and automatically translated to the frontend.\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-263-473 bde-section\">\n  \n\t\n\n\n\n<div class=\"section-container\"><a class=\"bde-container-link-263-498 bde-container-link breakdance-link\" href=\"https:\/\/sandagerdesign.dk\/en\/portraet\/\" target=\"_self\" data-type=\"url\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-511 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-512 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-513 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-514 bde-heading\">\nSe n\u00e6ste case\n<\/h2>\n<\/div><div class=\"bde-image-263-515 bde-image\">\n<figure class=\"breakdance-image breakdance-image--247\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/portraits-scaled-e1717687733597.webp\" width=\"2385\" height=\"1706\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/portraits-scaled-e1717687733597.webp 2385w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/portraits-scaled-e1717687733597-300x215.webp 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/portraits-scaled-e1717687733597-1024x732.webp 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/portraits-scaled-e1717687733597-768x549.webp 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/portraits-scaled-e1717687733597-1536x1099.webp 1536w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/portraits-scaled-e1717687733597-2048x1465.webp 2048w\" sizes=\"(max-width: 2385px) 100vw, 2385px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div>\n<\/div>\n\n<\/a><a class=\"bde-container-link-263-517 bde-container-link breakdance-link\" href=\"https:\/\/sandagerdesign.dk\/en\/aenergy\/\" target=\"_self\" data-type=\"url\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-518 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-div-263-519 bde-div\">\n  \n\t\n\n\n\n<div class=\"bde-fancy-divider-263-520 bde-fancy-divider\">\n\n\n<div class=\"bde-fancy-divider__wrapper\">\n  <div class=\"bde-fancy-divider__separator\">\n  \t  <\/div>\n<\/div>\n\n<\/div><h2 class=\"bde-heading-263-521 bde-heading\">\nSe forrige case\n<\/h2>\n<\/div><div class=\"bde-image-263-522 bde-image\">\n<figure class=\"breakdance-image breakdance-image--488\">\n\t<div class=\"breakdance-image-container\">\n\t\t<div class=\"breakdance-image-clip\"><img decoding=\"async\" class=\"breakdance-image-object\" src=\"http:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/aenergy.webp\" width=\"2157\" height=\"1618\" srcset=\"https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/aenergy.webp 2157w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/aenergy-300x225.webp 300w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/aenergy-1024x768.webp 1024w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/aenergy-768x576.webp 768w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/aenergy-1536x1152.webp 1536w, https:\/\/sandagerdesign.dk\/wp-content\/uploads\/2024\/06\/aenergy-2048x1536.webp 2048w\" sizes=\"(max-width: 2157px) 100vw, 2157px\"><\/div>\n\t<\/div><\/figure>\n\n<\/div>\n<\/div>\n\n<\/a><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Enem\u00e6rkets Hostahave Kontekst Akademisk projekt Design &#038; udvikling 4. April 2024 &#8211; 22. maj 2024 Teknologier WordPress php, CSS &#038; HTML Adobe XD Breakdance ACF Adobe Illustrator Introduktion Enem\u00e6rkets Hostahave er en virksomhed, der kombinerer en fysisk bes\u00f8gshave og plantesalg, med et online plantesalg. Efter et ejerskifte for 5 \u00e5r siden, har de nye ejere [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-263","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/pages\/263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/comments?post=263"}],"version-history":[{"count":15,"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/pages\/263\/revisions"}],"predecessor-version":[{"id":788,"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/pages\/263\/revisions\/788"}],"wp:attachment":[{"href":"https:\/\/sandagerdesign.dk\/en\/wp-json\/wp\/v2\/media?parent=263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}