EXPERIENCE 4

1. Personal Connection

​

     During my final co-op as a UC student, I will be preparing to land a post-graduation job. In the design field, each job application requires a prepared portfolio of all my best work. Networking and marketing myself as a designer for hire is most easily done with a portfolio website. A website is better than a traditional pdf portfolio document because it can be made interactive with the viewer, include animations or videos, link to relevant sources, and be highly customized for each project.

     I strategically took a Web Design class during this past semester so that I could learn HTML5 and CSS to begin coding my very own website from scratch. My online portfolio will prove to employers that I not only have the industrial design capabilities they are looking for, but also good presentation skills and coding knowledge. Having a website lets me connect with other people in the design world, prospective employers, and students. I’m excited to put my new skills to work in this project!

​

​

2. Detailed Abstract

     

     Coding a website from scratch involves: creating the foundational layout for my site using HTML5, then making the layouts for additional links and pages, editing my industrial design projects to match the layouts, filling all those sites with the content of my design work, and finally coding appearance rules for every single item using CSS. My site will consist of at least 5 pages: a homepage, an about/contact page, and 3 separate industrial design projects.

     My co-op advisor recommended that I begin applying for full time positions at the end of October. This gives me 10 weeks to get my website ready to show. I plan on dedicating 8 hours/week to this project, doing it after work at my co-op job and on weekends. By putting in a “full work day” each week, I should be able to finish one page of the site every two weeks.

​

​

3. Connection to Learning Outcomes

 

From the Creativity Thematic Area:

 

Explore a new creative competency/medium or seek new ways to engage an existing competency/medium

     I recently learned how to use coding in HTML5 and CSS as a medium for visual communication on the web. Every nice website is a work of digital graphic art. The arrangements of shapes, the movements, and each of the colors are intentionally customized. I am still a beginner and have a great deal to learn about how to make a website look well designed. Professional websites often have animations and interesting interaction points to draw in the viewer. I plan on first benchmarking some other websites that I admire for inspiration. Google Chrome allows you to right click and hit “Inspect” on any website to see the HTML that built it. I will figure out the interactions that are appealing on my favorite sites, and then research the code for these designs so that I can make my own site more engaging.

 

Understand and optimize the use of people, technology, physical resources or community in a creative process

     My creative process for this website will actually start on paper. I will need to create basic layout plans for all of my pages so that I can start with a plan when I get into HTML5. Good websites are highly structured and follow a consistent format on each page, which requires significant pre-planning in order for the coding phase to move quickly. Putting in extra thought about exactly how I want everything to look at the beginning of my process will help me code efficiently. Next, I will use coding-specific software called Sublime Text to type up my website code. Whenever I get stuck, I can reference the many coding forums and communities that exist online, including W3Schools and Alligator.io

 

Personal Goals:

 

Create an HTML5 and CSS layout that is easily transferable to new projects

     Slapping a quick website together for one time use is not very difficult. My portfolio website, however, will be different because I want to be able to easily update it in the future as I create more presentable Industrial Design work. In order to be able to quickly add content and make big theme changes, I need to be very intentional with the way I set up my CSS aesthetic rules. I learned some of these best practices for efficient coding in my Web Design class. When I set up overarching design themes in my code, they will help my website feel consistent and well branded. Since I am making at least 3 project pages, each of them will follow the same CSS rules that will be refined and improved more and more as I add projects.

 

Consideration for UI design in making a website that is engaging and easy to navigate

     I have never done very much User Interface design, but I intend to use this project to learn more about how people interact with digital interfaces and how they look for information online. I want to place content right where the user expects to see it so that they don’t have to hunt all over my website for important information. I will also pay attention to details by adding subtle animations and user interactions on my website to make it feel modern and smooth.

​

​

4. Academic Resources Connected to the Learning Outcomes

     

HTML and CSS: Design and Build Websites by Jon Duckett

     This was my textbook for the Web Design class I took. It is extremely helpful in teaching the basics of both HTML5 and CSS and provides resources for further learning. Whenever I want to refresh my learning from the class (because I know that something is possible but I forgot how to do it) I can reference this amazing book.

 

Web UI Design Best Practices by Dominik Pacholczyk

     This book will help me learn the techniques used to create engaging and effective websites that draw people in and let them find the information they want quickly. It will heavily influence the layout of my website and how I code interactions like buttons and navigation elements.

 

The Magic of CSS by Adam Schwartz: https://adamschwartz.co/magic-of-css/

     This online resource is full of example code on how to make cool effects using CSS. This will expand my knowledge and let me put more professional looking elements (shapes, colors, animations) into my website.

​

​

4. Reflection

 

     I think that the biggest thing for me to keep track of with this project is my rate of success at creating a website that is easy to use. The biggest turn off to a potential employer is if they have to spend extra time hunting around a non-user-friendly website to see the design projects they care about. I don’t want my viewers to have to work for my content. My reflection will focus on creating User Journey Maps. Whenever I create the layout for a new page, and when I complete that new page, I will create a map (sketched on paper) of how a potential viewer would get to that page, interact with the content that is there, and then leave it to look at other pages.  I will need to ask myself:

Are the steps simple? (Less than 3 steps)

Are the steps intuitive at first glance?

Are the steps consistent to other interactions across my website?

What is the first thing that the user sees?

​

     Answering these questions with every page I make will help me create a strong brand presence because everything will look consistent. By applying User-First design methods to my website development – coached by my academic resources – I can create a site that viewers will enjoy.

​

​

5. Dissemination

 

     My target audience is the design community, particularly employers and senior designers. If I can get these people to recognize my work, it will be increase my chances of being hired. I will be sharing this website on LinkedIn, Coroflot, Behance, Instagram, and every job application I fill out during the Fall semester. I’ve been diligent about making connections on LinkedIn, and I will definitely be checking out job openings and marketing myself on that platform. Coroflot and Behance are online databases specifically for the design community. I can upload my projects, easily search for jobs and connections, and link my profile directly to my website. I’ve also used Instagram intentionally (more like a business account and less like personal social media) to curate my work and link up with design blogs and agencies. Additionally, if I publish any work during that semester (whether that be in competitions, or on online magazines like Yanko Design for example), I will ask for my name to be linked to my website. I will also do my best to make my website Search Engine friendly by captioning images and following Google SEO protocol.

​

​

6. Project Advisor

 

     Eric Anderson will be my advisor for this project. He was my recent Web Design class professor, and he showed genuine interest in the success of his students. He was always available to help during his online office hours, and he put special emphasis on teaching us good web design methods along with the necessary code. Whenever I need help doing something specific for which I don’t know the code, I can email him.

     Once I have some code ready for him to see (during the fourth week of this project), I will reach out and get his feedback on making my site more accessible to web-readers and search engines. This will allow my website to be found by people using Google to search for industrial design work, thus expanding my network. His contact information is: anderse4@ucmail.uc.edu

​

​

7. Budget

​

I will pay $15/year to keep my individualized domain name (eamdesigns.com) and an additional $3/month to have my website hosted online by BlueHost.