Page 1

Sarah DeWeese | ARTD600K | Summer 2016

p r o j e c t ove r v i e w . goals. •

Build a database-driven web application using PHP and mySQL.

Create a visual tool that I could use every day to help me quickly and easily keep track of my creative department’s costs at work. We currently have a cost tracking system that is not visually-based, and I wanted to design something that I could glance at and immediately understand my department’s financial situation. For that reason the primary audience I designed this website for is a design-savvy, creative professional.

Design an appropriate visual system for this web application, that could be appealing to use every day.

design considerations. COLOR Budgeting and cost tracking is a pretty dry topic, but everyone needs to do it. Because this project is a web-based tool, to be used daily, it was important for the website to not look boring, which presented a challenge. No matter what color palette I chose, it would not be appearling to someone. For a tool to be used daily, it was important for the color to be appealing to each individual user. For that reason, I decided to design the website based on the idea of color customization. When someone creates an account, they can customize and save their color preferences, and make this a tool they look forward to using each day, instead of dreading.

I use this tool every day at work, so I am continually finding ways to improve it and plan to continue to do so.

LOGO/SHAPE Because of the customization aspect of the website, my goal for the logo was to create an abstract shape that was not strictly representative of any object, and that would look good in various color combinations. The curved shapes complement the Cs and Os in color, and resembles a sideways dollar sign, without being too representational. The shape lends itself to being used as an element of a visual system, to create larger illustrations based on the curves and lines. The flexibility of this visual system mirrors the flexibility of the website’s color customization. FUNCTIONALITY The website was designed to be used as a desktop application and not on a mobile device. I use this tool at work, when I am on a computer and am entering costs, or looking at what I have spent money on. This is not something I would do on a phone, but prefer to do on a larger screen because I also sometimes need to save reports as Excel files (.CSV files), so I can share them with co-workers in reports. Currently, the website allows me to view costs organized by categories. These are my “large buckets” that I keep track of that add up to my total, overall budget. FUTURE FUNCTIONALITY Next, I will create the ability to view costs organized by projects and cost-types/vendors. These terms are loosely defined, and can be defined however users wish. I am currently using the website for awhile, to completely work out all the small bugs with the current functionality of viewing costs by category. Once that is complete, I can copy the code over and modify each page to organize costs by project, and cost-type/vendor. This will complete my goals for the project. Being able to organize costs in three different ways will help my department understand where our money goes, and make more informed decisions every day.


d e fa u l t c o l o r s

m ou s e ove r s t y l e s

ca tegor y view

on ca tegor y click

on i nd ividua l cost click

enter cost

colorful code code portion // INSERT INTO USER’S COST TABLE $insert_into_costs = sprintf(“INSERT INTO “.$get_costs_table_name.” (cost_name, cost_dollars,cost_project_id,cost_category_id,cost_costtype_id)” . “VALUES (‘%s’,’%f’,’%d’,’%d’,’%d’);”, mysql_real_escape_string($the_costname), mysql_real_escape_string($the_cost), $id_project, $id_category, $id_costtype); // INSERT THE DATA mysql_query($insert_into_costs) or die(mysql_error());

what it does This code enters costs into the user’s database, in their “Costs” table. Each user has 5 tables in their database: Costs, Categories, Project, Cost Types, and Colors. $insert_into_costs is a variable. Variables can be anything. This one is a place to hold instructions for inserting information into the database. It holds information that will ultimately go into the Costs table, in a new row for the new cost that is being entered. It is naming each table cell that it is about to put information into. The “VALUES” part of the code is then putting a value into each of the cells it just named. Once the instructions are finished being put into the variable $insert_into_costs the instructions are sent to the database with the next line of code, beginning with mysql_ query. This part of the code is the part that actually carries out the instructions, and enters the cost into the user’s Costs table.

color customi za tion d e fa u l t

Pa g e e l e m e n t s c h a n g e c o l o r, a l l o w i n g u s e r s t o p r ev i e w c o l o r c h a n g e s .

exa m p l e c o l o r s c h e m e

exa m p l e c o l o r s c h e m e

exa m p l e c o l o r s c h e m e

exa m p l e c o l o r s c h e m e

p r o j e c t a f t e r t h ou g h t s . UX (user experience). One of the things I struggled with in this project was the design of a color palette and look that would be visually appealing to everyone: an impossible task. I realized that a website that is used every day should consider a certain degree of customization in its design, to allow changes by the user to improve their experience. For a news website, for example, that could mean being able to change font sizes. For my particular website project, I decided that the customization needed was color.

unintended outcomes. Building a tool that allows website users to dynamically preview color style changes on a website can be used in any website development project. It would allow designers to preview color combinations and quickly and easily change them, without having to write the code. The PHP and mySQL scripts already write the CSS code, so any website that uses this tool would still have well-written code that adheres to good coding practices. As a web designer, it is time-consuming to make stylesheet changes. Colors spark my imagination, so having a tool that would allow me to preview my websites in different colors would also allow me to further the design conceptualization. Designers have different processes, and for me, playing a lot with color is what I do when beginning a project. Color combinations inspire me to think of shape and form, so I usually begin with color. Then after I am midway through a project, the colors end up changing, when the form and design evolves. For me, color is a tool to help push design forward. Building an actual web-based tool to be able to assist me in web design projects was a happy, unintended outcome of this project.

Sarah DeWeese | ARTD600K | Summer 2016