Step 1. Requirements and design.
First steps of the process included a survey of website features that our classmates wanted to have on the website and then working as a team on designing visual mock-ups for website pages. From the beginning I actively participated in whiteboarding and design discussions, as I was the person to lead the development of the website. I was asked what features we could have and what was less realistic within the timeframe and with the resources that we had. We got main brand guidelines from the Branding Team (event color, typefaces and official logo), and worked within these constraints.
Here is the mock-ups that I got from design team:
Step 2. Splash page.
The first important milestone to hit was designing a temporary splash page as a digital poster with all the event information that lived at the URL from early April till June, 1 when we launched the actual website. The design team provided three versions of the splash page, and I coded the one that we voted for, using Flexbox and SCSS. It was a test/proof of concept.
Personally for me the most time-consuming part of it was figuring out how to make our custom hover-state work. I used CSS pseudo-elements for it, and although the html side of the code looks rather complicated, it is a simple concept overall. Later we kept that hover state for buttons on the actual Portshowlio website.
Step 3. User testing and simplification of the process.
One of the early tasks that we took as a team, was re-evaluating dashboard experience for students of our program. Erin Millman as a project manager of the team met with some students and got their feedback about the previous years dashboard experience. She later re-wrote the instructions for the users and re-named some of the custom fields. It was a very important task to figure as I would need all this information for coding a single-student.php template later.
Step 4. Development.
I took a lead on developing our custom WordPress theme. One of the first important decisions to make was if we were going to use Bootstrap or not. I decided that with Flexbox supported by all major browsers for a while, and with design requirements that we had, we didn’t need such a massive framework as Bootstrap. All our needs could be easily addressed by the Flexbox on CSS side. Initially we planned to use Thimble (small flexbox framework) and Ivanna Mikityuk and Bill Obasi gave me their helping hands in changing code classes on the single student page design from the previous year and creating the Event tab using Thimble classes too, but later I ended up working with custom CSS flexbox for the whole website including these pages. The way the website was structured and created was simple and didn’t need any framework dependencies.
In the end it turned out that we didn’t use almost any code from the previous year, except four PHP loops in the student work template. It happened because our year was very different from all other years: we were the only graduation year at SCCA where all student were from Graphic Design program (before we had students from Photography program showcasing their works on the same website). It changed levels of complexity in website’s structure, it also changed its’ organization and obviously filter and templates that we needed.
Step 5. Launch and debugging.
One week before the June 1st we asked students to start uploading their works on the website, and we kept testing and debugging some small issues using real content. On June 1st we successfully launched 2018.portshowl.io website live.
Overall I found this project to be a great educational experience. I don’t plan to focus on web development in the future but now I know very well what is important when you work with developers and what they actually need from a designer.
See my GitHub Repository for 2018 Portshowlio Custom WordPress theme.