Nov. 30, 2016 | Lesson 3 (Mapping Web Design)

Before I went into my lesson on Lynda.com, we first went over our Career Tree Project, which is discovering what career interests us and taking a closer look at them.

There was a list of entry level, technical careers, and professional careers and we were supposed to choose 1-3 of those that interested us the most. After, I looked up salary, daily responsibilities and requirements needed of a career that I was most interested in from my field.

I’m interested in getting into front end web design, so that is the professional career I chose. Starting out I would love to work for a company with a team of other professionals to use both for experience and networking source. My end goal would be to do this as a freelance job either working with other web developing companies or clients.

After doing that, I started a new lesson from lynda.com called Mapping the Modern Web Design Process, which is basically just what it says, mapping out your design process for a website.

Below is a circular diagram of the process and planning of web design.

screen-shot-2016-11-30-at-1-36-22-pm

Though I said I wanted to work as a front-end web designer, if I really want to go into freelance I will eventually need to learn about the back-end to become a full stack developer. Even then, I wouldn’t be able to design a great website on my own. That was one of the things I realized going through these videos as he talked about all the roles that needed to be filled in a team.

The “Typical Roles” are just ones that are usually available within a big team, while the “Isolated Roles” are ones that should probably be filled by someone besides myself. It’s important to have a subjective view to the website, because mine could potentially be biased.

Advertisements

Day 67 | Lessons 5-7 (User Experience)

These next three lessons were very brief, so I decided to lump them all together in this post.

A main theme that has been occurring in these videos is the number one rule of making sure that your visitors know what the website is about. One way to do that is make the summaries clear and concise, that means not using big words.

Using big words doesn’t necessarily mean that I’m attracting intelligent visitors, and it doesn’t make me more intelligent. Rather it has an adverse effect for the readers portraying me as less intelligent because I’m not putting my information in a way that others can understand.

lesson-5-big-words

My information, especially on the homepage, needs to be clear, simple and to the point.

Another good rule-of-thumb is to not use more than three levels of heading (i.e. h1, h2, and h3) when laying out my website. If I end up using more, I’ll probably need to consider splitting the information up onto different pages. Secondly, provide summaries for each page so that visitors can quickly work out what the information will be about.

When it comes to the body text, a good style of writing to use is one that I’m familiar with through my studies in college. The inverted pyramid.

Lesson 5 - Inverted pyramid.png

You start with the whole story in the first paragraph (can be more, but not much more). This is where all the relevant and the important information is located. The next is more in-depth details of the information presented, while the final part is general background. This style was used in the news place when editors and writers didn’t know how many column inches they’d have for a story, so they could just cut off from the bottom of the story (the less important news) to make more room.

In lesson 6, the only interesting information I gained from that is using the five-second test when laying out the website. The five-second test is allowing a visitor to the view the homepage of the website for five seconds, then see if they were able to gain what the website is about from that short viewing.

You could use these two websites called fivesecondtest.com or clueapp.com to recruit participants to check out your website with these tools.

Finally in lesson 7, when you give summaries on different pages of the site you will obviously want links to those pages, and the easiest way to help navigate your viewers to that site is too leave the links in the summaries. This lesson talked about the best way to do that is by making the subheadings clickable and making it noticeable by using a different colored font with an underline rather than using words like “Read more…” or “Click here.”

 

Day 66 | Lesson 4 (User Experience)

In the previous lesson, I learned about the importance of having a navigation menu. Today, was all about the site layout, and (again) making sure visitors don’t get lost trying to find the information they need

All sites have a home site, and then some will have their sites split into separate categories like “About Us”, “Contact Us”, “News”, “Products” etc. The further the viewer dives the more information they’re gathering.

screen-shot-2016-11-15-at-2-40-57-pm

Sometimes, search engines will take visitors to another area in the site that isn’t the home page, so it’s important to have page titles that show in the tabs. Sometimes, when visitors have multiple tabs open in the browser, the page title will get cut short so it’s important to lead with the most important information and keep it under 64 characters. Also, run it in the reverse of bread crumbs. Example: instead of Hansel and Petal > Weddings > Bridal Bouquets, lead with was is most relevant to the page like: Bridal Bouquets | Weddings | Hansel and Petal.

Ultimate, having a website is about getting information to your visitors.

There are three main ways to display information:

screen-shot-2016-11-15-at-3-02-33-pm

Which style you choose depends entirely on the information you’re trying to get across.

A reason to not split this information into Sequential pages or Splitting is to prevent confusion and if this information is more than likely to be printed. Wikipedia is a good example of using the scrolling display. In this case, use lots of subheadings to keep information uncluttered, and use in-page links so visitors can quickly jump to the content they’re interested in.

Reasons to split information is if it’s an article, a photo gallery, and/or has step-by-step instructions.

If you use the Sequential or Splitting displays, consider uploading a PDF or “Printer Friendly” version of the information so that visitors can print if they want.

Day 65 | Lesson 3 (User Experience)

Lesson 3 for User Experience Fundamentals for Web Design dealt with setting up the navigation menu for your website. This is an important element to the user experience because visitors need to be able to “navigate” their way through your site and not get lost.

First is figuring out the location of navigation menu, which could be located on a single bar at the top or in a side bar on the left side.

lesson-3-navigation-menu-location

In some cases you may even have cause to incorporate both in your website:

screen-shot-2016-11-14-at-3-08-43-pm

Something to keep in mind, if your navigation menu has drop-down menus, is to make sure that it has good coding. Ones that have poor coding could cause frustration when the drop-down menus disappear when the cursor scrolls off the path.

Lesson 3 - poorly coded menus.png

The example on the left is what happens when the mouse temporarily leaves the sub-menu area. Well-coded menu controls, like on the right, will have a sufficient lag built in that they don’t disappear during this time.

Our former website for our local newspaper was a good example of poorly coded sub-menus. Sub-menus would constantly disappear requiring you start over at the top to try and get to your destination.

Another frustration users can meet is industry jargon that they’re not familiar with. Make sure that menus are clearly labeled, so that visitors can find what they want.

lesson-3-industry-jargon

A visitor who is constantly getting lost is likely to leave the site due to frustration. They want information fast and easy.

Day 64 | Lessons 1 & 2 (User Experience)

A common terminology I’ve heard a lot from my previous videos is UX, or User Experience, which in a nutshell means that I have to build my website with users in mind. What about my website appeals to others? Who is my target audience?

Knowing these things will help me understand how to develop my webpage and how to cater to the viewer’s needs.

In the first lesson, they use an example of a car site designed for two very different viewers in mind. For instance, a car enthusiast will be looking fro information on horsepower, torque and speed with the goal of finding a car for recreational purposes.

screen-shot-2016-11-11-at-2-41-57-pm

While a business owner, such as a florist, cares more about fuel economy, service intervals and storage capacity for a vehicle that will help keep their business running.

screen-shot-2016-11-11-at-2-42-14-pm

With this in mind, it’s important to understand that most people are browsing the web for information rather for entertainment. Not all the time, but most of the time. That being said, usually viewers will come to your site with a particular goal in mind, so you will need to be mindful of that to cater to a specific goal.

screen-shot-2016-11-11-at-2-45-20-pm

While it’s important to know what brings you more viewers, it is just as important to understand what will cause them to leave your site. There are number of ways to hide the information from your viewers that they want like using technical product names in navigation, using puns and teases making it unclear for users to know what they’re getting, using technical jargon instead of plain speech, and presenting users with a wall of text instead of getting to the point.

One thing that keeps me from staying on a website is constant ad interruptions. I understand that sometimes websites will use ads for other sources of income (or their only source, depending on what their site is for), but when it hinders your visitors from searching for your product it can turn into an annoyance.

In lesson 2 I learned more about how the design of the website should never get in the way of the information you’re trying to convey. The information should never be surrounded by clutter, drawing your visitors away from what you want them to know, but should have a simpler design. Whatever graphical elements used should be relevant to the information.

Another important view to take is to keep you design consistent. Your visitors should know what they are going to get whenever they visit your site or click on a navigation text. Don’t just change something to get away from the monotony of other sites. Below is a good example. Most viewers know what a Forum is because it’s become pretty universal on sites, but calling it a Den or a Chatroom may give your viewers when clicking it.

Screen Shot 2016-11-11 at 3.00.34 PM.png

 

Day 63 | Lesson 5 (Web Aesthetics)

In lesson 5 I learned more about the responsibilities and roles of a web designer. Not only does your responsibility change depending on what your role is, but it also changes depending on if you’re a freelance web designer versus working with a company. You’ll have way more responsibilities as a free lancer than you would working for a company.

screen-shot-2016-11-11-at-1-27-55-pm

Something that was immediately pointed out that no matter what your responsibility is, whether you strictly focus on the design aspect of the webpages, or you work on coding, you will need to know how to code. If you focus on the design part you will need to design with code in mind. This means that you will need to know HTML, CSS, JavaScript and maybe even some PHP.

When designing a webpage, you need to do a research so that you understand the who and what the website is being designed for. In the image below you will see some examples of things to know before going into the designing process.

screen-shot-2016-11-11-at-1-32-43-pm

After identifying the client and its target audience to give you ideas when designing the webpage, you now need to compose the pages using a grid system like the 960 grid system.

screen-shot-2016-11-10-at-3-28-30-pm

Another way is to use the Responsive Grid System found here. This site uses its own grid system and provides plenty of examples of ways to compose your own space.

 

While knowing all of these is important, you also need to know how to communicate the webpage to the target audience. Viewers tend to skim through a website quickly and knowing where their eyes are roaming is helpful to know how to design and layout your website.

Screen Shot 2016-11-11 at 2.00.37 PM.png

You can see from the image above, that most viewers’ eyes travel in an F-shape so most of the important things in your layout should probably follow this zone. Readers will not read text thoroughly so the first two paragraphs need to include the important info. All sections should be labeled clearly with headers, subheads, paragraphs and bulleted lists. And images should be used to draw attention to important areas.

Day 62 | Lesson 4 (Web Aesthetics)

For lesson 4, I learned how to utilize typography, color, and a balance of websites that follow trends. Just like everything, in web design what is popular now may not be popular later. This is a career that is constantly changing and designers need to be able to adapt with it.

Choosing a type for your website can be just as important as layout and color scheme for the site. It needs to be readable above all, but it also needs to have personality, especially one that fits the personality of your website.

There are web-safe fonts and web fonts to choose from. Web-safe fonts are very limited in their use, because these have to be common fonts that are already saved on the viewers computer, and mac and Windows users don’t always have the same kind. Here are a list of 24 common web-safe fonts:

screen-shot-2016-11-09-at-3-04-04-pm

Web fonts are platform independent and do not need to be installed on visitor’s device leaving you with hundreds of options. Two common ways to use web fonts is through Google fonts or Adobe’s Typekit.

Google fonts requires two elements to work, a simple rule in your CSS, along with a link in the head to the web fonts source.

screen-shot-2016-11-09-at-3-09-50-pm

They also offer an option for using the at import rule, or JavaScript instead of the standard link.

In Typekit, you create kits to configure the fonts you want to use, which gives you some script tags to add to your head, and provides the selectors to add to your CSS. The good thing about both of these options is that they do not require you to install, or host, these fonts since they are hosted elsewhere.

Here are some links to popular sites to find web fonts: Google Fonts, Typekit, Adobe Edge Web Fonts, FontShop, fonts.com, and Font Squirrel.

There are also a few categories for font types like serif and san-serif for the two most common. As well as display fonts like slab serif, cursive, handwriting or script, decorative and typewriter.

One important pro tip when finding font pairings is to look for contrast like below:

screen-shot-2016-11-09-at-3-21-15-pm

Google fonts has already come up with some font pairings with their web fonts if you’re having trouble. Simply click on the font you want to choose, Click on “See Specimen” and then scroll down till you see a list of popular pairings. You can click on each one to see the pairings with the font.

Adding videos to your website has also become a trend because it can make your site more active, provide a sense of movement, engage the viewers, and make the webpage “sticky.”

Going back to choosing a great typeface for your web, can also apply to choosing a great typeface for your video on the webpage. Video + Text + Call to Action (CTA), meaning the text should call your viewers to action to subscribe or register to an event.

Text over a video should be legible and readable, and one way to do that is creating contrast. Below is an example of not using enough or any contrast between the text and video.

screen-shot-2016-11-10-at-12-53-28-pm

The sunlight through the window and the white typeface competes too much and makes the text illegible. We could change the color of the typeface, but there are other ways to help make the text readable for viewers. You could create drop shadow for the typeface. You could put background color behind the type. You could also add a CSS background to the div holding the text with alpha transparency or without it, which is my personal preference.

screen-shot-2016-11-10-at-12-53-50-pm

What I liked about this lesson is that it helped me really look at how choosing, not only, the correct typeface when creating my own webpage, but also the right color schemes, patterns, adding more form versus flat design, all while creating a balance to my webpage and even adding other effects (such as video) can effect my sites readability and appeal for viewers.

Day 60 – Lesson 2 (Design Aesthetics)

In lesson 2 of Design Aesthetics for the Web I learned how to use elements of design such as texture, value, color, shape, space, type, form and line.

Each of these elements are vital to creating a good design for a website that is not only easy to look at, but emphasizes what that particular website is about. Again, these videos didn’t really make me deal with a certain Adobe program like Illustrator or InDesign. Instead it went through important information to consider when creating a design for a website, so I’ll focus on the things that I found interesting.

While color is one of the biggest ways to make your statement of the type of website you wish to represent, I found it interesting that it’s best to work in gray and white before actually putting it into color. Developing some of the main components for the website, such as layout, which will have white space, form and shape, then moving on to typography is very important before deciding what color schemes the website needs.

That said, the color will help set the mood for a website, because each color can evoke a certain emotion.

screen-shot-2016-11-04-at-2-12-12-pm

You can combine these colors however you need by using the color wheel. the color wheel, of course, contains your Primary colors, the Secondary colors and also the tertiary colors (which is your primary colors combined with the secondary).

screen-shot-2016-11-04-at-2-07-48-pm

You also have tints (any color + white) and shades (any color + black), which all combine to make up your color wheel.

Adobe Color CC is a good way to create your own color schemes for your website if needed.

Day 59 – MRF Logo (project contd.)

So yesterday, I mentioned that I was having trouble with my font not being able to embed because, for what ever reason, the creator decided that the font could only be used for commercial use if you received permission despite it saying that it was 100% free.

Instead, I used a font called Aero at 117 pt size font. Also, after reviewing the logo further, I really didn’t like the arrow, so I deleted the triangle, and decided to use only the stroke lines. I positioned the strokes above and below the “MRF”, with “Services” underneath, then added two dashed lines to the sides in the middle.

screen-shot-2016-11-03-at-3-17-20-pm

I used the star tool to then add three stars in the pasteboard to position them, size and give them a color before adding them to the logo. I applied a bigger star, then added one smaller to the right before rotating slightly. I copied (command+c) then pasted (command+v) before right-clicking on that start to reflect it horizontally before playing it to the left of the other two stars.

After, I grouped them together (command+g) before placing them in the logo.

screen-shot-2016-11-03-at-1-39-29-pm

I decided to change the color of the stars to red before finishing.

screen-shot-2016-11-03-at-1-40-58-pm

Finally, I selected the entire logo, copied it, then created a new document before pasting my logo on that. With that “new” logo created Outlines under the Type menu so that the font would be outline paths. The reason I created a new document to do this is so that if I need to make challenges I can go back to the original file to make any changes I need.

Day 58 – MRF Logo (project)

Today we started working on creating a logo for MRF Services with a few parameters given, but other than that a lot of freedom in creating it.

First, the logo needs to be an oval shape with red and white for the main color scheme.

I started with the ellipses tool to form the oval outline of the logo with a red stroke. I then used the “Offset Path…” under the Object menu by scrolling down to Path. Using this I could create another red stroke. I created one more, this time with a white stroke before filling the outlines with red.

screen-shot-2016-11-02-at-1-28-11-pm

I then used the text tool on the paste board typing “MRF” and then “Services.” Initially, I used a font I found from dafont.com called “Add City Boy,” however, I’m going to have to change that because some creators have weird copyright policies even if they say 100% free next to their created fonts. I will have to use a different font so that it will be able to be embedded with the logo. I gave the font a red fill with light-gray stroke with a 100 pt size.

I later increased the size of the text so that there wasn’t so much wasted white space inside the logo.

I then created a stroke with a light-gray color and duplicated to create two of the same size. I created a triangle with the same stroke color to place as an arrow.