Creatively Technical
For a course on web programming, I conceived, designed, and wrote an informative website from scratch about the several different fields that merge art and technology.
By Lauren D. Bhagwandat
Who Is It For?
CreativelyTechnical.com is a resource hub for all things related to the creative industries. From career profiles, to tutorials and my own art blogs, visitors can gain insight and skills for careers and hobbies that leverage their artistic and technical interests.
Tools
The website was written in HTML, CSS, JavaScript, and jQuery. The Bootstrap framework was also utilized.
Imagery not coded in CSS was done using Adobe Illustrator and Photoshop.
My Role
I developed the entire website myself, from creating use case scenarios to programming the website to making it live.
User Personas
Before starting the design and development processes of my website, I created five fictional, yet believable, individuals who may be interested in what my site will have to offer.
Since I wanted my site to be useful to a large audience, I made sure my personas consisted of individuals from a wide range of ethnicities, cultures, ages, skillsets, professions, locations, and personal goals.
I was careful in designing each persona so that the imagery reflected the individual’s personality, interests, or profession. Although they vary greatly in style, they all provide information about the individual’s motives, knowledge & skills, age, gender, education, status, location, goals, biography, and why they would use my site.
Features
Navigation
The website’s main navigation bar is fixed to the top of the window once scrolling downwards brings the bar to the top of the window. Once fixed to the top, the background of the menu becomes an opaque black for visibility over the page content.
The search field at the top right of the corner of each page allows for quick navigation to pages that contain the searched keywords.
There is also a site map that can be found at the bottom right corner of every page to that provides nested lists of every page of the site based on category.
Blog
The blog page is where users can become more familiar with myself and follow my own creatively technical journey. I cover topics spanning my discovery of my personal interests in one of the creative industries, to my processes for specific personal projects.
Creative Industries
The Creative Industries page lists several general professional industries that involve some combination of technology and art, whether it be visual, interactive, or audio.
Either clicking on the “See Careers and Skills” for a specific industry from The Creative Industries page, or clicking the Careers submenu under Creative Industries in the main navigation menu, will take you to the Careers page. This page provides a few different careers and their corresponding roles, education, and skills in each of the previously listed creative industries organized in tables in order to focus on only the important pieces of information. The row where the mouse cursor is hovered over turns a blue hue to make it easier for the user to focus on a particular career at a time. Under each table is a link to an external website that I believe will have additional information that would be helpful to a user who wants to know more about the listed careers or wants to see more options.
The Tech & Software page in the Creative Industries submenu provides a select list of useful external sites with information regarding the best technologies for specific creative tasks.
Interviews
The Interviews page features a weekly interview and several other external interview links for each of the creative industries to provide users with quick and easy access to inspirational stories about other professionals’ experiences in pursuing their creatively technical dreams.
Learn
The Schools & Education page in the Learn submenu provides links to external resources for online and on-campus education focusing on the skills required for jobs in the creative industries. There is also a section that provides external resources that may help the user determine which institution would be best for them.
The Tutorials page in the Learn submenu includes a plethora of weekly tutorial suggestions for each industry, links to tutorial hubs, and even book suggestions for inspiration, tips, or instruction on how to improve specific creative and/or technical skills. The featured tutorials that are videos can be played directly within the CreativelyTechnical.com webpage and pauses whenever another video on the page is played so that the user does not have to keep opening YouTube webpages.
Connect
The Contact page, found in the About submenu, provides means for a user to email me a message regarding the site. The form feature still requires some refinement so that an email is properly constructed and sent to me behind the scenes upon filling in the fields and clicking the “Send!” button.
Users can also connect with me through the social media buttons on the Contact page or at the bottom right corner of every site page. These buttons take the user to either my Instagram, Facebook, or Google Plus account.
NOTE: Google Plus has since been shut down by Google as of April 2019.
Visit CreativelyTechnical.com.