Intellectual property, copyright & copyleft

Introduction to open source and open source principles

This post introduces what is open source and what are the factors must be included when using open source products or websites.

According to what says on the Open-source’s website, the definition of open source is: “something people can modify and share”.

Nowadays, people have a deeper understanding of this term and developed certain rules for those who want to create open-source websites or software.

Those are called the Open Source Initiative and here are the following criteria:

  1. Free redistribution.
    This means that the open-source product is licensed from any party by allowing them to sell or give away. While using the resources, the code coming from the open-source project should not be charged in any form.
  2. Source Code
    As mentioned above, the code getting from the project is called: “Source Code”. A program must include source code and must permit anyone to distribute the code as well as compiled form.
  3. Derived Work
    The license must be modifiable and it must allow anyone to create derived works. Based on this idea, it must also allow the works to be distributed under the same terms from the license of the original work.
  4. The integrity of The Author’s Source Code
    When anyone is trying to alter and modify the work, one must keep the source code from the original work.
    It is an essential point that the ability to trace code when some author has modified the work.
  5. No discrimination against persons or group
    This rule is about that different groups of people should not be prohibited from accessing the open-source website, and those people should not be classified under any “race” or “nationality”.
  6. No discrimination against specific fields of endeavor.
    Similar to the 5th one, there should not be a license restricting anyone from using the program in any certain field of career.
  7. Distribution of License
    The distributed license includes everything required to secure right, and no action needs to be taken when using, altering or distribute the code.
  8. License Must Not Be Specific to a Product
    If the program is removed from the distribution and used or issued within the terms of the program’s license, all parties to whom the program is reallocated should have the same rights as those that are granted along with the original work distribution.
  9. License Must Not Restrict Other Software
    The license must not place restrictions on other software that is distributed along with the licensed software. In other words, this is saying that it’s free to use your open source code with proprietary code. The license doesn’t require all other programs distributed on the same medium must be open-source software.
  10. License Must Be Technology Neutral
    The license has to be open to a variety of technologies and interfaces.

These ten factors made up what open-source initiatives, each of which is indispensable for building open-source websites or software.

Web Design&Efficient Workflow

In this post, Sue Jenkins introduces several aspects based on the web design workflow.

The content is divided into the following questions:

What is web design workflow?

A web design workflow is a process of developing a website.
When building a website, each step must be arranged in a sequence, to make the process effective.

What can it be used to do?

This workflow, as what words already mentioned in the heading, is using most commonly for web designing.

It is helpful for those who are keen to design their website or mobile; especially for those who have some basic knowledge about Web design and the experience of actually designing.

Also, it will be better if the users have used graphic software such as Photoshop, Illustrator, and others used to design web graphics.

What is the purpose of making it?

The reason for making this workflow is to make the process of working and designing websites be as efficient as possible.
Furthermore, making an efficient workflow can reducing tautologies and streamlining the design process.

What are the benefits of learning from other designers?

Learning from other designers can help one get inspiration by referencing from taking a look at their method.
Plus, you can have a better understanding of the logical order that they used in their design.
The more you study from different designers’ examples, the more familiar and clear you get to know what you are going to do.

What kind of workflow does Jenkins use?

In Sue Jenkins’s workflow, there are four key components: sketch, moodboard, design, and revision.
Before going through the four steps, Jenkins will begin by making a wireframe to have a basic outline of the site’s structure and layout.
Next, she will move on to the stage of brainstorming ideas in sketch form.
What’s more, she will create a moodboard that including the artistic drawings such as patterns and color palette.
From there comes the last step: designing of the mockup and adjusting the layout, followed by making some revisions at last before settling the design.

In conclusion, web design workflow plays an important role in the field of Web graphic design because it makes the building process became more efficient.

Design Aesthetics for the Web

In this post, it introduces the aesthetics of the web in the following questions:

  • What is Aesthetics?
  • What are the elements of design?
  • Why it is important?
  • What does Nielsen Norman’s study found on how people view a webpage?
  • How to improve the designs to engage visitors through webpages both aesthetically and intellectually?

What is aesthetics?

In general terms, aesthetics is a term belongs to philosophy.

The term aesthetics was invented in the 1730s by a philosopher named Alexander Baumgarten.

He introduced the concept of “taste” where one judges the beauty of an object by one’s senses: there are sigh, sound, touch, taste, and smell.

Speaking of beauty, people view this word differently; which leads to a question: Is beauty objective or subjective? It actually could be both.

For those who are saying it is objective, there are indeed some historical paintings back from hundreds of years ago which people all agree that they are beautiful, like the Mona Lisa.

Also for those who regard beauty is subjective, there is an example from someone named Immanuel Kant.

Kant revised the concept of aesthetics as “the subjective means by which one can judge and appreciate beauty.”

He agreed to that beauty is subjective, it can shift over time, and it is dependent on context.

Aesthetics, as it relates to graphic design nowadays, has come to refer to means employing one or more of the elements and principles of design.

What are the elements of design?

The elements of design are the basic elements associated with creating any design.

What is different between principles and elements is that the former is like the rules you should obey, while elements are the pieces that will help you follow those rules.

There are eight elements of design, and they are color, value, texture, shape, form, space, line and type.

Why aesthetics is important to you as a web designer?

Due to the popularity of the internet and touch-enabled electronic devices such as tablets and smartphones nowadays, design aesthetics is surpassing the visual to enter other senses such as hearing and touch.

Good designs communicate a mood or a feel that goes beyond the content in the design.

In design, first impressions are extremely important.

The beauty or aesthetics of a design can make the difference between positive and negative impressions.

Good design can produce positive feelings about a product or service, so does the counter wise.

The process of valuing whether a particular design is good or not often goes quickly and subconsciously.

s a web designer, it is responsible to create good designs for your audience.

Also, there are good design is everywhere in our life.
Design influences everything, and we can find examples of it everywhere. Such as our clothing and our architecture.

Moreover, we experience design at every turn. For example in the supermarket, on our electronic devices.

What does Nielsen Norman’s study found on how people view a webpage?

When designing a web, the designer not only has to consider the meaning and relative importance of the site content but also have to reflect on the user’s experience and to expect visitors’ habits and needs.

There have been a lot of studies analyzing internet user experience, and the results have almost changed the way we build websites today.

There is one study carried by Nielsen Norman’s Group about how people view a webpage, the heat mapping evidence shows that the eyes travel in a very specific way when viewing a webpage.

it says, “Eye-tracking visualizations show that users often read webpages in an F-shape pattern, two horizontal stripes followed by a vertical stripe.”

On the map, where the red or hottest areas means where the eyes spend most of the time.

This type of study tells us that the most important content needs to be easily accessible for those visitors who may be read by rapidly scanning the site.
It was further discovered by the Nielsen Norman Group that users will not read the text thoroughly, so it is important to make sure the information must be organized in an aesthetic and intellectual form.

How to improve the designs to engage visitors through webpages both aesthetically and intellectually?

  1. Choose a readable font for the paragraphs, so the text is easy to skim.
  2. The use of Color is crucial to communicating effectively.
  3. Try to work with a grid-based layout. It helps make content be organized.
  4. Organize the content in an F pattern there too.
  5. Highlight the most important parts in each section, using headings and images.
  6. Keep the content simple, so people will be more likely to see it.
  7. Breaking down content into bite-sized pieces, such as using lists.
  8. Labeling everything and using folders to group layers.
  9. Pay attention to the details. Add essential content and remove anything non-essential.

The more clear you make a website’s information displayed, the more likely the visitors are going to engage with the sites; to purchase their goods and share the site with their social group.

In conclusion, building the website both aesthetically and intellectually can help the visitors engaged with the site better. It is important to use aesthetic and intellectual ways when constructing websites.

Accessibility for Web Design

– An ecommerce purchase

This post basically talks about the accessible design from a lot of different angles using three typical scenarios:

  • Buying best friend’s gift online
  • Arrange for a lawn mowing service
  • Listen to favourite podcasts

Putting ourselves in the shoes of the person that is each completing their tasks and think this question:

Will the scenario be different if it is for those disabled people?

Designers should put themselves in a unique position to influence the final work by creating more accessible designs from the beginning of the project rather than adding it in partway through.

The use of colour

When we start to create designs, we use several tools to communicate.
One of the most obvious tools we use is color.

We use it as a design element.

Color helps us distinguish one thing from another. but it doesn’t apply to those people who are color blind.

Without the color, those people with color blind can’t tell the difference between each line in the chart.

How can it be helpful for those people with disabilities?

When there is an issue when color cannot be used as a tool, use shapes or patterns to show the difference.

When changing that, make sure it isn’t the only method to communicate the message.

let’s put it into two scenarios.

  • Ecommerce site selling T-shirts

Solution: We can solve the problem by combining the color names with the color swatches and we’ve now made this much more accessible.

  • When using the search engine of the Podcast.

Each search result from the search engine of products was classified by its color to show if the keyword was found in the podcast name, episode titles, or the content of the podcast itself.

Solutions:

  1. Using shapes such as Circles, squares, and triangles to denote the difference between the three types of search results.
  2. prefixing each result with colons
  3. putting an uppercase P, E, or T in the color block
  4. put it to usability testing. Getting the answers and advice directly from the users.

Also add those accessibility works as well as for those can’t see color at all, or are blind, or have low vision.

By doing this right, you’re helping a lot of people due to the large population of people with disabilities.

As a designer, we need to find multiple ways of providing the same message.

Keyboard Functionality

Accessibility computer icon

One of the most important requirements for accessibility is keyboard usage because this affects people with many different types of disabilities.

When you make things accessible to use with a keyboard, you make it work for anyone who can’t use a mouse.

Example: when viewing a map
Such as the example of a map using a keyboard to do the same operation with the people use the mouse; the operations can be like
panning to different directions like up, down, left, right; recenter the map; zoom in or out, and even have little flags which for informing about each pin on the map when click on it.

In order to provide equal functionality for all different users, we need to make sure that all of that functionality is available for somebody using a keyboard.

Make each operation matched with certain keyboards keys.

Almost every same function for a keyboard user that a mouse user has except that Google Maps cannot access to the pins by using keyboards.

One thing to keep in mind, making sure that we can do everything with the keyboard doesn’t mean that we need to be able to tab to all of the content.

UX Foundations: Content Strategy

What is content strategy?

Content strategy is about bringing the right content to the right person at the right time, in the right context, and making sure it’s accurate, up-to-date, and appropriate through ongoing engagement.

What is content?

There are content everywhere in the world.
Such as a piece of art on the wall or the sculpture in a park.

Content is anything that conveys meaningful information to a person and it can be presented in the form of text/graphics/images/videos or audio.

What meaningful information is and how this relates to content strategy?

The meaningful information: the information enables the transfer of an idea beyond the words.

The example here is content as “boiled egg“, transfer meaning beyond the words than just “egg”.

The problem is, when the content strategy works, there is no guarantee the meaning someone finds in a piece of content will be the same as the others.

Each of us has different interpretations of the content we received, and this makes the information varies.

The problems we are trying to solve is:

How do we ensure the message reaches the right audience and is understood?

This problem is what makes content strategy so interesting.

Because:

“Content strategy is not just about creating a message. It’s more about giving the message the best possible chance of reaching and being understood by its intended audience.”

by Morten RandHerdriksen
  1. And while the final content matters to the content strategist, their true focus is on understanding
  2. the content creator and their intentions
  3. the audience and their needs and desires
  4. the nature of the channels and mediums the content will be presented in
  5. the people and processes that produce and maintain the content
  6. the ongoing planning for and management of the content.

The components of content strategy

Content strategy is really an infinite number of interconnecting circles, all of which affect all the others.

Two Systems of Content strategy:

  • Kristina Halvorson

Its content strategy as a circle split into two main halves:

  • content components:
  1. substance
  2. structure
  • people components:
  1. workflow
  2. governance
  • Erin Kissane

outlines this process as three distinct stages:

  • evaluate
  • design
  • execute.

To sum up, this post basically introduce different aspects about what is content, what is content strategy and what are the components of content strategy.

Photoshop VS Gimp

Photoshop Tutorial: https://phlearn.com/photoshop-tutorials/

ACA exam objectives:
The questions on the Photoshop ACA are organized into 5 topic areas:

1) Setting project requirements.

It contains four objectives:

  1. Identify the purpose, audience and audience needs for preparing images.
  2. Demonstrate knowledge of standard copyright rules for images and image use.
  3. Demonstrate knowledge of project management tasks and responsibilities
  4. communicate with others, such as peers and clients, about design plans.

2) Identifying design elements when preparing images.
The six objectives here are:

  1. Demonstrate knowledge of image resolution, image size and image file format for web, video and print.
  2. Demonstrate knowledge of design principles, elements and image composition.
  3. Demonstrate knowledge of typography.
  4. Demonstrate knowledge of color correction using Photoshop.
  5. Demonstrate knowledge of image-generating devices, their resulting image types and how to access resulting images in Photoshop.
  6. understand key terminology of digital images.

3)Understanding Photoshop
there are five objectives in this topic area:

  1. Identify elements of the Photoshop user interface and demonstrate knowledge of their functions.
  2. Demonstrate knowledge of layers and masks.
  3. Demonstrate knowledge of importing, exporting, organizing and saving.
  4. Demonstrate knowledge of producing and reusing images.
  5. Demonstrate an understanding of the features and options in a color management workflow.

4) Manipulating images with Photoshop
there are eight objectives here and they test the users whether know the Photoshop features or not.

  1. Demonstrate knowledge of working with selections.
  2. Use Photoshop guides and rulers.
  3. Transform images.
  4. Adjust or correct the tonal range, color or distortions of an image.
  5. Demonstrate knowledge of retouching and blending images.
  6. Demonstrate knowledge of drawing and painting.
  7. Demonstrate knowledge of type.
  8. Demonstrate knowledge of filters.

5) Evaluating digital images with Photoshop.
And it has just one objective.

  1. Demonstrate knowledge of preparing images for web, print and video.

Preparing images for the web

For the Photoshop ACA exam, one should also know how to use the Export As dialogue box which we looked at in an earlier movie.

In this exercise, there is an image of a rabbit in black pixels on a transparent background.
This post talks about some of the options for exporting images from Photoshop to the web especially using the Save for Web dialogue box.

The goal is to save the image for the web. Before doing so, the image must be scale down to an appropriate dimension.
By changing the quality of the image, and with changing the format into JPEG.

Gimp

Working with document templates

Using Templates allows you to make new documents with any desired properties very quickly and easily.
And in this post, it introduces:

  • how to use the Templates dialogue to create a new custom image
  • hot to edit a new custom image template.
  • For create a custom template in the Templates dialogue, what needs to do is goes to Windows, Dockable Dialogues, Templates.
  • Then you can see a list of the available templates that can be used to create a new template.
  • All you have to do is choose the template you want and double click it.
  • There are also buttons to create a new template, to duplicate a template, to edit a template, and to delete one.
  • Once you want to edit the name of a template, you can just double click on the name and type down the new name.
  • And if you want to edit the icon for the template, also double click the icon here.
  • Or by clicking the template at once, then choose“ Edit Template”, and entering the number you would like to adjust. Finish this step with click “OK”.

Saving selections

By saving selections, you can avoid having to recreate a selection every time you need it.
This post tells us the two basic ways of saving selections:

  1. re-activating saved selections
  2. Saving selections as channels.

The first one is pretty simple, the only thing you need to do in order to do is to leave the selection active when saving and close the file.

The second is to save the selection as a channel.
To do that, just go to the select menu, and choose save to channel.

In the channels dialog, the saved selection will display as an extra channel.

In conclusion, this post introduces both Photoshop and Gimp’s function and some skills while utilizing them.

User Experience for Web Design

Building a site for your visitors


You need to know who your audience is and how they behave before you can build a successful site.
Different audiences have different needs.

For example, there’s a case of contrasting a car enthusiast with a small business owner; what they focus on and concerning are different.

Knowing whom the audiences are by tracking the behaviors of the visitors coming to your site.

The first step is to spending time and thinking about who exactly you’re going to optimize the design of the site.

Sketching out the attributes of the visitors that one cares about, what they value, what their goals are, and what concerns might stop them from using my site.
Someone called this type of sketch as “persona”.

By focusing on this one individual, what actually done was making a lot amount of people enjoy using the website you produce.

Understanding how people browse the web

  • By knowing what motivates the people, you may design a site that people enjoy using it.
  • When people use the web, they’re almost always doing so to find information, not for pure entertainment.
  • Most people visiting the site while having a specific goal in their mind, and we can tracing it from the searching engine; since that’s where they might access your website rather than a direct URL.
  • By doing so, it helps you clarify what does the visitors want from your site.

Simple Design

All elements of the page should be helping to tell the story, and if they don’t help, you should get rid of them.

Let’s look at graphical elements of the site:

  • Site decorations should be matched to the scene for what the site is about.
  • Also, images should play a supportive role to the content.
  • Besides, advertisements should be associated with what readers are likely to concern about.

Have a look at the textual elements of the site:

  • Remember to cutting the amount of content on the page helps you be more clear on expressing the ideas.

“It’s normally possible to cut it by 50% compared to what you might have in a print based layout”

by Chris Nodder

Furthermore, the appropriate fonts must be find which are legible on the screen.

In conclusion, this post introduced the following three points: think who the audience is before actually building the website, understand what the audience’s goals are by tracing the search engine; and using graphical and textual elements when building the site.

Web fonts and Google fonts

An overview on HTML and the different types of Web fonts

HTML overview/review

HTML Tutorial: https://www.w3schools.com/html/default.asp

  • HTML defines the structure of a webpage and the meaning of the content to the browser.
  • Using semantic HTML for accessibility and SEO.
  • HTML and CSS work closely related together.

HTML+CSS +JavaScript= Front end.

  • HTML describes the content to the browser.
  • CSS Presentation layers; defines styles. (e.g: colors)
  • JavaScript Adds interactivity to the webpage.

HTML terminology and syntax.

Elements are the components that define page objects, such as paragraphs and links.

Tags are used to define these elements, using angled brackets wrapped around the tag name.

They usually come in pairs and wrap the content to give meaning to it.

The opening tag is added at the beginning of the element, and the closing tag, with the addition of a forward slash, marks the end.

There are some exceptions to this rule.
Void elements don’t have closing tags and don’t wrap any content, because they are the content. Such as for building tables.

Some void elements can be used on their own, and others require additional information. Such as <hr> and <omg> stands for each separately.


Document Object Model

The Document Object Model (DOM)represents the tree-like structure that is created when writing HTML.

Each element is an object, which makes up the document, hence the name, document object model.

Nested elements meaning the tags are written inside of other tags.

Web fonts and Google Fonts

Font Options

There are two types of fonts : Web Safe Fonts and Web Fonts.

Web fonts

Internal Font Sources

  1. Downloaded font files.
  2. Included in your project’s directory just like any other file. (CSS files, images, HTML files, etc).
  3. Declare and link to the font files using a method called @font-face.

External Font Source

  1. Third-party online services.
  2. Don’t need to download any files, or include them in your project’s directory.
  3. You can link directly to CSS and the font files which are hosted online.

There is a website named “Typekit” which need to pay the fee but can access to those high-quality fonts.

Google Fonts is a good choice for having all the fonts free.

Web safe fonts and the font family property.

The typeface is commonly referred to as a font or font family, but it’s actually a set of fonts, designed with common characteristics composed of glyphs.

Different Typefaces

  • Serif typefaces have small decorative lines.

e.g: Georgia, Rockwell, Times New Roman.

  • Sans serif typefaces have no decorative lines.

e.g: Verdana, Arial, Helvetica.

  • Cursive typefaces have a hand-lettered look.

e.g: Brush Script MT

  • Fantasy typefaces are distinct and ornamental, which is similar to script typefaces.
  • e.g: Papyrus, Copperplate
  • Monospace typefaces, each character uses the same amount of horizontal space and the same width.

e.g: Courier New.

What is Web Safe Fonts?

Web-Safe Fonts are the fonts (include Arial and Times New Roman)that are commonly preinstalled on computers or other electrical devices.

There is a resource from cssfontstack.com which lists all web-safe fonts and also categorizes them into typefaces.

In conclusion, this post introduces the overview of HTML, CSS and JavaScript’s relationship; the Web fonts and the Google fonts; different types of Typefaces fonts and Web Safe Fonts.

CSS Grid and Grid Features

Terminology
The basic concepts of CSS Grid.
Grid Container: The element containing a grid, defined by setting display: grid;

Grid Item: the element that is a direct descendant of the aid container.

Grid Line: Horizontal rows or vertical column lines separating the grid into sections. These are sequenced by number, starting and ending with the outer boards of the grid. It can also be named for easier reference.

Grid Cell: The intersection between a gird row and a grid column. Efficiently the same as a table cell.

Grid Track: The space between two or more adjacent grid lines. Row track are horizontal, Column tracks are vertical.

Grid Area: Rectangular area between four specified gird lines. Grid areas can cover one or more cells.

Grid Gap: Empty space between grid tracks(shown in blue). Commonly called gutters.

There goes the following CSS Grid features:

CSS Grid brings outside-in, two-dimensional layouts to the web browser.

CSS Grid Features: Grid Items

  • Direct first-level descendants of the grid container.
  • Second-level descendants need their own gird.
  • Subgrids are not supported – no present road map.
  • Resist the urge to “flatten” your HTML to make every item a grid item.
  • Embrace nested grids.

CSS Grid Features: True Grids

  • Grid items adhere to strict columns and rows.

CSS Grid Features: Content Stacking.

  • Any fire item can be placed anywhere on the grid.
  • This includes placing one item on top of another.
  • Items are stacked according to the HTML source order.
  • Items can be recorded using the z-index property.

CSS Grid Features: Content Order.

  • Any grid item can be placed anywhere on the grid.
  • Manual placement is not impacted by the source order,
  • Make sure the visible content oder matched the source content order to preserve meaningful communication.

CSS Grid Features: Pure CSS Grids.

  • Grids are defined using the pure CSS.
  • Grids can be nested inside the media queries.
  • Grids can be applied conditionally.

Overview of the starting point

All the content from the exercise website is fully accessible, easy to read and to maintain, but it is not being displayed in a three column layout.

In order to make a three column layout, it have to do by defining a gidd on the main container, which would be the body element with the class site.