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 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.

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.