SEO, SEM

Let’s talk about Search Engines.

There are Search Engine Optimization, and Marketing, and online reputation management.

Search engine optimization is the process of increasing the quantity and quality of traffic to your website through organic search engine results.

According to moz.com the quality of the traffic is the results of the search. The quantity of the search is the amount of the right people clicking on the right pages. For pages you don’t have to pay for are good, these are known as Organic traffic. You’ll know that by seeing the ones that say “Ad” on it.

Stuff like this

SEM, search engine marketing, is a form of internet marketing that involves the promotion of websites by increasing their visibility in search results through paid advertising. According to wordstream.com, SEM will use paid ads to gain traffic. Businesses will pay google (or whatever search engine they decide to use for some reason) to show their ads in search results. They auction for the spots and the highest bidder gets the spot. Right? WRONG. It certainly is advantageous for this but it isn’t necessary. To “win” an ad auction the two main factors that google evaluates, maximum bid, and quality score of your ads. Maximum bid is the max amount you are willing to pay of the ad, and quality score is the metric based on the overall quality of your ad.

Now online reputation management simply is the controls and regulation of a group or individuals reputation online. These companies do this using search results the regulate the groups reputation.

Onto the Jobs

Lets talk about jobs now. Entry level jobs start out as $20,500 a year, and the non-entry levels go past $50K. Right now as we “speak”, American creative in Fort Lauderdale is urgently hiring for website project manager and technician. They’re paying $20- $25 an hour, and for this job you need to be proficient in HTML, Photoshop, WordPress, and Microsoft Office. It includes flexible hours, and paid time off.

So this is another part to web designing that you should know about. Now get out there and make people popular.

Responsive web designing

When It comes to designing websites you must make the designs responsive, otherwise they will not be functional as a website.

When you go on a website and you see the mouse change or the thing you’re pointing at do a thing that shows that the website can take you somewhere else.

In the adobe software “Dreamweaver” you can create websites like the one I’ve made in HTML. You need to utilize the HTML (the structure) and the CSS (the design).

the guts of a website

In the HTML portion of the site, to make a hyperlink you need to add the opening “<a>” and closing “</a>” around the word IMAGES. But the <a> needs to have a href= in the opening “<a>”.

Jobs for this

There are a few positions open on Linkedin right now. These jobs can pay up to $41K – $127K depending on the job you are doing.

  • Junior web developer for EverCommerce. The job requires that you know HTML5/CSS of course, photoshop and strong ownership and accountability to judge multiple projects. It offers 401k, public transportation reimbursement, medical/dental insurance, parental leave.
  • Assistant WordPress developer from Dealer Inspire. Like how we talked about wordpress, this is yet another job that involves wordpress. Of course this requires you to know how to use wordpress. Also HTML5/CSS, and remain calm cool and collected under pressure (I cant do that).
  • Junior application developer Association for Talent Development (ATD). This job need you to design and implement web-based solutions. You need two years of CSS/HTML, experience in SQL.
  • Interactive designer from Sandhills Global. These people require you to know adobe software like photoshop, illustrator, and/or dreamweaver, and be able to learn new technologies and business functions.
  • Junior Web Developer for Stansberry Research. Like the others you need to know HTML/CSS. However you need to have 1-3 years of web development experience, and you also need to have a bachelors degree in computer science.

And this is some of the information you need to know about interactive design.

How to make animated web content

Creating animated web content is sort of like making animations for other stuff. For those of you who don’t know, animation is basically a method where figures are manipulated to create the illusion of movement. There is both 2D and 3D animation, and in the world of web designing you can technically do both.

From what I’ve read Toonboom is one of the top ten animation software’s for “animation” but personally I use Photoshop for manipulating pictures.

The timeline

This is the video timeline you will see

In every animation software, or movie making software in general, there will be a timeline showing you what will happen in the “movie”.

If you saw my post on: how to make a gif (not JIFF) then this should be no surprise to see this. The only difference here is exporting as an .mp4 than as a .gif.

pivot points

In the timeline I’ve added transformation pivot points to this animation so that it starts from one way and finishes on another. For this I made “rain drops” on one point and then I transformed them to look like they’re falling on the end point.

Final result

Now photoshop is a program you can use for animation but there is adobe animate that you can also use, which is specifically for animation as you can tell by the title of the program but you can also use it for html coding. Which is how most designers make there web banners for ads.

But don’t just take my word for it, try to use these programs yourself, and see what you can make.

Animated web banners

Animated web banners are media used to advertise and promote your company or a product you’re selling. You probably seen stuff like this

The ad that looks kinda like a flag

on some website you were on. Their job is to get you to go to the company site and check out their products. Kinda like tiny commercials that aren’t in your face.

From hartthedetctive.blogspot.com

This ad for example looks like a good ad to promote a car dealer. The Text changes, the cars lights flash and the information is on it.

ad by freelancer.ca

This ad has appropriate colors to show case the type of shoes you’re trying to promote; like reds, ans pinks and shinys. The words even change color as well.

ad by wordstream.com

This ad looks like something from a show right? Unlike the other ones, this one isn’t animated. It not being animated isn’t the end of the world for it will still look good but it would look more “catching” if it was moving.

Ad True Citrus Things by Lindsey Paolucci on pintrest.

This one has nice contrast in color, just enough so you can see the clock from the background, and the text is well organized so it’s easy to read.

 ad by Vũ April from pintrest.

This ad you can tell is a labor day promotion due to the labor day message and the big “fifty percent off” in alternating colors. And the red is the right amount of contrast just so you can see it.

There’s a job posted on indeed for a Digital experience designer. The pay like most other jobs I’ve explained before is about $72,000 a year, and requires 3/5 years of mobile/web design experience preferably for an agency, possess strong creative problem solving skills and of course you need to be proficient in adobe software including knowledge of HTML, CSS, and Javascript.

Now you know what ad banners are and what nice ones look like. So lets get out there and show the world wide web your advertisements. Just remember not to use comic sans or the internet will shun you, and your employer will in fact yell at you.

Lets talk about wordpress

Want to design a professional website? Then come on down to NOT wix.com and instead use wordpress. Why should you use wordpress and not wix? Simple, it’s FREE!

Hold on there’s more.

THE Content Management System

Word press is one of the most popular CMS’s (content management system) in the world, 26.8 percent of the world wide web runs on wordpress. Few reasons include it’s cost, what it runs on, it’s usability, and much others.

  • The cost: It’s free! Well the basic stuff is. The more advance stuff does cost an amount, but you can still make something nice without paying for anything.
  • It’s accessible on all platforms: This site utilizes HTML, CSS and Javascript. Basically whatever a website needs to keep functioning.
  • It’s usability: It’s more simpler to use. When you use it for the first time you’re obviously not going to understand everything in the site has to offer because you’re just starting off and you need to use it for a while before you get an idea of how it works. And lets also face it, you’ll never understand anything everything you try for the first time, so GOOGLE IT.

Jobs for wordpress

So what jobs can you get as a designer using wordpress? There are a few, but right now let’s talk about one of them.

According to this post on indeed there is an opportunity as a web designer. Your job is to create wireframes, storyboards, promote design guidelines, best standards and practices. It’s a full time job and it pays $45,000 – $50,000 per year; with 401k, parental leave, flexible scheduling, paid time off, and health benefits. So of course it’s a great job to get.

If you want to pay someone to build a website you might pay between $100 – $500 to $3,000 to even $30,000 depending on the site that you want make because “bigger” sites depend on more resources and resources are not cheap at all.

So this is why you should be using wordpress and not wix or squarespace or anything like that to design websites. As a matter of fact I’m actually using wordpress right now to write this article. Now go make a website; and remember, this article is NOT sponsored by wix.com or squarespace.

Web banner ads

My “web banner ad”

Web banners are display image advertisements, and are widely used online to attractively display products online across an array of websites. Here are a few ways you can do these amazingly, you need to consider size, context, the call to action, and other components. According to: smashing magazine.com these are the best ways to design ad banners.

Sizes

For the size of ads, a thing to note is that each site has their own different requirements. There are three different types of banners; rectangles, banners/buttons, and skyscrapers.

Rectangles

  • 300 x 250 medium rectangles
  • 250 x 250 square
  • 240 x 400 vertical rectangle
  • 336 x 280 large rectangle

Banners/Buttons

  • 468 x 60 full banner
  • 234 x 60 half banner
  • 88 x 31 micro bar
  • 120 x 90 button 1
  • 120 x 60 button 2
  • 120 x 240 vertical banner
  • 125 x 125 Square button
  • 728 x 90 leaderboard (not a scoreboard in a game)

Skyscrapers

  • 160 x 600 Wide skyscraper
  • 120 x 600 standard skyscraper
  • 300 x 600 half page as

Best ad practices

Now to talk about what to put on the ads. To start off lets have strong headings. Draw in consumers with variations of font sizes and colors appropriate for what you are trying to sell that also contrasts from the rest of the ad. Much like the strong headings, it’s important to display the appropriate images that accurately display what you’re trying to sell. When it comes to a call to action, remember that you will be competing against other guys selling similar things, so be sure to be VISUALLY ENGAGING with word telling people to “Check you out”.

Resources for templates

To get started on banner ads there are sites that have free templates you can use to make some. Though some of them you’ll might have to sign up for. For instance:

There are job listings like this one for a Digital Designer at Desert Publications, Inc. in Palm Springs, CA 92262. They pay $45,000 to 65,000 a year. This job requires you to produce the design of websites, social medias and banners. You need experience in HTML, photoshop, FTP, and web design. You also need to have a reputable portfolio showcasing your accomplishments. It’s a full time job that does come with benefits.

And that folks is how web banners work. Now granted I didn’t use templates for mine I made them from the ground up. It was kinda fun actually. No go have fun yourselves.

Website Wireframing

Wireframe is the blueprint for a website

When constructing a website something you need to understand is that it’s just like building anything else and that you need to plan it out.

A wire frame is like a blueprint for your new sites. Without a blueprint for anything, then there’s no direction and if there’s no direction then there’s nothing to build, you cannot build without any form of direction. Without a wireframe the website will be a mess, and that’s uncool. So plan always.

Wireframing digitally VS traditionally

When it comes to wireframing you can do it with on a device or on pencil (not pen don’t be a neanderthal) and paper, or a board. Personally I don’t think it really matters which one you use because all that matters is what you’re comfortable using. I’m more of a pencil and paper type of guy so everything that I do starts out on literal paper and digitized later.

Wireframe tools

There are so many wireframe tools out there. Some costs money but some are also free to use. Here’s a few programs that you can use that wont cost you anything.

  • Lucidchart: you will have to sign up first but you can use the free version. Paying for it gives you more options on the site but we don’t need that if all we are doing is just very few things like wireframing.
  • Framer: it’s another site you have to sign up for, but you can still use the site to wireframe without paying for any memberships.
  • Wireframe.CC: It’s like writing on pencil and paper. It’s simple to use and you don’t have to buy a premium for that. However, it does lack mock-up creation, prototyping, and screen capture. So while it is simple to use, it does lack complexity.
  • Figma: Is a cloud based platform great for sharing and collaboration with team members. It’s free but for only two members and on three projects at a time.
  • Pencil project: It’s all FREE! Diverse UX tool, good amount of interactive elements, and especially known for it’s diagramming capabilities, linking shapes, wireflows, and other flowcharts is made quick and easy with Pencil Project’s “connector” tool and linking page. But because it’s free there are things this program lacks, like the good collaboration features, and the shapes are a bit lighter than other programs.

And that people, is how wireframing works. Remember, always construct a blueprint before doing any project otherwise you’ll be dealing with an absolute mess.

What is UX/UI?

More things to know about designing is a little thing called UI/UX designing. What these developers do is apply interactive and visual design principles on websites and web applications for a positive and cohesive user experience. These developers use HTML, CSS, Javascript or some other design tools to achieve responsive designs. UI,UX and front end developers are assisted by back-end web developers, who are responsible for server- side application integration and logic. UX and UI are in fact two different things however. UX stands for User Experience design, UI stands for User Interface design.

According to careerfoundry.com Don Norman, a cognitive scientist and User Experience architect, describes it as:

“User experience encompasses of the end user’s interaction with the company, it’s services, and it’s products.”

-Don Norman, cognitive scientist and User Experience architect

Basically, it encompasses any and all interactions between a potential or active customer and company.

User Interface design isn’t as easy to explain because it has a broad variety of misinterpretations, but it’s mainly the look, feel, presentation and interactivity of a product. It is the point of interaction between the user and digital device or product.

A/B Testing

Another thing you should know about is A/B testing (also known as split testing). This is the practice of showing to variants of the same web page to different segments of web page to different segments of website visitors at the same time and comparing which variant drives more conversions. The reason for these tests are for solving problems for the visitors

According to VWO.com, to perform these tests you need to perform these five steps.

  • 1. Research: Before building an A/B testing plan you need to conduct thorough research on how the website is currently performing. How many users are on the site, which page drives the most traffic, or what are the various conversion goals of different pages? According to VWO.com you can use Heat maps tools to determine where users are spending most of there time or whatever they do on the site.
  • 2. Observe and formulate a hypothesis: Log research observations and create data-backed hypotheses aimed at increasing conversions. Without these, your test is completely directionless.
  • 3. Create variations: Now create a variation based on your hypothesis and test it against your current version. A variation is just another version of your current one with the changes you want to test. You can test multiple variations to see which ones work the best.
  • 4. Run test: There are many kinds of testing the methods.
  • split url testing: is testing different versions of your web page hosted in different urls. Since they’re on different urls it’s up to you to decide the winning url.
  • Multivariate testing: Is a method in which changes are made to multiple sections of a web page and variations are made for possible combinations within a single test. This is best suited for advanced marketing professionals because it’s more complicated than A/B testing.
  • multi-page testing is a form of experimentation where you can test changes to particular elements across multiple pages. There are so many ways of doing this, but to keep it simple we’ll just list two of them,
  • Either Take all the sales pages and create new versions of each
  • Test how the removal or addition of elements can impact conversions across an entire funnel.
  • 5. Results: This is the last step but A/B testing calls for continuous data gathering and analysis. Analyze the tests by considering metrics, and if the tests succeeds then deploy the winning numbers and you did it.

If you want to become an A/B tester there are a few job openings right now, and according to payscale.com the average salary for a tester is $77k and varies between jobs so you know it’s a good deal. On ziprecruiter there is a job listing for a full-time Senior UX/UI designer job in Miami that pays $45,000 to $85,000 yearly. What these people (and many others for that matter) are looking for is professionalism, goal orientation, clear communication skills, a fast learner, and would have excellent management skills.

So this is another part of the designers world that you should know about though this one is a little more complicated, just by a hair.

Good web designs

A little thing to note about designing web pages is that (like everything else we’ve discussed) the’re a few elements to keep note of. Which is that each web page consists of code and what you should and shouldn’t put in it.

Minimize http requests

According to: https://www.impactbnd.com/blog/the-importance-of-website-load-time, there are five ways to improve your web loading time.

  • Combining css/js files. Rather than just making your browser retrieve multiple files try combining your files into one larger file. This might seem tricky but it’s necessary for effective load times.
  • Only load what’s necessary. Self explanatory, don’t load what isn’t necessary.

That’s basically all you need for that.

Media to use

For web designing you need to know what type of media you are putting in.

  • JPEG:A jpeg is an image on a site. Though it’s more compressed so some of the data is lost. Which is good for reducing the load on your web pages.
  • PNG: Also images on the internet but unlike JPEGs they don’t lose their data, and dont lose transparency. However they are still bigger than JPEGs in data do they might still take a toll on websites.
  • GIF: A GIF (NOT PRONOUNCED JIFF) is an animated media like a little video. These take up more space because they are made of multiple frames, so therefore are made of more data.

You can use either of these for your web sites depending on what you want to do with it, so long as you know how much your site can take.

I may not know what exactly it is that you’re trying to do, but what I can say for certain is that if you want to make a more responsive site, then it is best to keep the data down to a minimum to reduce the workload. I do encourage making your site reach its fullest potential but that’s about it, “It’s fullest potential” might be the only thing that can do you good.

Now get to it. CHOP CHOP.

How to Business right

So you want to know how to run a good business? Solid. When it comes to a business you need to understand what business you are making and how it is supposed to work, who you’re trying to appeal to, and how it needs to function.

Demographic

When it comes to your business you need to understand the audience you need to attract. Think of what products or service you’re selling and appeal to the kind of people who you know wants in. But don’t think you can appeal to everyone because you can’t. Think of it this way, when you make a movie full of elves and knights who do you think wants to see it? If you said the guys who are more into sports, I am worried for you. It’s obviously the “nerdy” types you want to appeal to (and I know who you are). Same with websites, you need to make sure that you use the right kind of design so that you attract the right kind of people. People you KNOW will use your product.

Appropriate choices

Use the appropriate colors for your website. Don’t use mismatching colors, or put any slogans that have nothing to do with what you’re selling, or sell any other unrelated products. Always stay on topic.

Updates

Things get old pretty fast, so the best thing to do to prevent this is to regularly update. If your products are getting old or you have more products to offer you need to update.

Inspiration

Sometimes to keep an audience engaged you need to look for inspiration. Sometimes it’s best to put the pencils down and move around, listen to a good song, and run some errands. Sometimes you just need to step away from your own work (There’s a saying for it but I can’t remember it now).

So these are the things you need to keep in mind when designing business. Always remember these and everything will fall into place.