Anna Atiagina, UX/UI Designer in Seattle, WA
Portshowlio’2018
Every year SCCA graduates create a Wordpress website to showcase their works. Web teams are always of different sizes, 2018 year the team had five members. I took the role of a lead web developer, and was responsible for major coding decisions, implementation of effects (animation, etc), and all PHP and JavaScript development.
Seattle Central Creative Academy is a school with long traditions and a lot of talented and successful alumni. One of its most famous traditions is its Portfolio show that happens every year in June where alumni present their works. The show is accompanied by the website that is usually designed by the students with the help of professional web developer since the school is not focused on coding and web development. The year when I graduated our team was left without the professional help, and I was asked to step in and lead the web development with a lot more involvement and decision-making then students were previously expected to do. As a lead web developer, I was able to collaborate with other designers on creating the visual style of the website, code and launch it.
Some of Home page animations and hover effects.
Skills used: SCSS, Flexbox, Wordpress, PHP, JavaScript.
Challenge/Problem: Create a custom Wordpress website for 2018 graduation year at SCCA to display information about graduates of Graphic Design program, their works 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 9 weeks timeframe. Website has to be easy to use, responsive and present student’s works in the best possible way.
Solution: 2018.portshowl.io is a website that showcases the student work from SCCA 2018 graduation team. 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.
Collaborators: Erin Millman, Erik Fadiman, Bill Obasi, Ivanna Mikityuk, Newie Nguyen.
Example of the Student page.
Student Dashboard view. It was created and designed with less tech-savvy students in mind.
Process
This project was following the classic web development process:
Research and interviewing students.
Wireframing and mock-ups. I had other students responsible for wireframes even though I actively participated in design discussions. The whole process helped me experience the work from the developer side as well: reading the redlines, giving tech requirements and explaining our limitations.
Splash page. First important milestone to hit was designing a digital poster with all event information that lived at 2018.portshowl.io from early April till June, 1 when we launched the actual website.
User testing and further simplification of the dashboard.
Development of a custom Wordpress theme using my Javascript, PHP and CSS/Flexbox skills.
Launch and debugging.
Website was launched on June 1, 2018, and still lives on the same URL, documenting the works of the Class of 2018.
See my GitHub Repository for 2018 Portshowlio Custom Wordpress theme: github.com/Atiagina/
See website: 2018.portshowl.io
Mobile version.
Home page.