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:
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.
SourceCode 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.
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.
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.
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”.
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.
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.
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.
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.
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.
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.
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?
Choose a readable font for the paragraphs, so the text is easy to skim.
The use of Color is crucial to communicating effectively.
Try to work with a grid-based layout. It helps make content be organized.
Organize the content in an F pattern there too.
Highlight the most important parts in each section, using headings and images.
Keep the content simple, so people will be more likely to see it.
Breaking down content into bite-sized pieces, such as using lists.
Labeling everything and using folders to group layers.
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.
Designer vs Developer #9: Improving confidence and overcoming imposter syndrome
This is a post from the discussion between Mustafa Kurtuldu and Mat Scales who would like to share the method of breaking down the imposter syndrome.
This is a situation that before we start to make something new, we began to doubt ourselves. Besides, we are not able to focus on the task at hand because we are struggling with the demons telling us that we are imposters.
To overcome this syndrome, when we must do it initially is to define the word “Creativity”.
It is known as a process that one goes through when they are in a lively state of mind. People get inspirations from this state and they apply those in their work.
If the work you are creating is making you feel unwell, then it means you are gradually searching something out of your comfort zone and becoming a creative person.
There is an effect called the Dunning-Kruger effect is known as those individuals who don’t have their incompetence in a certain skill of particular area if they don’t possess a degree of skill in that field.
There’s an interesting discovery that the opposite of the effect is also true. In other words, it means that there is a possibility that someone may good at a certain field that they think they are terrible at.
This effect tells us that everything has its opposite side.
Besides, instead of comparing ourselves with others, try to compare with the historical stuff that you had already accomplished. Try to find what you got improved from your old work is a great therapy because it enables you to acknowledge past achievements and improvements at the same time.
Last but not least, in order to beat self-doubt, we need to accept that we don’t know everything and that is fine.
What does this article is saying is: just let go of those negative emotions such as self-doubting, and don’t pay attention to what the others are doing.
Designer vs Developer #22: How to create a design system
This post introduces three different layers used when building a design system. A design system is a set of principles that help guide designers trying to navigate a platform, environment or ecosystem.
In this article, the design system is based on the three golden rules for architecture from Roman architect Vitruvius: • Durability: The building should be robust and remain in good condition. • Utility: The building should be functional and useful for the people who are in it. • Beauty: The building should be delightful and soulful.
These three rules from Vitruvius was transformed into what Matías Duarte described it as a layer cake made up of three distinct levels.
FIRST PRINCIPLE: HUMAN LAYER The human layer is based on ergonomics which is a study about humans. The human layer is the most durable layer from Vitruvius principles. It is important that when creating a design system, one must understand the rules humans live by. For example, our fingerprints are about 3-4mm, and by setting a button’s touch target’s size into 48×48 pixels is because human’s eyes can see things clearly when the contrast ratio between the writing and background is 4:5:1.
SECOND PRINCIPLE: CONVENTIONS LAYER Every system needs a set of common conventions to help users get used to the rules. It’s like the location of the hamburger menu will change based on how the layout of the app display. This layer is about functionality and consistency as they help teach users about the various design patterns that exist in your design system, much like the utility rule in Vitruvius principle.
THIRD PRINCIPLE: BRANDING LAYER The branding layer helps to build a system to create a standard that is visually unique and recognizable.
It is the soul of the design system. Here you will use typography, color, shapes, animation, language, and images together to produce a look and feel that represents the meaning behind your design system.
For example, Google’s implementation of material design is motivated by the simplicity of Google search, by using the shape of search input and colors the less proportion with a lot amount of white space. The branding layer is alike the Beauty principal from Vitruvius.
When we want to design our own design system, we can follow those three layers and make our design durable, useful and beautiful.
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.
Usingshapes such as Circles, squares, and triangles to denote the difference between the three types of search results.
prefixing each result with colons
putting an uppercaseP, E, or T in the color block
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.
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.
ACA exam objectives: The questions on the Photoshop ACA are organized into 5 topic areas:
1) Setting project requirements.
It contains four objectives:
Identify the purpose, audience and audience needs for preparing images.
Demonstrate knowledge of standard copyright rules for images and image use.
Demonstrate knowledge of project management tasks and responsibilities
communicate with others, such as peers and clients, about design plans.
2) Identifying design elements when preparing images. The six objectives here are:
Demonstrate knowledge of image resolution, image size and image file format for web, video and print.
Demonstrate knowledge of design principles, elements and image composition.
Demonstrate knowledge of typography.
Demonstrate knowledge of color correction using Photoshop.
Demonstrate knowledge of image-generating devices, their resulting image types and how to access resulting images in Photoshop.
understand key terminology of digital images.
3)Understanding Photoshop there are five objectives in this topic area:
Identify elements of the Photoshop user interface and demonstrate knowledge of their functions.
Demonstrate knowledge of layers and masks.
Demonstrate knowledge of importing, exporting, organizing and saving.
Demonstrate knowledge of producing and reusing images.
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.
Demonstrate knowledge of working with selections.
Use Photoshop guides and rulers.
Adjust or correct the tonal range, color or distortions of an image.
Demonstrate knowledge of retouching and blending images.
Demonstrate knowledge of drawing and painting.
Demonstrate knowledge of type.
Demonstrate knowledge of filters.
5) Evaluating digital images with Photoshop. And it has just one objective.
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.
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”.
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:
re-activating saved selections
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.
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 peopleenjoy 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.
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.
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.
GridTrack: 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.