[{"_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"},{"_path":"/portfolio/upupaepop","_draft":false,"_partial":false,"_empty":false,"title":"Letterpress in WordPress: Print studio portfolio","description":"Building a web for a designer and typographer is a wonderful experience. Not only you get to implement a beautiful design, you also learn a lot during the process!","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"letterpress-in-wordpress-print-studio-portfolio"},"children":[{"type":"text","value":"Letterpress in WordPress: Print studio portfolio"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Building a web for a designer and typographer is a wonderful experience. Not only you get to implement a beautiful design, you also learn a lot during the process!"}]},{"type":"element","tag":"h2","props":{"id":"client"},"children":[{"type":"text","value":"Client"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Jakub is a graphic designer and a typographer and together with his wife he owns a small printing studio. This project was focused on updating the studio's website."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Jakub wanted to "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"cut down on the maintenance costs"}]},{"type":"text","value":" of his old Wix site and combine his web with an eshop. The task was relatively simple, but the webdesign studios and online marketing agencies offered rates that far exceeded the budget. Instead, I managed to offer a "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"collaboration that was flexible and adaptable"}]},{"type":"text","value":", and I was able to deliver the project at much lower price."}]},{"type":"element","tag":"h2","props":{"id":"graphics"},"children":[{"type":"text","value":"Graphics"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Jakub created a simple design that fit his needs. He focused on clean presentation with interesting fonts and a couple of graphic elements, such as the \"scroll-to-top\" navigation hand at the bottom of the page, or a separator above the menu. The key part was "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"precision"}]},{"type":"text","value":" in transferring the design to the WordPress template."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We decided to customize a "},{"type":"element","tag":"a","props":{"href":"https://themeforest.net/item/pinecone-creative-portfolio-and-blog-for-agency/13200056","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Pinecone"}]},{"type":"text","value":" theme from Theme Forest. By "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"creating a child theme"}]},{"type":"text","value":", I was able to apply all the customizations necessary, while preserving the original theme code. This is important in case that the theme needs update - changes made in the original theme would then be "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"lost forever"}]},{"type":"text","value":"!"}]},{"type":"element","tag":"h2","props":{"id":"image-optimization"},"children":[{"type":"text","value":"Image optimization"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Another important requirement was image optimization. The studio's portfolio is quite image-heavy and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"serving the right image sizes in the right quality and format"}]},{"type":"text","value":" is therefore crucial for the website's performance. I integrated the "},{"type":"element","tag":"a","props":{"href":"https://cloudinary.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Cloudinary"}]},{"type":"text","value":" service into the WordPress theme, so that all images loaded into the media gallery get processed, cached and served in the right format and size. This improved the performance greatly, even when viewing a whole set of full-screen images."}]},{"type":"element","tag":"h2","props":{"id":"e-commerce"},"children":[{"type":"text","value":"E-commerce"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, the website was also intended to sell the studio products. I integrated and set up "},{"type":"element","tag":"a","props":{"href":"https://woocommerce.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WooCommerce"}]},{"type":"text","value":" to easily enable the functionality. I customized the shipping and payment options according to Jakub's needs and "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"integrated a payment gateway"}]},{"type":"text","value":" to allow customers to pay by card. Since then the studio receives the orders directly into their mailbox and all the processing can be done from the website's administration."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By utilizing open source software, pre-built theme, and services which offer free plans, we were able to keep the project cost very low while producing high-quality deliverables. I assisted Jakub with all the necessary steps, such as "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"changing the hosting service, updating domain records, and setting up WooCommerce"}]},{"type":"text","value":". I also gave him a thorough walk-through of the admin environment and made sure he was comfortable with using the web on his own. This way, Jakub was able to focus on updating his portfolio with beautiful images and descriptions, while I was taking care of the technical details."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The collaboration worked out great. Jakub is fond of his new website and we continue working together on other website projects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Read up on the studio projects on "},{"type":"element","tag":"a","props":{"href":"https://upupaepop.cz/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Upupaepop.cz"}]},{"type":"text","value":"."}]}]},"head":{"title":"Upupaepop","description":"Redesigning a Wix site and switching to an open source e-commerce? Piece of cake! 🍰","image":"/image/portfolio/upupaepop.jpg"},"fields":{"image":"/image/portfolio/upupaepop.jpg","order":200,"skills":["WordPress","WooCommerce"]},"featured":true,"type":"full","_type":"markdown","_id":"content:portfolio:upupaepop.md","_source":"content","_file":"portfolio/upupaepop.md","_extension":"md"}]