Marketing Web Designer
Overview:
Jt Design Solutions is a hand-coded Bootstrap website. A simple JavaScript lightbox is used for the portfolio gallery. There are assorted internal and external links to SlideShare portfolios, social media, and resources. Website was created in PhpStorm and continually uploaded to Github as site was produced.
My Role:
- Front-end development
- Bootstrap
- HTML5 & CSS3
- JavaScript & PHP
- Multimedia Design
- Information Architecture
- User Experience Design
- User Interface Design
Marketing Features:
- Social Media Connections
- List of Marketing Trends
- Educating the Viewer
- Cross-selling Resources
- Content Marketing
- Social Interaction
- Google Analytics
- Google Tag Manager
Once upon a time, there was a concept…
When the concept of the website first began, the thought of the website was to be a self-promotion website for displaying my artwork. After reconsideration of how I wanted to promote myself, the website turned into a self-promotion piece for a web designer with marketing experience.
Note: The overall goal of the website was to learn HOW to create a bootstrap website by hand-coding site. Use GitHub for backup and commit history. Utilize PhpStorm for creating site directory structure, php/html files, and linking to host site. Use Slack, GItHub, and email as a communication tool. Learn the work flow of a web developer. Use JavaScript/jQuery functional elements for a gallery portfolio. On this project, the overall design of the website was secondary to the creation process.
Finished Website
The primary goal of the site was to highlight my skills as a student entering into the professional industry, connect social media profiles in one location, and to be visible in an online community.
The secondary goal of the site is to showcase a portfolio of my current and past work within the print and online community. Contact information as well as an email contact area for questions or concerns will be available to viewerss of the site.
Down the rabbit hole we go…
The final layout was simplified visually from the first draft wireframes and reorganized to have multiple 'jumping' points for the viewer to travel through the website based on their seek for knowledge.
On the jt Design Solution home page, viewers can select items from the header navigation menu. Three colorful links in the middle of the page lead to specific pages that are briefly summarized on the home page. Call to action buttons are located at the bottom of each summary. Specific links from the header and body of the page are reintroduced in the footer of the website as well as social media buttons. An elevator button is activated at the bottom right of page as the viewer scrolls down the page. Pressing the elevator button sends the viewer to the top of the page.
On the My Story page, a side navigation appears on the upper left side of page that links the viewer to the pages described on the home page. A responsive family photo is place at the top of the page that shows more of the image as the browser window is scaled smaller—showing full body length at the smallest display screen. A Google Map is embedded into an iframe circle that locates my family home town that is briefly discussed on the page. A viewer can read additional information about my family's home town by selecting link that lends to Wikipedia. A clickable image of me is located on the about page along with links to two of my social media accounts.
jtDesignSolutions Home Page
My Story Page
On the Chat with Me page, you can read an inspiring poem. Send me an email by clicking the button that brings up an email window for a new email message that already has my email address in the 'To' field.
On the Outbound Marketing page, you can read a definition of what outbound marketing is. A javascript lightbox displays portfolio examples. Descriptions of the portfolio pieces can be seen on a pop-up window when an image is clicked. Two links lead to SlideShare presentations. The sidebar navigation menu is located consistently throughout the website on the upper left area of the page.
Chat with Me Page
Outbound Marketing Page
Share this page with friends.