I built a responsive WordPress site for my friend’s business, Parker’s Petals. I decided to build the site as a portfolio to best showcase his work. Starting on the homepage, you can navigate to the “About Us,” “Gallery,” or “Contact” pages using the menu bar. There are also buttons in different sections on the homepage that will take the user to the corresponding page on the site. At the very bottom of the homepage, there are links to three of Parker’s social media accounts. The images on the page are interactive, meaning they slightly grow in size when hovered over. I also added animations to the words as you scroll down the page to increase the user-interactivity and to make it more aesthetic. There is also a scroll up button that appears when you reach the bottom of the homepage. This feature makes it easy for the user to quickly go back to the top of the page. The gallery page was created using the WordPress block editor. Parker said this page was his favorite part of the whole website!
To dive further into WordPress editing, I downloaded multiple plugins that the theme I chose recommended. This includes WPKoi Templates for Elementor. Despite being advised against using Elementor, I found it easy to use and allowed me to easily customize the theme into something that best suits my website. To customize my CSS, I added it through the “additional CSS” section on WordPress. Here is an example of a portion of my CSS:
@import url(‘https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap’);
.main-title {
font-family: ‘Fira Mono’, monospace;
font-weight: 500 !important;
}
.site-header {
background-color: #A9BD93 !important;
}
By importing other fonts and changing the colors, I was able to design Parker’s Petals in a unique way that visually and conceptually relates to the flower arrangement company. I found this to be the most challenging part because there were so many small, tedious elements in the theme’s HTML that required additional CSS to customize. Elementor only allowed certain aspects of the webpages to be customized. So, for example, I had to completely redesign the menu bar and header using CSS on the WordPress Editor. The theme I chose did not include a nav bar element, so naturally, adding this and customizing it was challenging. However, I am very proud of how each element turned out and how everything flows together nicely. Below I added screenshots of the before and after of my custom CSS. As you can see, it is nearly unrecognizable because of the color and content changes.
For this project, I had the chance to try my hand in user-research and client communication. My “client” Parker was super excited when I asked to create a website for him. Prior to this, he had only used a Facebook and Instagram page to showcase his work as shown to the left.
I found communicating with clients to be a slightly annoying and stressful process. This is only because I felt some pressure to make sure the website was perfect for him and worked how he expected it to. Also because I couldn’t make any progress on the project until he responded with any information I needed to continue.
This project required a minimal amount of research on what typically goes on a website dedicated to a portfolio and commissions based off of the client’s work. This is why I decided to add a contact page rather than only linking to Parker’s social media accounts.
Overall, from this project I gained valuable experience with dealing with a client. It’s so exciting to say that I’ve already had my first client as a result of this final class project. I learned how to better use WordPress and WordPress plugins to craft a site with the perfect features based on my content. Because Parker didn’t really have a website to begin with, I was starting from scratch with only pictures of his flower arrangements as my content. This was a challenge I overcame as I communicated to my client exactly what I needed from him to ensure I could design the best possible website for him. I had a lot of fun making this and am excited for a website I made to actually be used in a real-life setting.