Penscript On 6th:
Client Project

This project was our last assignment in the program. Three classmates and I all worked together as a team to produce a WordPress website for a local calligrapher. We began with a meeting where we went over everything about our client's business, the main purpose of the site, and her ideas of what she wanted the site to be. During this meeting we mapped out the content she wanted on it, and made wireframes. After this had been completed, Denton, who had taken the lead in UX/UI design, made some high fidelity mock-ups and we began on the coding. We worked together to set up the bones of the site. I was responsible for coding the footer, the sidebar, the contact page, as well as a large chunk of the styling throughout the entire website, and polishing up small things near the end. While I followed the mockups closely, there were a few slight changes I used my judgement on, such as the borders on the Portfolio page images and padding and centering changes throughout the site, making sure they were okay with the rest of the group.


This project was incredibly rewarding, not just because we were able to use almost everything we learned, but also because it was fun working as part of a team, and being able to chat and bounce ideas off each other through the project as we worked. Everyone worked together very well, with almost no disagreements. Differences on opinions were resolved within seconds with a brief explanation of reasoning, and overall, it was a breeze. While we mostly worked physically together, we also utilized Slack to check in during evenings and weekends. We were on quite a tight deadline, and I'm proud of the team for being able to pull everything together in a short amount of time.


Our client requested a very simple website in order to best show off her work without distracting from it, so we did our best to incorporate design elements and functionality that would enhance the site without overpowering it.

desktop screenshot of client project mobile screenshot of client project

Skills Used

Tools Used



View Live Site

Highlights


Notable features that I personally worked on include an Instagram feed pulled directly from her account using Instafeed.js, located in the footer on every page. In addition, there is a conditional form for work inquiries created with the Gravity Forms plugin, and a JavaScript accordion drop down for FAQ questions, which are implemented dynamically from an Advanced Custom Field.


Most pages on the site utilize content dynamically pulled from Advanced Custom Fields.


The site is fully responsive and functional on all devices from phones, to tablets, to computers. It was designed in desktop view to be easier for the client, but coded mobile first to increase performance for mobile users. I took on a large portion of the CSS styling, including figuring out breakpoints and positioning on the About, Portfolio, Services and Contact pages.