[{"_path":"/portfolio/besteto","_draft":false,"_partial":false,"_empty":false,"title":"Focus on value: Theme for a marketing agency website","description":"Marketing agencies know how to design results driven websites. That is why I take the opportunity to collaborate on them as a learning experience. Building a theme for Besteto was just like that.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"focus-on-value-theme-for-a-marketing-agency-website"},"children":[{"type":"text","value":"Focus on value: Theme for a marketing agency website"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Marketing agencies know how to design results driven websites. That is why I take the opportunity to collaborate on them as a learning experience. Building a theme for Besteto was just like that."}]},{"type":"element","tag":"h2","props":{"id":"client"},"children":[{"type":"text","value":"Client"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Besteto is a marketing agency specializing in e-commerce. They commissioned an 8 page website to one of my colleagues and he requested my help on the project. I got to "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"code the theme from start to finish"}]},{"type":"text","value":" and learned a good deal during the process."}]},{"type":"element","tag":"h2","props":{"id":"building-fast"},"children":[{"type":"text","value":"Building fast"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Speed and efficiency"}]},{"type":"text","value":" is a key aspect of the coding work. Of course, the result still needs to be flawless. However, an hour of work can go a long way when using the proper tools and workflows."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A big help in this area is WordPress Gutenberg. By building the website from "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"reusable blocks"}]},{"type":"text","value":", one can save hours of building and updating similar blocks of content across pages. It also makes for a great editing experience as the admin offers a real time preview of the pages in the admin UI."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For styling the code I chose "},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Tailwind CSS"}]},{"type":"text","value":". This has become my go-to option for most projects, since it makes styling so incredibly fast and intuitive. Additionally, it allows for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"modular solutions"}]},{"type":"text","value":" - pieces of HTML that you can reuse as styled components and they just work!"}]},{"type":"element","tag":"h2","props":{"id":"the-result"},"children":[{"type":"text","value":"The result"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The result was a clean and solid theme built in a few days. It includes a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"blog section"}]},{"type":"text","value":" a list of services, a contact form, a pricing page... oh and it is also multilingual!"}]},{"type":"element","tag":"h2","props":{"id":"what-i-learned"},"children":[{"type":"text","value":"What I learned"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I said earlier that marketing agencies know how to build a web for results. Here are some effective strategies that may improve the user experience and conversion rates:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Informative use of icons"}]},{"type":"text","value":": On homepage, you can find a list of services easily distinguishable by icons. This could work as a dropdown menu, but it would be far less discoverable readable and appealing."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"CTAs for key page sections"}]},{"type":"text","value":": Once the potential customer finds their way onto the website, they should have an easy way of finding what they are looking for. In this case, it should be the contact. CTAs and contact forms are an ideal way to get this done."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Personal approach"}]},{"type":"text","value":": Show the customers who you are. You can do this by designing a team profile section. Put a face to your business!"}]}]},{"type":"element","tag":"h2","props":{"id":"final-thoughts"},"children":[{"type":"text","value":"Final thoughts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Although this time I did not work for my own client, the experience of building an agency website was definitely worthwhile. I am now ready to implement the ideas from their design in my own projects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out the full theme on "},{"type":"element","tag":"a","props":{"href":"https://www.besteto.cz/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Besteto.cz"}]},{"type":"text","value":"."}]}]},"head":{"title":"Besteto WordPress theme","description":"Once you make a website for the marketers you really get to know how to focus on the results.","image":"/image/portfolio/besteto.jpg"},"fields":{"image":"/image/portfolio/besteto.jpg","order":400,"skills":["WordPress","Twig","Tailwind CSS"]},"featured":true,"type":"theme","_type":"markdown","_id":"content:portfolio:besteto.md","_source":"content","_file":"portfolio/besteto.md","_extension":"md"},{"_path":"/portfolio/sca-department","_draft":false,"_partial":false,"_empty":false,"title":"Learning together: A university department website","description":"In my experience, university websites are notorious for being hard to read and navigate. That's why I welcomed the challenge of creating a web for my university department.","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"learning-together-a-university-department-website"},"children":[{"type":"text","value":"Learning together: A university department website"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In my experience, university websites are notorious for being hard to read and navigate. That's why I welcomed the challenge of creating a web for my university department."}]},{"type":"element","tag":"h2","props":{"id":"the-challenge"},"children":[{"type":"text","value":"The challenge"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I was asked to update the website of the Department of Social and Cultural Anthropology. Milan, a university researcher and lecturer who took care of the web had designed the previous version of the web using "},{"type":"element","tag":"a","props":{"href":"https://elementor.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Elementor"}]},{"type":"text","value":" and several other plugins. However, the site seemed to be lacking in design and readability. There were also requests for additional "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"content types"}]},{"type":"text","value":" and an "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"multilingual translations"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"design-first"},"children":[{"type":"text","value":"Design first"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I first supplied a "},{"type":"element","tag":"a","props":{"href":"https://www.figma.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Figma"}]},{"type":"text","value":" design for several pages to give a good idea of where I was headings. I was basing my design loosely on the previous version as there were some good elements in it. However, I redesigned and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"simplified the content structure"}]},{"type":"text","value":" - mainly the navigation links and the content of some pages."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Milan and other members of the staff loved the design, so I moved on to the implementation. I decided for a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"custom built them"}]},{"type":"text","value":"e, as it would give me full control over the content types and design templates. It also allows to combine the existing Gutenberg blocks to create new pages efficiently."}]},{"type":"element","tag":"h2","props":{"id":"planning-the-structure"},"children":[{"type":"text","value":"Planning the structure"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I implemented an information board which shows the newest articles and short announcements about the day-to-day matters in the department. I also "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"provided instructions"}]},{"type":"text","value":" to all staff on how to edit the content making them more comfortable with using the site."}]},{"type":"element","tag":"h3","props":{"id":"performance-and-maintainability"},"children":[{"type":"text","value":"Performance and maintainability"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By replacing the plugin components with custom ones, I removed the overhead of the plugin which may make the website load slower. The custom code also allows for "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"better maintainability"}]},{"type":"text","value":" as the content structure of the website is managed from a single place - the Gutenberg editor - instead of being broken up into multiple plugins."}]},{"type":"element","tag":"h3","props":{"id":"always-think-about-the-user"},"children":[{"type":"text","value":"Always think about the user"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Thanks to the custom theme, I gained a fine-grain control over each part of the page so I could more easily make "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"UX improvements"}]},{"type":"text","value":" such as making the staff images link to the individual profiles. On "},{"type":"element","tag":"a","props":{"href":"https://kska.upce.cz/okatedre/lide/adam-horalek/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lecturer's profile pages"}]},{"type":"text","value":", I used a card with tabs to more easily display various types of information."}]},{"type":"element","tag":"h2","props":{"id":"final-thoughts"},"children":[{"type":"text","value":"Final thoughts"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The response to the new design was great. The theme is ready to be translated into English and I continue to make updates and implement new features in collaboration with Milan and the rest of the department."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Have a look at the live web on "},{"type":"element","tag":"a","props":{"href":"https://kska.upce.cz/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"KSKA.upce.cz"}]}]}]},"head":{"title":"University department website","description":"How to present a large variety of content to students and alumni? Let's find out!","image":"/image/portfolio/sca-department.jpg"},"fields":{"image":"/image/portfolio/sca-department.jpg","order":300,"skills":["WordPress","Twig","Tailwind CSS","Figma"]},"featured":true,"type":"full","_type":"markdown","_id":"content:portfolio:sca-department.md","_source":"content","_file":"portfolio/sca-department.md","_extension":"md"}]