Author: Caro

UX or User experience seeks making every visitor feel like the website they’re navigating on, was built just for them. For that, weed to know who the audience is, how they behave and what their needs/concerns are. Most of these users will have similar attributes, we can use them to create an imaginary persona. This persona is used as a reference for further experiments. Once this information is collected and established we can start thinking about user experience.

Most often visors end up on a site as a result of using a search engine. Because people navigate through the website with a specific goal in mind, it’s important that they reach that goal quickly and effectively. Whatever page they land on first, they have to be able to spot immediately the information they need. A clear site tagline, a descriptive navigation, a descriptive page heading, informative pictures & summary texts can help with that.

• 

Clear language can really help a first time visitor to make their way around the website. The content has to make sense to everyone, professionals and beginners alike. A simple design with non-invasive advertising have both the potential to create a compelling visual story, if it doesn’t, it’s not supposed to be on the page.

The design has to be consistent throughout the website. The faster the user adapts to the website, more time they get to spend focusing on the content they desire. A standard design makes things easier for the user, who’s already familiar with some elements major sites have already adopted.

Navigation

The user needs to know where on the website, is at all times. For orientation, we can use suitable words, images, additional information in the headings, clear navigation elements. Depending on their task, visitors use any combination of these elements to first situate themselves and then look for the content they need. People have to understand which section appeals the most to them, words that they’re already familiar with.

• 

• Task based navigation structure: using verbs
• Category based navigation structure: using nouns
• Audience based navigation structure: split the content so that it’s relevant for each type of visitor

Homepage

The homepage is essential. It has to clearly show what the website does. The terms should be phrased according to user’s needs. Make people feel welcome by giving them plenty of content to dive into. The home page is also the location where it’s indicated where the visitor should go next, like check a product or a service. Changing frequently the content on the homepage is a way to keep it fresh for returning visitors. If not careful, the homepage can get cluttered which may lead to confusion. Homepage isn’t the best place to show everything to the users, but to set their research in motion. Just in 5 seconds, the user should be able to tell what the site is about.

Media content

Using the right type of media to help tell a better story. Different types of media can target different type of information. First of all, it has to enhance user’s experience and also the information presented. Elaborated graphics are good for further explanation, less for decoration. Each piece of media presented should have a description and a download page.

Reconcile adverts and content

Depending on how valuable a website’s content is, the less likely it is that users can find it elsewhere. In this case, we can indulge in more advertisements. Good content, that is actually valuable to the consumer will generate more enthusiasm that will overpower the adds. Add banners should be placed consistently in the same areas on the website’s pages, where people will be familiar with them and not scared off or irritated. This method will help retain the key areas of the page for actual content, but still provide a balanced mix of content and advertisements. Instead of making more flashier adds in order to catch the user’s attention, it’s better to make sure that they’re relevant.

A remarkable user experience can be summarized in a few key concepts: keeping things simple, consistent and standart. The user should be able to spend a minimal amount of time figuring out things and adapt intuitively. The originality of the website should be capitalized from its content and how its presented. The structure should remain as simple as possible to make the interaction easy to learn and remember. The user & content is king, making things easier will only highlight the true value of your website.

Our main goal here is easier accessibility for people with disabilities to accomplish tasks online. A designer’s task is to create accessible design from the beginning of a project. Choose other methods to communicate a message.

For a person that is colorblind we can use shapes de denote differences between different elements. Using color contrast, a person with low vision may be able to differentiate colours thanks to colour contrast.  

Animation and motion techniques create engagement, and a sense of excitement in our designs. Some people experience dizziness or nausea when they watch these animations; especially when they’re unexpected. A thoughtful thing to do is to create an option on your website that deactivates this animation. Flashing elements can create incomfort to people with photosensitive epilepsy, and that’s why warnings must be put in place.  

Keyboard Interaction

An accessible keyboard can be useful to everyone who can’t use a mouse. DIfferent users need to have access to equal functionality, we can achieve that with a keyboard. In order to make sure that people have access to all data, the information accessed with a mouse needs to be replicated on a keyboard interface.

Video, audio, and images are rich content that have to have clear instructions of use, and easily repeat clips. This kind of content needs a text equivalent, a description of the object/element displayed. Decorative image or other media don’t need text equivalent.

Labeling form fields is an easy way to ensure forms are accessible. They create a programmatic relationship between the onscreen text and the form control itself so that the forms can be understood and used by people that can’t see the screen. It makes things easier for people with low mobility and dexterity impairments because they create bigger target for clicking.

Page titles, visible in the browser’s window title, they help people with low visibility to see the screen better. It’s an orientation cue that lets people know what the page is about. Using meaningful markup will ensure that the visual structure of our design is conveyed to someone who can’t see it. There are all kinds of tool like voice recognition Dagon Naturally SPeaking, screen magnifiers like Zoom Text, or screen readers like VoiceOver, NVDA or JAWS. These are efficient and easy when we have a good solid base of semantic markup. When the web designer makes sure their implementations use good, solid semantic markup, they enable people to create their own tools that help them consume things more readily.  People using assistive technologies can use it to their advantage.

Aesthetics in design and why it’s important?

Aesthetics relates to art and beauty. We experience beauty through all of our senses. What we consider beautiful may vary from one person to another. Beauty is also dependant on historical, contextual and subjective factors. In Web and Graphic Design, visual attractiveness comes down to a few principles and elements that dictate our perceptual systems. It is often said that first impressions are vital, but not only that, they are immediate and unconscious therefore they become universal.

How good design can affect perception and communicate a mood, message or feeling? Well that depends who the target audience is? Certain content will be able to appeal to a certain audience.

People are attracted to beauty in its various forms:

• Glossy surfaces
• Symmetry
• Alignment
• Right colors/font
• Harmony
• Fluidity

We experience design absolutely everywhere, even in nature itself. This is actually where designers take their inspiration from the most. They have a responsibility to create meaningful designs that represent their clients, their clients’ image, products, reputation, services while also attracting people.

Principles and elements of effective Web Design (use images)

Some basic and universal rules are available in order to guide every designer towards their goal. When we design for the Web we have to take into account:

• Color: it helps tremendously with fabricating a mood/ generating a feeling / sparking emotion (insert colour wheel and some colour systems: primary/secondary/tertiary colors/tints/shades/color harmonies/monochromatic colors/complementary colors/split complementary colors/analogous colors/). A colour in itself sends a message, it is unconsciously received by a person with already some preconceived ideas and notions. When thinking about colors, it is important to keep in mind the nature of the product or service you’re trying to promote and also the audience.

• Value: light & dark values, colors & gradation give the illusion of depth, shadows, inner glow, shading. The value of a color is almost as important as the color itself, they set a mood, give the illusion of reflection, add depth, create contrast and more.

• Texture: is the surface quality of an element. It adds depth & consistency to a design and makes it visually more interesting and compelling. It can help emphasize important elements or used as a decorative tool (image of a reflective surface). It is a digitally created illusion to make it look like the object has been enhanced. There are multiple ways of combining texture with other different techniques such as filters, again helping to create a mood same as with color.

• Shape: is defined as any flat area bound by line, outline, value or color. We have the traditional geometrical shapes and the organic shapes that imitate the natural world. Positive (buttons, nav bars => image) & negative shapes (created in btw the space of 2 or more forms) can occupy space or create the illusion of space. It can set the tone of the web graphics, organize elements, define different areas. Within a design, the shape of an element can help bring together a page especially if it has repetitive character. The repetition of shapes can create a feeling of harmony & unity in designs (navigation, thumbnails, buttons, widgets).

• Form: is the overall mass of shapes & how they relate to one another. Form communicates to the overall structure of a page where all the elements fit together in a harmonious way. A web designer has to think of the structure of a design, and to begin they can plan out this structure using black, white and grey shaped sections.  In order to make it more interesting we can add interactive elements such as sliders, 2D and 3D animation type effects. The end result has to be a clean, balanced and well coordinated design that feels complete (grid system). The website’s structure

and construction has to be made with form in mind so that the whole design makes sense.

• Space: or white space, determines the layout organization. It allows the user to distinguish the different kinds of information. Sometimes less is more, and this is especially true in web design.

• Lines: define position / direction / space. The user is intuitively guided by these lines, which makes travelling across the page a lot more efficient. A line can be of any shape or size as long as it accomplishes the functions mentioned above.

• Type: or design fonts, are applied to texts in order to improve readability. The right font can communicate the right message to the target audience (image with the typography diagram). Other attributes should be taken into consideration such as style, color, size, height/weight and leading. The most important part is always text readability, which is why the text type should remain consistent throughout the website.

Using the principles and Elements of Design

Useful basic components that help in the process of creating web design that works!

1. Contrast: is juxtaposition of opposing elements. It can be achieved by using different colors, tones, directions, lines, shapes, texture, patterns and whitespace. The important content is highlighted: the logo, header, nav bar, etc.

1. Emphasis: guiding the viewer’s attention towards the important information. How? Manipulating the text attributes within the HTML code, like style types & spacing.

1. Balance:  the elements are organized in such a way that creates a feeling of balance and harmony. The grid system helps to achieve a balanced layout.

1. Unity: a pleasing arrangement between all the parts within a composition. The relationship between the individual parts and the integral design has to communicate an idea or emotion. Putting effort into creating interactive and responsive hyperlinks that actually look like they accomplish the expected function.

1. Pattern: are to be followed! Patterns of the same nature (size, shapes, decorative elements, color schemes) follow a sense of unity and cohesiveness.

1. Movement: adding a sense of movement brings with it a sense of interactivity for the site visitor.

1. Rhythm and repetition: using a set of repeating elements and playing with border styles.

1. Proportion: elements of design have to be scaled proportionally and accordingly to what the client is trying to communicate.  

1. Simplicity: or visual economy, promotes the idea of showing what is actually essential. It calls for elimination of any other elements that do not participate into conveying the intended meaning behind the design and content.

1. Gradation: adds a subtle sense of movement by gradually shifting from one state to another. Different elements are receptive to gradation that allows the to viewer to change perspectives in an organic way.

WHAT ARE THESE COPYRIGHTS?! You can see and hear about them everywhere but still don’t fully understand what they’re about? Copyright issues on YouTube or copyright claims on Instagram, all of  them relate to creative work and all of them have to be respected. Let’s have a more deeper look about the most important characteristics of  copyrights nowadays .

Copyrights are the exclusive rights to use, copy, and distribute creative work. The work has to be tangible, or in other terms being perceived by others.

A license is a permission to undertake some activity (to use a software for example).

Duties and obligations come with a license. The entity that wrote the software is the copyright-owner which has the exclusive right to use, copy and distribute the software.

A trademark – a word or symbol used to describe a company, product or service (branding)

A patent – exclusive right to make, use and sell an invention. A software can be patented.

The software code we can view and edit in an editor is subject to copyright.  What the software does when it executes can be subject of patent. In order for somebody other than an owner of copyright, trademark or patent to get the benefits of those items, a license must exist.

Open source main principles:

The Open source initiative is the most authoritative source for guidance

1. Free redistribution: the code from the Open source project must not require a royalty/fee.
2. The program must include source code and must allow distribution in source code as well as compiled form.
3. The license must allow modifications and derived works, and must allow them to be redistributed under the same terms as the license of the original software.
4. The integrity of author’s code must be contained.
5. No discrimination against persons or groups
6. No discrimination against fields of endeavour
7. Distribution of only one license required to secure rights, no subsequent activities must be carried out in order to use, modify or distribute the code
8. License must not restrict to product
9. The license must not place restrictions on other software that is distributed along with the licensed software, it doesn’t require that your entire project itself has to be open sourced.
10. The software has to be open to a variety of technologies and interfaces

A software licence is a permission to use software. May include rights to modify and distribute the software.

• The word copyright/copyright symbol
• The year of the first publication
• The rights owner
• The right statement

Public domain – its intellectual property protections have lapsed/expired/cannot be ascertainable (no license required).

We cannot eliminate the existence of the copyright, because by law it just gets created upon creation, and when it can be perceived by somebody else. The only way, that one can legally use software created by another, is by way of licence.

The most prevalent licences today:

• GPL (general public license)
• MIT (the copyleft)
• Apache (commercial permissive category)
• BSD
• Mozilla public license

GPL : most extensive open source licenses available today

With GPL, just possessing a copy does not require acceptance (no contract exists). You can make modifications and never release them outside your organization. You can use GPL if you care about controlling distribution and you want to ensure your code does not end up getting consumed into proprietary code with no benefits to the greater open source community.

MIT: states explicitly that anybody who obtains a copy of license software is free to use, copy, modify, merge, publish, distribute, sub-license or sell copies of the software. You are free to include MIT covered code in your proprietary code without the worry of the resulting code being subject to the MIT license (contrary to the GPL). With the MIT license, you are free to create derived works and license that derived work under a completely different license. If you don’t care to place any restrictions on how people use your software and are not interested in what happens to your software from subsequent distributions, then the MIT license will work for you.

Apache version 2: considered the most commercially favorable. It contains a patent license grant. You’re free to include Apache code in your proprietary code without the worry of affecting the copyright status of your existing proprietary code. There is no requirement to share any or all of the modifications you make. What you need to make sure of in these cases is to clearly specify which code falls under certain licenses. The Apache License has an embedded contributor license agreement (agreement between the project and a contributor).

A permissive license (BSD, MIT, Apache)  – it places a few if any obligations on the part of the individual/entity using the code.

Copyleft – when the creator wants to make sure others have the right to use, copy and distribute my work. This is different from permissive licenses which allows you to re-license subsequent works under a different license, if you want.

1. UX Foundations: Content Strategy

Management of content – in the web design process, we think about the content at the planning stage and plays a role throughout the entire process, from ideation to design and development through publishing and maintenance.

Content strategy is about bringing the right content to the right person at the right time, in the right context. To make sure this content is accurate, up-to-date and appropriate it is necessary to understand the audience we’re dealing with by constant engagement.

A content strategist studies the content and the audience. Content represents the information, valuable information directed to its audience. Content in web design consists of (?). The meaning of a piece of content isn’t universal, and there’s no guarantee everyone will interpret it the same way. The content strategist facilitates successful communication, by enhancing the meaningful information. A professional understands the intended message, the context it’s presented in, and how to transfer it to the right audience.

The message – it has to be heard and understood by the right audience. The content strategist will also focus on the content creator and its intentions.

Key driving questions?

• What? At the core is the message
• Why?
• How?  
• Where?
• For whom? People: unique individuals
• By whom?
• With what?
• In what context?
• When?
• How often?
• What next?  

At the core of CS we find the message that is for people. We have to understand these people, their motivations and goals. Intentions of the creator, the motivations of the recipient, how to ensure successful communication between them.

Understand the stakeholders:

• What message are we communicating?

• What does “success” means for this project?
• How do we set realistic, measurable goals?

1. Educate yourself on the project and its goals?
2. Perform stakeholders interviews  & other employers of the business(business goals, tactics, projects’ objectives/requirements)

Define the audience:

• Who are we trying to reach? How is this audience unique? How does this uniqueness connect them to your product or service?
• Map out potential audience/primary audience/secondary/tertiary audience then narrow down a group within the group
• Identify what contexts may influence people’s perceptions (accessibility, restrictions)

Get real data from real people (surveys), create a representative sample of an ideal persona, 2 opposite and one extreme. Make an empathy map for each of your personas.

Define the content:

• Quantitative content audit: a tally of every piece of content including all relevant attributes and metadata
• Qualitative Content Audit: in-depth study and measurement of each piece of content against project goals and overall quality. The content has to meet project goals, be useful to the audience, be clear, consistent and concise.

Content models:

• Static pages
• Blogs and news-posts
• Fillable forms

The content model breaks large views of content down to their individual parts.

Voice and tone of content of a company, organization, or project must be:

• Authentic
• Consistent  
• Values promoted?
• Personality of the company?
• How the company wants to be perceived?
• Is it important to communicate authority and professionalism?
• Does humour have a role to play in our communication?
• Ensure the all content follows the same voice and tone (guidelines)

Style guides:

• Set of standards for the writing and design of docs, either for general use or for a specific publication, organization or fields (a manual for content creation for the company that fits a brand) => styleguide.io
• In order for it to be successful it has to be understand and followed by everyone

Workflow in Web Design represents the order in which we perform the tasks for the construction of a website.

First and foremost, we have to understand the client we’re working for. For that, we gather all the content necessary: photos and graphics that the business already possesses. Additionally, we need to collect information about their customers. During this process, the client needs to make clear what their project goals are. This will help create a model of the client and their business, that the website will help further promote online.

 

Following this, the next step is to create a site map, it shows how the pages should be organised and linked together. The navigation bar menu will influence the layout, when the layout will determine what kind of experience the user is going to have.

The information presented on a page will vary in size, functionality and relative importance.

The different parts of a page like the header, footer, navigation bar and also the rest of the information has to be organised depending on the factors mentioned above. To create this wireframe we can use traditional pen on paper, a design software (Photoshop or Illustrator), a wire-framing app or any other online wire-framing tool.  

To get a more realistic feel of our website, using pen and paper for sketching is the best method to achieve that. The site map and wireframe are used as guidelines, sketching manually allows to catch the actual vibe we’re seeking for our website.

Creating a few visual layouts and looking at them all once will help us choose the best solution.

Create a moodboard! A moodboard is the visual guide where we attempt to capture the mood or feel of a project. The client can participate in this process by making aesthetic choices separately from the content, in accordance with the project goals. The moodboard should include:

• • Designer’s company name and branding info

• • The customer’s name and logo

• • Fonts and sample texts

• • Colour palette texture and patterns
  • Photos and illustrations

Other embellishments would prove themselves useful such as: paper scraps, magazine cutouts, screenshots of other websites, fabric swatches, videoclips.

 

Designing a web mock-up. Using our previously made wireframe or paper-sketch, we can already select regions on the homepage, to where and how to put the content. The header navigation, footer will be persistently placed on the same region on every page of the website. It would be useful to start at the top of the layout and work downwards.

Time to add the moodboard elements! If the moodboard was created using Photoshop and Illustrator, we can duplicate the necessary layers from our mood board into our mock-up file. Test up different ideas and compare them. Applying the moodboard elements makes the website come alive.

After dealing with these aesthetic elements, we can proceed to adding the page contents and correcting the layout. If there is a Word document, its contents have to be transferred into the Photoshop file. Each content once inserted, has to be adjusted to the existent page’s elements. In regards to the text, it has to be at the right size, style, colour, case and font face. For graphics, images’ size have to be changed in order to fit. Every element has to be worked out in order for the layout to look right. In some situations, it is necessary to discuss with the client, in case there is not enough information, or if that information doesn’t suit the product.

Making revisions to the design mock-up! Often enough, the work produced so far might need a few modifications in order to fully please the user’s needs. Making updates due to client’s feedback and responding to them efficiently is also part of the whole workflow process. Coming up with other solutions and ideas in order to satisfy client’s concerns and curiosity is will be obviously positively received.