{"_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","body":{"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":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"client","depth":2,"text":"Client"},{"id":"graphics","depth":2,"text":"Graphics"},{"id":"image-optimization","depth":2,"text":"Image optimization"},{"id":"e-commerce","depth":2,"text":"E-commerce"}]}},"_type":"markdown","_id":"content:portfolio:upupaepop.md","_source":"content","_file":"portfolio/upupaepop.md","_extension":"md"}