SCCA Portshowlio 18 Website

A custom WordPress website for 2018 graduation year at SCCA.

The purpose of website is to display information about graduates of the Graphic Design program, their works and announce the 2018 Portshowlio event. I was a lead developer and coded this custom theme in flexbox, using my PHP and JavaScript skills.

Roles: web development
Skills: HTML5/CSS3, Flexbox, PHP, JavaScript, WordPress.
Timeframe: 8 weeks
Collaborators: Erik Fadiman, Erin Millman, Ivanna Mikityuk, Bill Obasi, Newie Nguyen
Live website: 2018.portshowl.io
Code Repo: GitHub

01. Description

Every year SCCA graduates create a WordPress website to showcase their works. Web teams are always of different sizes, this year the team had five members on it. I took a role of a lead web developer, and was responsible for major  coding decisions, and all PHP and JavaScript development.

Gif of scrolling the top of Portshowlio website

02. Challenge and objectives

Challenge/Problem:  Create a custom WordPress website for 2018 graduation year at SCCA to display information about graduates of the Graphic Design program, their work, and announce the 2018 Portshowlio event.

Project Goals and Objectives: As a team, design and code a custom WordPress theme within brand guidelines and in a 9 week timeframe. The content management system needs to be easy for students to use and present their work in the best possible way.

Deliverables: prototype; splash page; custom WordPress theme; GitHub repo with the code for the next year to refer to.

Project Background and Description: Every year SCCA students create a WordPress website to showcase their works. Web teams are always of different sizes, this year the team had five members on it. I took a role of a lead web developer, and was responsible for aa major coding decisions, and all PHP and JavaScript development.

03. Process

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:

Image - example of Student page mockup

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.

GIF of splash page

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.

For this project, we were mainly following the schedule that we had from the previous years https://seviglius.github.io/portshowlio-docs/#/schedule  with some exceptions. The 2018 web team was strong on a design side and team members were fluent in html, but I was the only person who could code in PHP and JavaScript, so unfortunately it ended up centered on me. During the development process I learned a lot about the communication between developer and designers, this time being on a developer’s side of the process. As it was our first major web project all together, we made some small mistakes that could have been prevented had we more experience. For example, I wasn’t given proper red lines and it took me more time because I had to both solve some very complex JavaScript and PHP problems and eye-ball CSS styles while doing it.

Personally for me the most difficult tasks were coding the JavaScript for Filter and Search. We were using Masonry grid for our home page, but we needed Masonry grid to perform several tasks that were not compatible between themselves. I wasn’t the first person to ask about the issue on Masonry Open repository on GitHub. According to the Masonry developer, his library just wasn’t supposed to work this way to start with, but we really needed it. I had to spend a few hours solving this issue, and I ended up creating two Masonry instances instead of one which solved all my issues. Initially we wanted to use custom Filter and Search JavaScript code from the previous year but we couldn’t because the websites’ structure ended up being too different. So, I wrote two different Javascript functions for the navigation under different contexts.

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.

See website.

04. Solution

2018.portshowl.io is a website that showcases the student work from SCCA 2018 graduating class. It was the first year when we decided to not use Bootstrap as a base for it, and used pure CSS, specifically Flexbox, to design all pages.