Between the Lines
A responsive website to showcase real student artwork for an art publication book.
Client
Edmonds College
Year
2020
Project Type
UI
Brainstorming
Research
Style Board
Site Mapping
Sketching
Between the Lines is an annual art publication created by the production design students of Edmonds College. Artwork was submitted by Edmonds College students for an opportunity to be recognized in the publication. Four teams helped design and market the publication for its release in the spring. I was designated to be in the UI design team, comprised of two other designers, to create a responsive desktop and mobile website.
For research, I went on awwwards.com to be inspired by current web design trends.
I created a style board consisting of two styles -- an earthy, neutral-toned theme and
a bright spring look. I wanted the website to look modern but have the colors pop out
in some way related to the spring season. I made a basic site map to outline what pages
I needed.
​
I sketched out the pages that I needed to create according to the site map. The biggest struggle for me was the landing page and submissions page. I had to figure out a way where I could show all of the submissions without it being cluttered. I had to keep in mind that not all submissions were going to be in an image format either, some were literary poems, short stories or videos. I was thinking of dividing the submissions into main categories to simplify where submissions are.
Design Progression
Wireframe
I designed my wireframes on Adobe InDesign because at the time, I wasn't aware of the programs used to design user interfaces. I changed my idea from something with more white space to an idea that seemed like more of a unique and unforgettable web experience. I wanted the user to look at all the submissions easily to constantly keep their attention. I played around with the typography to give a more whimsical feel, almost like a fun virtual museum. I wanted the layout to be more focused on the visuals rather than the text. For any text, I wanted it to be bold and easy to read.
​
As I started implementing the actual submissions into the photo boxes, I realized how cluttered it looked -- the exact problem I was trying to avoid. Luckily, critique meetings were held to provide feedback to all members of all teams. The print team would offer feedback to the marketing team and vice versa. It was also a good time to hear from my fellow UI designer peers as well. They were able to point out flaws in my design, whether it be a visual issue or an issue for a frontend or backend developer to implement, such as the name layouts.
Final Product
Presentation
Self Reflection
I realized that Adobe InDesign was not fit for this project. One of the UI design members unintentionally showed me a better way to design during a critique session. She was using a prototyping tool so afterwards, I researched more into it. I found Adobe XD and gave it a try considering the free price tag.
​
I started from scratch because I genuinely didn't like my InDesign creation. I found it to be clunky and unattractive. I played around with the tools and resources provided by Adobe XD and I came up with an interface that felt much more spacious. I still wanted the look to be more on the modern side.
I decided to simplify the landing page to show various submissions using a slideshow and cutting down the submission categories to just 'art' and 'literary' buttons. I didn't want to overwhelm the user so I implemented more slideshows in the submissions page. I still wanted to keep the clear and bold text but with more white space.
Although navigating the website isn't a unique and whimsical experience as I had initially hoped, I found that keeping it light and simple worked and looked more true to my design style. This class project taught me how to communicate with other teams to form a cohesive and clean theme. I was able to familiarize myself with new prototyping software and became more comfortable using the Adobe Creative Suite.
