9A HTML and CSS Coding Project


Code a custom webpage with HTML and CSS.

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. First I created my logo in Illustrator. I enjoy marketing and made this my focus.
2. I resized my logo to be 450.
3. I downloaded the HTML file and input my own content and added appropriate tags.
4. Then I downloaded the CSS file and made adjustments according my style and coloring.
5. I changed the body font to Verdana, and the Heading fonts to Cheek.
6. I knew that a lighter background would be best so I selected white for the body, and light grey for the surrounding white space around the subject page.
7. I validated both my HTML and CSS. CSS was fine, but I continued to get an error on the HTML suggesting that the “head” tag already existed. I checked and re-checked, but at length could find no way to correct this and concluded that it may be an error within the validator since no other tag exists with that name.

I received a lot of feedback regarding the logo design via Facebook friends, and another classmate who suggested that I get away from the Papyrus font and use a rectangle to lengthen the stem of the “P” so that it achieved the look I admired in the Papyrus version. I spent half the day working on this, and then checked with my wife to see which she preferred, and she said that she still likes the Papyrus version better, and I agreed. So I spent all of that time creating a new one, but now I know I like the original best. Here’s an example of the new version I decided not to use.


Reach your target audience effectively with our marketing services.

Local, SMB (Small to Mid-sized businesses).

You don’t have to add extra shapes to your text to alter it’s appearance uniquely, you can actually select each letter individually as a separate object as I learned from a Youtube video after spending some time trying to match up a rectangle’s dimensions with an “I”.

Complementary // Red, White, Black, and Light Gray

Cheek // Modern

Verdana // Sans Serif


SOURCE OF EACH IMAGE (website name and hyperlink)
The graphics are my own.

8A Infographic Project

Create an infographic that organizes data in a visually pleasing way.

PROCESS (Programs, Tools, Skills, FOCUS principles)
1. I’ve been in banking for 8 years, and felt comfortable talking about the home ownership process.
2. I sketched my ideas and a potential picture for it.
3. I mapped out color schemes.

Instructor suggested that it was one-sided, so I adjusted the content, so I adjusted that.

Didn’t receive any other feedback on FB, but I had some improved design ideas that I implemented.

The pros and cons to renting and home ownership.

Anyone 20+ as mortgage companies don’t tend to lend to individuals who have less than 2 years of credit history, and one cannot begin building credit until they are 18.

Illustrator is an extremely powerful tool, and because of the many features and functions it possesses, it naturally has a steep learning curve. I still can’t believe how much time I spent making what I feel is a very simple design, but I believe that with practice, like most things, it will become easier, and I will get better at it.

Complimentary: Red, white, black, blue, and gray.

 Perpetua // Oldstyle

Verdana // Sans Serif



SOURCE OF EACH IMAGE (website name and hyperlink)
The graphics are my own.
Source of graph data: Personal research in Salt Lake County, UT area where average rent size and average home size with monthly costs of $1,250 and how each compares.

Business Identity

Impact Marketing provides media design, and implementation for educating your target audience on products and services your business offers.





Front and Back of Business Card (Top: Front, Bottom: Back).


Create a logo for a company/service/organization and establish a visual identity across documents.

1. After brainstorming the idea for a while, I decided on marketing, for two reasons: 1) I enjoy marketing, and 2) If I can offer something of value for SMB’s in the realm of marketing, then I may one day use this project as a springboard for a side business that I’d enjoy doing later.
2. After I had my idea ready, I knew that I wanted my marketing to above-all, have an impact, so that name stuck, and I went to work.
3. I researched the assignment, and went through the tutorials, but I wanted more how-to knowledge on the Adobe side, so I Youtubed a couple more videos on creating logos, and business cards, armed with this knowledge, I created three distinctly different styles for a logo, and after asking everyone in the home (my wife, niece, and 7-year old), I needed more feedback, so I sought it out by posting my project on facebook, and received feedback from several individuals. The overwhelming consensus was to go with the above-shown logo design. I arrived at this design by accident when I was working with the gradient tool, and noticed that the circle started to disappear on one side, I moved the circle over the “act” part of “Impact” and it all came together, ‘looked like it belonged there.
4. After gaining that design idea, I toyed around with several back-side options for the business card. In one idea, I thought it would be clever to reverse it, as if you’re looking at it through a mirror, but I eventually decided that this was just tacky, and relented for a different option.
5. I received feedback on changing the Myriad pro, and the Papyrus Typefaces, and while I agreed to change the Myriad Pro to Verdana because I felt it looked better, and flows well, I couldn’t find another Typeface with a pronounced stem for the “P” like I did in Papyrus, and that was an important part for me, so I have chosen to stay with it for now.

Critique Process
I posted the different logos on facebook to gain enough feedback for a conclusive response on which logo design to move forward with, and then I posted my business cards and letterhead (although later than due on that day), and was graciously rewarded with some sound feedback from Jacob Casal who suggested some spacing corrections to free up white space, and help the logo feel not so cramped, so I did that. He also suggested changing the font types, and I changed the one, but couldn’t find a good replacement for the other (Papyrus), any suggestions? It needs to be one that has a pronounced/extended stem on the “P”.

Facebook Critique by: Caleb Kirk, Cory Cannon, Julie Holbrook, Maria Stephenson, Robert Reed, Raymond Adams, Tim Roush, Jared Wagner, Jason Maner, Tracy McCleen Pulley, and James & Karlene Opfar.

Classmate Critique: Jacob Casal

When you need your company, product, or service to get noticed, we can make an impact.

Local SMB owners

Top Thing Learned
Sometimes the best things happen by accident, don’t fault it for being an accident, it may be just the thing, so be ready to go with it.

Color Scheme & Color Names
Complementary / / Red, Black, and White

Title Font Name and Category
Papyrus / / Script

Copy Font Name and Category
Verdana / / Sans Serif

Thumbnails/Unedited Images

Source of Each Image
The graphics are my own.

Photo Design Project

By Robert Wagner (photo credit by my super-awesome niece, Rachel Little)


Video Description

By using photography and design skills, create a project that encompasses a consistent color scheme from the image.

Process (Programs, Tools, Skills, Focus Principles) 
For this  project, I wanted something with more color than the white, and other shades of white that our snowy climate currently offers, so I checked through our recent family photos that our niece lovingly took for us (using the Nikon D5200 we purchased as an early Christmas present in November 2014), and I found the above photo. As I looked into my daughter’s eyes, it hit me that this photo speaks about visual communication with our children, so I went to work on that. After uploading the photo in Adobe PS, I adjusted the levels, variance, and selective color to arrive at what I felt was visually pleasing. The actual colors that I chose for the text and background color in the boxes, came from eye-dropping a sample from the background, another sample from the background, and one from Lydia’s eyes.

Color Scheme
I used a monochromatic color scheme, focusing on the greens in the background, with a few bluish-green variants in some of the text and background boxes. Because I pulled these colors off of the photo, I gave them custom names such as “leaf background” and “eye color”.

I received some great advice from Marci Grimaud on our Facebook draft in which she made me aware that my text was super-close to the edge of the photo (that’s a no no). I was glad she said something, so I addressed that before going to print, and then I realized I had to cut the edges off still to make it a full bleed so… oh well. Lesson learned, that’s WHY we have to leave .5 inches between the text and the edge. Fortunately it still came out okay, but I will watch for this better next time. Additionally, the instructor clued me in on the mixed message that my original font sent with a mature message.

This piece is really intended for young parents, or parents with young children. There is a lot that children will tell you, if you know how to listen with your eyes.

Look into your child’s eyes when they’re sharing something with you, feel their experience, and get the whole message, or in other words, put down the #$%@ phone! (that says “darn” in case you were wondering)

Fonts Used
MS Reference Sans Serif / Sans Serif and Segoe Print / Script

Thumbnail of original

Image Source
Taken by my niece for our October family photos at Wheeler Farm in Murray, UT using our Nikon D5200. These cameras are wonderful prosumer cameras.

Thank you for stopping by!

Week 3 and 4


Link to Prezi


Students and young families


If you don’t control your money, someone else will

Overview of project

I love art, and I love learning how to improve my typography and graphic design skills, but just because you love art, doesn’t mean it will be easy. This week has really tested me with software application, finding and creating the right photos to use in my Prezi, and how to get it to do what I want it to.

I’ve worked in banking for a long time, and it’s still amazing that over 80% of the people I meet with do not have a budget (and really need one), I can’t imagine just winging it, and hoping everything works out, so building a budget became my topic, and I hope it helps some people.


The photos are all my own. I found way to implement some of the family photos that we took in October, but for some of the photos, I had to create my own especially for this project, which took some time, but I’m pretty happy with how it came out.


After messing around with the background, and some images on it, it just created too much variation, and was not a good backdrop for the foreground text, so I decided instead to just fill the background with a light blue color (since blue fades into the background, and pushes the other elements forward).


Here’s a sketch of how I laid out my idea, I later decided to just go with a more uniform system, so I organized it a little bit different, I wanted it to flow from main points to sub points. I changed the conclusion a little as well, providing for my family adequately is perhaps the strongest goal I can think of for keeping a budget, and it’s always there.



Somehow, I missed the due date for the critique on Facebook, I still posted it for practice, but that was really frustrating. I was relying on the due dates on the right of i-Learn, but then realized after seeing everyone else’s post that I missed something, and sure enough, I should have checked my email. Lesson learned, check email more often.

Since I missed the due date on that one, I watched the videos posted to gain some insight on what to do as I work toward my final Prezi project to turn in.

Week 13

This week was awesome! We talked about how to build our site’s ranking and link-building, and later on did an overview of how to use Google Analytics more in depth. I think my favorite part of this week was when we checked our site’s woorank at woorank.com. Woorank provided me a ton of ideas for how to improve my site, such as adding pictures, reducing load time, and boosting rank with quality link-building, but my favorite was the suggestion to edit the Meta data with keywords because it’s so easy to do, and so effective at getting the site to come up on searches.

Now that we have our final project, a presentation of our web business, coming up I REALLY need to get the art part done. I haven’t really had a ton of time because I’ve been trying to keep up with all of the other homework this whole time (this is not my only class), but maybe I can take care of that on my lunchtime at work. Can’t wait to show the world what Jacky-Jack looks like.

Week 12

This week was a bit overwhelming to be honest. In hindsight, I found out that it would have been easier if I had checked my email more regularly. Oh well, so this week we did Project# 4, two study topics, two discussion boards, and of course our regular weekly wrap-up assignments.

Our topics this week were wrapping up the Adwords campaign, and introducing SEO and SMO marketing strategies.

I really enjoyed these topics because I gained some exposure in 2008-2011 when I was more involved with Youtube, and I learned some new ideas for networking the different SMO outlets together for best results.

One of the best ideas I got from this week came from another student who suggested I use my Jacky-Jack stories in live settings, such as an elementary school, to share it with the kids, and give the card with my website on it so that they can go home and read more Jacky-Jack stories. That was perhaps one of the best ideas ever because being in front of somebody is so much more powerful than trying to reach people simply online.

I just need more time to go and do that kind of thing now, ha ha!

Week 11 Reflections: Website Optimization

This was an awesome week! I’ve had questions for years that were answered in the last seven days about what ranks a website higher (which rules have changed recently), and how to get your website to rank up in search results.

I’ve earned about 22 clicks from Google Adwords, but my site has enjoyed over 150 sessions, and 320 pageviews since I made it available to the public. It’s not an over-the-top stellar site, not full of impressive graphics, or interesting games, and doesn’t really sell anything. It’s just a site that offers children’s stories for parents to read to their kids at bedtime, or whenever. To be honest, I don’t know why it is generating more interest on its own than my Adwords campaign is, but I think that there are two things that really help: 1) My site offers the service of wholesome, children’s entertainment, and it does so for free. 2) It does not employ any advertising to third party sites at this time. These two features improve the sites value to the end-user, and I think that is the number one driving force for a site’s success. A site that genuinely offers value (in this case simply exchanging time to view the site), gets talked about, shared, and re-visited in the future.

If I were to add third-party site advertising, and charged for my stories, the site’s numbers were almost immediately drop off because it affects what is known in marketing as the equilibrium point at which the cost of a product exceeds its value. Stories like this generally need to be free to get distributed, so how do I plan to monetize the site? By building a brand, and licensing that brand to toy-makers, game-makers, and so on.

There’s only one thing that I’m struggling to find this week. I came across a site that measure’s one’s website’s mobility friendliness – among other things – and it showed me what I need to do to make the site function better as a user experience, but now I can’t find that site 😦 – just others that are similar to it. It has to do with download times, and the top portion of the website, etc. If you think you know what I’m talking about, please comment and let me know where you think I need to go to recover that site, I really want to apply those tips and improve the end-user’s experience.

Thanks! Till next week,


Click the link below to view the site, and enjoy reading The Adventures of Jacky-Jack to your children.

ROI, Conversions, and Optimizing Ad Performance

This week we studied ROI, Conversions, and optimizing our website. ROI stands for “Return on Investment” and basically answers the golden question, “what am I getting for my money?”. If the ROI is good, you’ll make more money on the sales generated from your advertising investment, but if the ROI is not good, then you spend more on advertising then you make. It doesn’t always have to be money, sometimes the objective of the advertising can be for things such as subscriptions, or gaining contact info for a visitor. The objective of the marketing can be tracked by an event known as a “Conversion”. Most conversions are actual sales on a site, but they can also be when a visitor clicks on a key link, or visits a key page on the site.

One way to improve (or optimize) ad performance to generate a better CTR rate, or higher rate of conversions, is to add quotation marks (“”) to your key phrases which causes only that phrase to show up, instead of the words within it independently. You can also add “Negative Keywords” which are words for when it might cause your site to show up in a search list even though it’s unrelated.

Since my site is about kids and pre-schoolers’ bedtime stories based on the adventures of a tiny, little pumpkin, so naturally I don’t want my site showing up on searches where people are just looking for Pumpkin Pie, cookie, and other pumpkin recipes. So I’ve added those to my negative keywords list.

Hope you have found this helpful, it’s been a busy, but a great week!

View Jacky-Jack’s Website!

Week 9

This week we worked on Adwords scoring, and connecting Adwords to Google Analytics. The goal was to narrow down our marketing verbiage to the most effective words and phrases to generate impressions from our target audience. The other goal for this week was to identify the benefits of connecting google analytics and adwords together.

That part was easy, google adwords is to generate traffic to the site, google analytics is to measure the behavior of those visits in terms of how many visitors we have experienced, how many are new, how many are return visitors, how long they stayed on the page, what percentage left without navigating beyond the landing page, and so on. Why this information matters is because it can get expensive to drive people to your site, and using the most effective words, and understanding which pages of the site visitors remain on, and which ones they don’t show much interest in is a key-indicator of where we may want to invest some more time improving those areas of our website.