Article C4: All about Website Wireframing

https://unsplash.com/@kellysikkema Featured image

Website Wire frames are basically drawing out your plan for how to navigate through the website or app U.I so that you can replicate it for the final project you end up making. Something you might end up doing for your site is something like navigating through the log in screen/ sign up screen, or helping you navigate to important sections of your app like the shopping section or what have you. The reason why we do this before the website is made is so that we can make it easy to already make if you know what you are doing.

Which is better for making a Wire Frame? Pencil and Paper, or an Adobe Program?

Before the rise in popularity of Adobe programs like Photo shop, Illustrator, and so on, there was a way of doing wire frames with out using technology. Drawing the wire frame on pencil and paper is something people used to do before this tech renaissance, while it is something that gets job done equally as well, it takes a bit more time to draw it on paper and then adapt it to computer, where as on an adobe software, you can draw it and import it to the wire frame with ease, and plus, it doesn’t waste resources. On the other hand, drawing it on paper is much less cost effective, and if a worker could not afford an adobe software, this could be the only thing they have access to. It really depends on the person, but I would rather use adobe to do wire framing. Now if you want a great example of wire framing so you can improve, I have 5 different examples for anyone reading this, so here you go.

Here are 5 Different Examples of a web site wire frame for you study

https://www.invisionapp.com/inside-design/wireframe-examples/

If you look at this example, it is a very straight forward and simple way of making a wire frame, this person just drew it all in red with a drawing program, its pretty effective, although if they all made a more detailed version, it would be even better.

This one right here is very slick, and I would say its a pretty good reference point, plus you can download it.

Wireframe Graphics, Designs & Templates from GraphicRiver
This one is quite simple as well, you don’t have to have a super detailed plan, put you could add some colors.
Ux Graphics, Designs & Templates from GraphicRiver
This does its job, but it looks kind of generic and bland.
UI/UX Design Sketches and Wireframes from Instagram
This is definitely the most detailed one i have seen so far, but as i said, I think its better on the computer.

Article C3: UI/UX Design, A/B Testing & the UI/UX Designer Jobs

Featured image; https://unsplash.com/@danielkorpai

So what is a U.I. even? To anyone not technologically inclined, this would not mean anything to you. A U.I. is a user interface, something that is used for various tech stuff, it is basically a menu or screen with a bunch of buttons on the screen for you to choose, these would take you to different parts of whatever your looking at, be it a website, or a game, and so on. Its just a way to navigate. So what I’m going to be talking about today are different kinds of web interfaces and how they help a web designer.

A/ B Testing; What is it for?

This another form of navigating on the web, but what is it for?

A/B testing (also known as bucket testing or split-run testing) is a user experience research methodology. [1] A/B tests consist of a randomized experiment with two variants, A and B.[2][3] It includes application of statistical hypothesis testing or “two-sample hypothesis testing” as used in the field of statistics. A/B testing is a way to compare two versions of a single variable, typically by testing a subject’s response to variant A against variant B, and determining which of the two variants is more effective.”

-Source https://en.wikipedia.org/wiki/A/B_testing

If people are testing your web site. and it isn’t up to snuff, then you will probably need to revamp a bit of it, that is unless it is good. Having someone to test your website will usually work out most of the time.

U.I design and U.X are they different? How do they help with the A/B testing?

UX is different then the UI (which i explained above), it stands for User Experience. If I were to have the simplest explanation, it would be from this persons article about differences between UI and UX design. Here is an excerpt from it to give you an idea.

  • User experience design is the process of developing and improving the quality of interaction between a user and all facets of a company.
  • User experience design is, in theory, a non-digital (cognitive science) practice, but used and defined predominantly by digital industries.
  • UX design is NOT about visuals; it focuses on the overall feel of the experience.

SOURCE HERE; https://careerfoundry.com/en/blog/ux-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

So this is the type of stuff that the tester is looking at to make sure your website is good.

Example of a local UI/UX Design Job

This one was from Robert Half, for this job they get a $90000.00 to $110000.00 yearly salary, and describes it as a fast paced environment where you need to be on top of things, while making the mock ups needed and for it to be simple as well. You also need to have Adobe experience. It shows that is indeed something you need to be very good at.

Article C2: Web Design Optimization, Load Times and File Types to Improve Performance

Web Design is an interesting field, it is one of the most important jobs in the world for a mi-raid of reasons, but why is is so difficult to become a professional web designer? I would not call myself a professional web designer, but I do know how to become one, I just need to work hard to become one. One thing you can do to become a professional website designer is by doing all the right steps , like making your website load faster than a lot of other sites, Here is every thing you need to know on that.

Fast Loading Website

 Browser caching stores cache versions of static resources, a process that quickens page speed tremendously and reduces server lag. When a user visits a page on your website, the cached version usually displays unless it has changed since it was last cached. This means the browser saves a lot of requests to your server and improves load speed for your site.

https://hostway.com/blog/10-ways-to-make-your-website-load-faster/

Clearing the cache usually solves most problems on your computer or device, but in this case, it will make your web site a more pleasant experience for every one. It is very important to remember, because you do not want to have anyone call your website slow, it would not be good for your image. You need to keep your web site optimized, I will show you how to do that too.

Optimization is Important, so is SEO

“Building a strong site architecture and providing clear navigation will help search engines index your site quickly and easily. This will also, more importantly, provide visitors with a good experience of using your site and encourage repeat visits. It’s worth considering that Google is increasingly paying attention to user experience.

When it comes to how much traffic is driven by search engines to your website, the percentage is substantial, and perhaps the clearest indicator of the importance of SEO.

In 2014, Conductor suggested 64% of all web traffic comes from organic search, compared to 2% from social, 6% from paid search, 12% direct and 15% from other referral sources.

This tallies with our own data, with approximately 70-75% of SEW traffic coming from organic.”

https://www.searchenginewatch.com/2016/01/21/seo-basics-22-essentials-you-need-for-optimizing-your-site/

Saving space on your computer and on your websites is important for you too, here’s something to keep in mind.

PNG GIF and JPG

The PNG is an image that is saved in the Portable Network Graphic format, it compressed like the GIF file, used to store web graphics and digital photos.

GIF are moving video files used for websites that make them look pretty.

Then a JPG is basically the same as a PNG except its less high quality.

Article C1;Website Target Audiences and Design Strategies to Reach Them

Featured image https://unsplash.com/@kmuza

Websites are very important in this day and age, they tell us about various different things and assist us in various jobs, they are made for all, but there are different websites for different people. The Target audience of your website is very important to keep in mind when you start to design it. I would define it as your typical user base for your site, it can be allied for various things, whether it is a shopping site, an information site, or a game site. You have to design it for a certain person. You have to think carefully about it, you cant just do anything.

Define your Websites Purpose and Strategy

Having a plan will always make things go smooth for you, without a plan you will just come up with things as you go. Lets say that you were making a website for gaming that had shopping, like steam, that is a part of your strategy on your website, you are going to have to design your website with that base idea in mind. You can can make it perfectly tuned around that purpose. To do that, you will need to do research on google and look at thew best looking websites to see what works. Once it looks really good, you will need to market it well, allow me to explain.

Marketing your Site to your Target Audience

It would be great if you were to make your site well known to a lot of people so that it can be successful, put a lot of ads on many other websites so it just sticks in your head. One other thing, is your website has an alluring style that catches peoples eyes, it is one of the most essential parts of making a good, successful idea, so be sure to keep that in mind when making every thing about your site. Search Engine Optimization, or SEO for short, is important for anyone that wants to get a good job, so i will give a few pointers to make sure you do that well.

Making your Website Responsive and Increase your SEO Potential

You want to make sure you don’t get a bad reputation with your website, so make sure all of your websites links are responsive, and make them look like where they are supposed to be, you want to make it accessible, and not make people frustrated. That is the best way you can make so that your site is more recommended.

About the Design Brief Branding Guide

Featured image by me

I am coming to the end of the road for this project, the branding guide. This will mark my place in the industry, it is a collection of everything I have done thus far, so it has to all look good. It is not just putting everything together, they have to match and they have look aesthetically pleasing for the client. I am almost done with this thing, so i will tell you all about what i have done thus far. It is very difficult coming up with a good design for a branding guide, but i did find a pretty good inspiration.

It all started with an inspiration, Graphic Burger ended up being where I looked to start. The fourth one i found ended being the one I used for a reference. I definitely learned that I should have followed a grid for each of my projects, if I did, they would have been more pleasing to the eye. My least favorite thing to do was actually trying to find an inspiration for this thing, it was time consuming. I enjoyed typing the information about the company, it was very fun to come up with it. The most helpful tool i had was Google, to find all this info, despite it being time consuming.

There is a reason for all of this work I have to do, because a brand guide is standard for all types of businesses to guide new recruits working in graphic design on how the products should look and what rules to follow. They help all of the people involved in the company of whatever you are thinking of. I have been trying to follow guidelines of my own for the past few months for this class, not all of them has been perfect, but I have learned how to improve over the past few months. I will show you a few of my works that I am really proud of.

The work mark on her shirt was made in illustrator, it is in Go Go Poster Punch font, the 8 bit logo was also made in illustrator. They went through different revisions, I was not proud of most of them, but eventually i had found the perfect design for both.
This is my business card for Let, I followed a grid when I made this one, there fore making it look organized. The black and red color scheme makes me feel ready to play games.

Web Safe Colors, Spot Colors, Hex Colors, CMYK and RGB Color Codes

Featured Image by https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText

This article will be talking a lot about colors on websites, they are very important to the style or aesthetic of your website, you may not think much about it, but its very true. Colors on a website can make you think of the brand in a certain way, it can be intense, it can be soft, and other different vibes. It usually takes a while to come up with a fitting color palette or combination that is good. I will tell you how to use these colors correctly, but first, you have know about the terms.

What is a Web Safe Color?

A Web Safe color, or browser safe color, are colors that consists of 216 colors that display consistent colors on any computer or device capable of displaying 8 bit color. They were only created for that reason, as for how they are used today, it seams like its not used as often as they used to be. Most web safe colors are kind of ugly and not pleasing to the eyes. There are better color choices nowadays than just using web safe colors. Now going into different types of colors once more….

What is a Spot Color? Why were they made? How are they used today?

”In offset printing, a spot color is any color generated by an ink (pure or mixed) that is printed using a single run. The process of offset printing in full color consist of Cyan, Magenta, Yellow and Black (CMYK)”. This is the source of this definition. https://www.printoutlet.us/spotcolor.php

They were created for the purpose of company colors on a printed paper, the use of a spot color is utilized. They use it mainly because they want to maintain the color fidelity or accuracy of the color throughout the print run. As said by this person: https://www.quora.com/What-is-the-purpose-of-spot-color-printing

They are used today mainly because of the four color process printing that they have.

Sample Colors, CYMK, HEX, and RGB

CMYK stands for Cyan Magenta Yellow Black. HEX color is a color using hexadecimal values. RGB is red green blue. CMYK is used for making images on computers. These are subtractive colors. Hex colors are mostly used in web design. RGB is mostly used for the primary colors and converting the grey scale colors to this. The only way you can keep your colors consistent is by keeping a close eye on them and think about what really fits with what your doing.

Multimedia Jobs, Salaries and Industry Information

Link for the featured image https://unsplash.com/@tylercaseyprod

I figure that you know the drill by now, Multimedia jobs are plentiful, they are also very helpful to our society which i have explained at length in my previous articles, i would be fine with explaining it more than I’ve already than i already have. So here is another list of different Multimedia jobs that you can do in the world. Multimedia is not something that is only for the entertainment industry, it can make things that important to daily life, things that can actually assist you and change the world.

Multimedia Jobs for a Creative Person

1.Photographer; Someone gets paid to take pictures of their surroundings, they are very important, because how would we get a visual on things unless we had pictures of them. It can also help get more in touch with the world around you. They have an estimated salary of 40k-81k dollars a year.

2.Animator; People who put our movies, shows and games into motion. This is a very important job for this field, it brings in big money, especially when entertainment is a big titan in this world. The estimated salary for this job is 46k-100k

3.Game Programmer; One who has coding experience and makes video games, it is one the most profitable jobs in the world in this time period. They have an estimated salary of 75k-120k dollars a year.

4.Game Tester; How would the games work if no one tested them out right? These people bug test and see what the game has so that its good for public release. They make 54k dollars annually.

5.Film and video Editor; This type of person edits the films that release in theaters, or the videos that are made for various purposes. They make 55k dollars yearly

6.Game Designer; Designing games is different tahan programming, both are important, but this person lays the groundwork for the project in question to be made. They usually make 40 to 100k dollars a year designing games.

7.Marketing or promotions manager; They are people who are responsible for planning and managing campaigns to promote products. Salary: $100,000.

8.Creative Director; This person can be a great guy to make your product look great and unique. You would not have ideas if it wasn’t for the creative director. Salary; 79k-190k dollar.

Graphic Designer; The one who designs websites, posters, boxes, etc. 32k-59k

Adverting Director; this is the one who is in charge of advertising, who tells the salesmen what they need to do. Salary;97k-140k

I think the one that intersts me the most is the animator. Since i like art alot and drawing thats what i want to do.

Common Salary

The most common salary for these types of jobs in estimation is about 40k dollars. In five years, you would probably have 150k dollars.

Local Search

When I did a local search for multimedia jobs I only found 16 near me. Most of them require Multimedia experience.

Rasters, Vectors, Destructive & Non-Destructive Editing with Photoshop

Photo by Ricardo Resende on Unsplash

Photoshop is a very interesting software in the adobe series, it is the most versatile of all the software for certain. It has the most features out all of these programs, and it has the most variety of things to do with each of those tools individually. These features in the title of this blog are the ones we will be talking about today. I will be explaining how this works in Photoshop, seeing which one of these is most useful and which one is better than the other.

Destructive, or Non Destructive?

Now then, just what is destructive editing? It dosent exactly tell you what it is straight up, because it sounds negative, but its atcually a boon to you. To take from a certain source:

The term destructive editing does not mean that you actually destroy your image; in most cases, you will improve it. Rather, it refers to the way in which the pixels of the digital photograph are manipulated. When you make changes to a photograph as part of a digital editing process that is destructive, you actually make permanent changes to the pixels. For example, if you darken an area of the image, the pixels within the image will be changed to become darker. When the image is then saved, those darkened pixels will be written into the image permanently and cannot be returned to their original state. Thus, the original state of the pixels is considered to have been destroyed. Hence the term “destructive editing”.

https://fstoptraining.com/whats-the-difference-between-destructive-and-non-destructive-editing/

The opposite of Destructive is what else? Non Destructive editing. So this is not exactly bad either, in fact it is something else entirely. It is something you can use for photography to edit them by using adobe light room. That is just one example though. During a Photoshop project i can definitely use both of these different methods to work.

Rastrized Graphics

Raster images are known as a pixel image or bitmap. There is a little box next to the image layer so you can change it, this rasterizes the image to make it editable on Photoshop. Before you do this, the image will not be able to be edited. But it reduces it to one layer.

Vector Graphics

Vector Graphics are computer graphics that are defined in terms of 2D points, which are connected by lines and curves to form polygons and other shapes. Source of info: https://en.wikipedia.org/wiki/Vector_graphics. These are used for line art, for various projects. I would definitely prefer using them to make some great drawings.

Setting the Mood, Mood Boards

https://unsplash.com/@xteemu The source for the image that is featured.

This might a new topic for anyone who is new to the work space, for anyone who does not know anything about them i will lay it out for you. The Mood Board is a presentation for your new project or something of the like, that conveys a feeling of what your product, or some one else’s product, is like, hence why its called a “Mood Board”. It is needed if you want to tell your boss or employer about how your product will work. It needs to be different from the competition, be unique, and it needs to be ascetically pleasing to you and your consumer.

5 Tools to know when making Mood Boards

I found most of this in this article; https://www.creativebloq.com/graphic-design/16-great-tools-creating-mood-boards-91412793

Pinterest; This is a social media platform that is used to post art, stories and things like that. It seems like you can post a mood board on the website or app so you can show someone the idea for the product. I think this could be useful to share with businesses all over the world, it can help with SEO and can maximize your chance of employment.

Milatone; A website that you have to sign up for to make a mood board. It doesn’t seem like the best choice, but it look like it can be used for variety of other projects.

Ever note; This is an app used to take notes, it can be used to write down ideas, but also, oddly enough be used for a mood board. Definitely good in case you forget something.

The Mat board; Image sharing site The Mat board is specifically targeting creatives as an alternative to the more mainstream Pinterest. – Creativebloq. Pinterest should be a better alternative.

Google Slide; This is the definitive way to make mood boards in my opinion. This service is something you can access if you have a google account, it is connected to google drive, a cloud based service, so you can store the mood board so you don’t lose it. This way of making mood boards is fool proof.

Make sure your boss is not ‘Board’

From my experience making the mood board i chose to do, i have to follow exactly what the outline is, but i have to make sure it is unique to the other competitors, otherwise it wont work out if you want a job. I made a few mistakes, like not using the right image, or using a color that was unappealing, to fix this, i went back and edited my mood board.Make sure when you make this thing that you double check your work and perfect your mood board.

Multimedia Designer Jobs and Legalities

Photo by Simone Impei on Unsplash

The next chapter of the multimedia profession is to take a role in the field. That is what this job is all about, there are all sorts of things you can do in Multimedia as I have already went over in all of my previous blog posts. In this article I will talk about the different jobs you can do in Multimedia, now I don’t want to repeat myself, so I will start to list down the jobs.

The Definitive list of 5 great Jobs for Multimedia

Multimedia Project Manager: The role where you call all the shots usually, most of the time you talk to most of the members of your unit and tell them the things they have to do. It good to have leadership skills for this position.

Multimedia Project Designer: The one who makes the aesthetic choices for the project, without this person, you would not even be looking at nothing but a blank screen! You must have art experience for this.

Journalist; This is a person who wrties pieces about various topics on the internet or newspapers or articles, much like what I am doing right now. They are very important, they get the news and make think pieces, but a rushed article can hurt you. You must have writing experience if you want this job.

Game Designer; This job requires not only coding experince, but also art experince, planning and storyboarding. It is a very big industry at this moment and be good for anyone who likes games or has a creative ich to scratch.

Film Maker, This is another big industry that require a lot of the same requirements as games development, minus the coding. You will need story writing experience and acting experience.

Copyright Laws

Unfortunately there are a lot of copy right when it comes to the world of art. There are contracts and terms of services papers with all sorts of rules for the people. For instance, if you find an image or video online with a water mark, or the brand of the person or organization that made it, you have to pay a royalty to then. Some companies own some fonts, so you have to pay royalties to use them as well.

Permission to Take Photos?

Sometimes there are areas where you need to ask the person who owns the area to be able to take pictures. In most schools they don’t allow picture taking on campus. You sometimes need to sign a permission slip to shoot.