Personally, I have never heard of UI/UX until very recently. So I am writing this article under the assumption that my audience is in the same boat that I was in.

UX stands for user experience design. UX is a design process in which easy to use products (digital/physical) are developed. UX helps customers have a good experience while they’re using a product, which will keep them loyal to the brand in the future. 

To break it down even further user experience is the relationship between people and a product while user experience design is the relationship between the feelings/needs of people and the product.

Moving on, UI stands for user interface design. Since we already know what the “U” stands for, I’m to skip ahead a little and jump right into explaining interface-design. An interface is something that allows a person to directly interact with an application/design. Interface-design however is another designing process, which creates the style and overall presentation of a software.

Unsurprisingly, these two get mixed up quite often. But there is an easy way to tell the difference between these two, UI is the design and UX is the foundation. However, that doesn’t mean you can have one without the other. Like a PB&J, you can’t have one without the other, it just doesn’t make sense. UX designers solve all the problems that a user might have and UI creates interactive visual aesthetics.

After the UX/UI has been established, the next step is to move onto A/B testing.

A/B testing is a trial, where you compare app/product performance and customer satisfaction. If you have ever gone to a Starbucks and had a limited edition drink that is an example of A/B testing. The barista observes to see whether or not the customers enjoyed it more than their current products, and if satisfaction is high they might add it to the menu.

A/B testing helps with separating ideas that work and ideas that don’t. And through the combination of getting every single idea that works and adding it to your product, creates something that consumers would actually like. All guesswork is therefore nulled and instead converted into a solid plan. 

For anyone who wishes to pursue this as a career or is interested, there are a lot of job openings. I realize that the biggest worry in the design field is if there are enough jobs/openings, and just about everyone needs designers and testers so I’d say it’s a pretty good choice.

Until next time, see ya

Everyone hates slow websites. Today’s world is all about speed and making things faster and easier to use. Due to this, if a page doesn’t load quickly, impatience will probably drive people to click away from that site and move on to the next. This is unfortunate for first time web builders or even those who haven’t gotten the memo yet, “speed is key”. 

So how does a web builder make their website faster? One word: Page Size Optimization. Okay, maybe three words.

In order to begin this process one must start at the very foundation of the page. Multiple CSS files, data heavy images (etc) are all products of a slow website. You can combine Multiple CSS files through a process called linking. When one links it allows for an easier management system as well as combining similar style elements into a single large file. This large file can then be paired with a CSS compiler like LESS in order to create a smaller/faster CSS file for a website.

Though, the worst of the two is probably data heavy images, because images make up a majority of the total web page size. That doesn’t mean it’s a lost cause, there are ways to compress the images in a website without losing the original quality. Just like with the CSS files, compressors can reduce the metadata from your images and minimize the overall page size.

What type of file should be used for website images?

Well, there are three types of files that can be used: JPG,GIF, and PNG. A JPG file is used for still photography, A GIF is used for simple animations/flat color, and a PNG is used for icons or to allow your images to have better transparency. Unlike the other two, a GIF has a limited amount of colors that can be chosen from so it won’t work with displaying more complex designs. Knowing the uses for these types of image files is important, because if one were to take a photo with their camera and format it to a PNG the file size would be much larger than it would’ve been if converted to a JPEG. 

By this point, it should be clear that in order to optimize a web page, file sizes need to be smaller. This helps everything run more efficiently and also helps out users who stumble upon a site using their phone.

School was once a place where meetings were held face to face…wait a second that rhymed too well, this isn’t Dr. Seuss. Anyway-

This pandemic has had everyone on their toes, wondering what the next move is going to be and if we’re ever going to get back to normal. I think we’re all starting to realize how much we took face to face contact for granted, and with everything moving online,communication has gotten that much more difficult. 

How does this affect my school year you ask? I’ll tell you. In real life it can’t get  easier just than showing up to class, there’s no technical difficulties or any delay, except maybe the occasional bathroom break. Online is an absolute catastrophe; entertaining, but a catastrophe. 

I can recall my very first video call with my teacher, the wifi in my house was slowing down my computer to unbelievable speeds and it was so noisy. I felt bad because my teacher was trying to figure out how to mute all the students but then she ended up kicking herself out instead, needless to say she got so frustrated that she sent us quite the email. When I checked my Inbox that day, it basically described how she would never be doing that ever again, and she would just post our assignments into Canvas. It was a little funny now that I think about it, just maybe not for her.

On the bright side, I don’t know about other students but my grades did very well the last few weeks of school. Being at home made me comfortable and having until 12am to finish an assignment really calmed my nerves and gave me the time I needed to plan everything out and do my research. I think that’s one of the good things about online school, it gives you enough time to complete assignments and enough resources to reach out to your classmates and teachers without fear of confrontation.

This year seems like it’s going to be much different than anything we’ve ever experienced before. We might fall short in the equipment department, but our school is creating opportunities for students wherever it can. With perseverance and a little bit of getting used to, I think we can get through this year of school completely online. After all, we aren’t a tech savvy generation for nothing.

Ladies and Gentlemen I present to you one of the many creations of our generation; WordPress. Many people seem to believe it’s just a site for blogging, which was true originally but now it has become so much more. 

WordPress is an easy to use CMS (content management system). A CMS is basically a software that helps you create and display your creations on an online platform, No coding required. When you first create your website you don’t start with a blank canvas and work your way up, you start with one of their provided themes.But that is about as far as you can go without needing to know any website coding knowledge, it’s simple. 

At first when I created my blog/portfolio on WordPress I was a little disappointed that I was limited to choosing a theme that had a portfolio option. As I went through I found out that WordPress makes up for their shortcomings by allowing plugins and downloads. Of course if you don’t like that and want to make a 100% unique design there is the Page Builder theme, it lets you start fresh on a blank white background.

This open sourced site is used for many things other than blogging. I’ve seen WordPress used for small businesses, websites, portfolios, university pages, ect. It is a rather versatile system. That’s why bloggers and web designers like it so much. It makes things a lot easier. Most of the hard work is already done for you, so you’re left with all the fun stuff.If you don’t know how to make a website and you would like to do so, i’ll provide some steps below that you can follow.  

Making a WordPress site is so easy you can probably do it in three minutes. Well, three minutes considering you’re not reading this entire article. 

• One: Find a name for your site
• Two: Make a Title/Tagline
• Three: Turn on Search Engine Visibility
• Four: Apply your timezone
• Five: Choose your theme
• Six: DONE! 

See? That was really simple. Now that I’m writing this I’m starting to realize why WordPress is one of the top sites for website creation. Experiment! Play with it! And create something awesome! See you next time. 

Typography is a technique used to arrange type in a way that makes it visually appealing. So let’s get into it shall we?A typeface is a large selection of letters, each unique yet each containing the same variations of shape. Typefaces are chosen based on style and readability. I know what you’re going to say, “but typefaces isn’t the same as typography” and you’re absolutely right.

Typography is the use of type and typeface is the creation/making of type. Typography dates way back, like around the 11th century. Before what we call the “digital age” came into place typography was specially used for books, bible’s, magazines, and then finally public work. Nowadays, typography is a part of our digital word and our printing world. The internet allowed for typefaces to grow and supply itself in huge amounts. Type was never more diverse!

How are fonts used?

Fonts are used according to its specified purpose. Not only that, as a designer one has to think about the different pairs of fonts that would look good with their main font. A good rule of thumb to follow is opposites! If you have a thick font then compliment it with a thin one, if you have a serif complement it with a sans font, etc. 

Old Style, Modern, Transitional. These categories guide you to the font you need in order to complete your design. If you’re going for an elegant design than perhaps you should lean more towards transitional fonts. Transitional fonts provide the best of both worlds, the readability of Modern with the Classic lines/curves found in Old Style.

Good Examples

If we take a look at the designs above we can already tell that they’re easy on they eyes. The design is neat and aligned, and the contrast between thick and thin fonts is sublime. These websites make me happy.

Bad Examples

Now these websites give me anxiety. There is nothing about this website that I like. Disgusting. If you ever make a website like this, retire immediately you’re a menace to the design community.

Lets, see what happens to be wrong with these, type wise. In the website above the fonts do not compliment each other at all, its thin with thin. And in the website below, the body paragraphs are too small to read. And the color of yellow against the blue background hurts the eyes.

The Joshua Tree Epiphany is a rule of thumb that helps guide people to create good designs. It has four principals: Contrast, Repetition, Alignment, and Proximity. Contrast is the same as the word opposite. Light/Dark, High/Low, Heavy/Light. The point is to stop your elements from being too similar, make them stand out. 

Repetition is when you repeat your visual elements throughout your design. An example could be a certain font family, color, shape, texture that you see over and over again in a design. Repetition allows a pattern to form and makes your work distinguishable from other people’s work (logo). Alignment is when you place things in a way that they line up together and create an invisible line. This line organizes your work and allows your audience to make visual connections throughout. It can guide them throughout your work and show them which set of information they should read next.

Proximity is when you group bits of information that relate with each other.An example of this would be a magazine or movie selection, If you pick up a magazine you will see groups of information in chunks. This allows for all the relevant info to be gathered together in one space and provides a good amount of white space so you can rest your eyes. And in movie’s, the different types are separated into different genres where they all share one thing in common: horror, comedy, romance, thriller, and sci-fi.

If we take a look at the following websites, you will be able to see traces of the 4 principles of design in each and every one of them.

If we take a look at this website right here we can already see two cases of contrast; the uses of different font, and the striking red on blue background. The red and font seems to be repeated throughout the homepage design, so that’s repetition. And as for alignment, the information seems to be aligned to the left of the screen allowing for a straight invisible box going all the way down. If you follow this line you can see the principle of proximity being put to use, the title and the relevant information are set near each other in order to make it easier to find the relevant information.

The next web page we will be looking at is one run by Adobe. The contrast is seen in the action buttons, they both share a striking blue color. And if you take a look at the logo, its also quite contrasting against the background picture, but not only that, it’s also repeated. It is repeated twice, underneath the top tool bar and on the center of the page. Finding the alignment might be less obvious than the first one we took a look at, this is because it has a center alignment. The tool bar is of course always straight across, but the information in the center moves like an upside down pyramid. Looking at the information in the center, the title and the short summary are close together right? That’s because the information relate with one another.

And those are two real life examples of searching for the four principles of design in web pages. See you next time!

Today, we are going to have a look at what makes a great landing page and what makes a bad one. 

Good Landing Pages

Good landing pages are easy to use. What exactly do I mean by that? Your page should not look like spilled alphabet soup. Try not to be too wordy and keep things short and sweet. A landing page is just the ‘cover’ to a website, not a newspaper tabloid. Organization and design should appeal to the eye, be neat, and consistent. Just need to give enough information for the user to be interested.

Make sure to have some ‘white’ space and to place your info in a way that it falls into a user’s field of vision. 

How to direct someone’s vision:

• Get their attention: If you’re going for an up-down gaze then put your information in order.
• Change the weight of things: The more important the more weight the type has (bold). The less important the lighter the weight can be.
• Focus on Position Emphasis: These things make your words stand out in a ‘crowd’. If you’re in a crowd full of monochromatically dressed people and you see someone wearing a pink hat, you’ll look there first right? Same thing.

Once you have that all set up, then you can worry about the information that’s going to be distributed along the article as they move on. Or you could make a descriptive video and cut your wording to about half.

Bad Landing Pages

Chances are, if your page is full of clipart and blinking button gifs….you’re not going to get much business. If you’re going to make your website look sketchy, then what’s the point? That’s just bad designing. So for everyone’s sake, no clipart. If you really want to put some type of icon or design, try to make it yourself using an adobe software or some other design app. And do not have a million of ads on your page, it is really distracting and does not help the trust factor at all.

Things that make up a bad landing page:

• Clutter: Do you want to give me a stroke? If you have too much going on in your page and a very, almost non-existent white-space…you’ll most likely give your user a migraine. 
• Being too simple: A big no no, If it doesn’t grab their attention immediately then it’s a lost cause. Nowadays, our attention span is short and we need a pop of color or interesting design to pique our interest.
• Overuse of CTA buttons: (call to action> send you to different pages, sign up now, etc) Ok ,really? Make it short and sweet, do not make your user do too many actions. It’s like a food menu, too many options drive people nuts.
• Pure Links: I’m not even going to go over this, If you even think of doing something like this, might as well turn in your design degree.

The list goes on and on unfortunately. There are many ways you can go wrong, and few ways you can go right. And there is the difference between good and bad landing pages.

If you are familiar with coding or website design, you’ve probably heard of Bootstrap CSS. Bootstrap is a free site that helps you develop responsive websites with strong designs. Bootstrap gives you quick access to code written in HTML and CSS, which saves you from writing five pages of code so you can focus more on the design.

Bootstrap comes with a pre-gridded system, which means you can just start filling your boxes with code. And thanks to a code that’s already implemented in the website, your design will resize to fit any type of screen.

Now all this sounds just dandy, but how do these things bring popularity to the site? Well, most of the compartments in the website are already there for your use and the customization level is pretty vast, which allows for a unique website from anyone. Sure, it might not be the best, but its popularity isn’t misplaced. We are a species that lives for creating things to make our lives easier and this is one of them, so you’d be crazy not to like it.

CSS vs Bootstrap

What is the difference from Bootstrap HTML and CSS? The difference between them is that HTML is a language that is used to build websites and CSS is a style sheet language that is used to design a website. The thing about CSS is usually the programmer needs to know code by heart while Bootstrap CSS kind of sets it up for you already.

If you are a beginner like me or even if you are a master at coding, Bootstrap will surely make your life easier. Bootstrap CSS help with the creation of a user-friendly interface with images, effects, and animations.

That about wraps up all the basics that you need to know about Bootstrap and its features. If there is anything else, that you would like to know about this site and the things it has to offer I suggest that you pay a visit to this website. See you next time.

Web design is like a game of chess, you need to use all of your pawns efficiently in order to win with the least losses. There is a certain finesse that comes with a good web design; typography, layout, your art, etc. All these things need to come together in a way that is user friendly and easy on the eyes. 

Design Strategies, What’s your game plan?

Good web design surrounds a platform that conveys the right type of feelings inline with your ultimate goal for the website (ethos,pathos,logos!). Learning more about your target audience is based on the type of questions you ask and what you do with said questions. A way of collecting this information would probably be through a survey that asks which type of design do they feel drawn to the most. Make sure your questions will give you enough information to make an inference on the things that they might find interesting in the future. Learn to think ahead!

Rules of Thumb

After you determine all of these things, then you can start to focus on your design. But don’t forget the theories that will make your design great: contrast, repetition, alignment, and proximity (C.R.A.P). The Joshua Tree Epiphany, everyone starts somewhere and for designers, it is exactly in this place that we start.

• Contrast: Elements that stand out: colors or letters
• Repetition: repeated elements that keep consistency
• Alignment: Making visual connections
• Proximity: Making visual unity through closeness

This is your foundation, and as iffy as it may sound, if you use it you’ll probably want to thank me later. These few rules and regulations allow for a more visual friendly environment that draws people in.

Aside from that, learn to put yourself into your audiences shoes, if you were your audience what would you want? Of course don’t let yourself be carried away into your own preferences, make sure using the information you have gathered that it would be something that your audience would like. If you have ever browsed on the internet and opened up a website, did it draw you in? Or make you automatically click away? Your website will be found on purpose as well as by accident, so make sure your information is consistent with your overall design. And that’s pretty much how you reach and keep your target audience for websites and other business applications.