Time flew by while I was on Holidays. A new fresh start is coming!

Welcome back everyone!

Yesterday was the first day of school after a small break for Christmas. I have been resting although also, I has been having a look at some JavaScript since we are going to start with it from Thursday on.

I really liked the class of yesterday. It was about the evolution of graphic design, how draws, paints and print, were used in newspapers as marketing and how all of this turned into UX and  all digital that we know today. All of this with a fast and clear overview; from (Nouveau movement, Bauhaus,)  the use of typography, use of mathematical forms and its different uses, draw techniques until nowadays, including different software and tools used by designers.

For those who are interested:

Balsamiq:  It is a rapid wireframing tool that reproduces the experience of sketching on a whiteboard, but on a computer.
Sketch: It is a proprietary vector graphics editor for Apple’s.
Figma: It is a design collaboration tool and browser-based, similar to Sketch. It can be used in Windows.
InVision: It allows you to create clickable versions of your design.
Zepling:  Focuses purely on improving the collaboration between designers and developers.

From now on and during 9 weeks we are going to be working on

Process of Creating a Website 2/2

Now that I have everything ready (or not)

Let´s start coding the site, making it real.

sadda.jpg

 

HOW TO TURN MOCK UP INTO A REAL WEBSITE

The screen resolution is one of the most important factors to consider for the size of a website, although not the only one, and for this you also have to take into account the most common screen resolutions. Until a while ago the most popular resolution was 1024 × 768 pixels, but that has changed in recent years and now the most common size is 1366 × 768, and secondly a much larger size 1920 × 1080.

That does not mean that we have to design the site at that scale since there are more factors to consider.

We have to take into account the purchasing power of our users since the higher the purchasing power is, the more likely that the resolution they use in their computers will be higher.

Also, if the content of the site is mainly text, a smaller width would be better as it would avoid long paragraphs on the screen. Although, if the content is videos or images, a large resolution would be recommended to make the most of it.

So I have decided to create it within a range of 1000 to 1400 pixels, the site will look good from resolutions of 1024 px that are still very popular up to higher resolutions.

This size is very good, and ensures that the site can be seen by most users with a desktop computer.

In the future with more knowledge about coding I will try a responsive system so that way my design will adapt to all devices.

BUILD GLOBAL ELEMENTS

The next step is having all the content ready to be used and create folders to organize your project. Remember; try to use pictures and content with as much light as you can including all the requirements necessary for your site, and also keep in mind that your site has to be fast.

And then, the navigation bar, footer, contact form, and modal elements which don’t change from page to page.

Remember to rename them with a class in case you need to make changes later.

 

When I started creating my website, I realized that the colors that I had chosen before weren’t good enough for my website. It is my first project, so I actually never realized how good or bad a palette can be for your site. It’s not the same viewing the site in PSD compared with the actual site. So I hope you forgive me if the final project has a couple of things different from the PSD. Colors overall.

For this project, I have created global elements of the navigation, a logo, and footer with Social Media symbols to use within any page.

The navigation bar consists of the webflow navigation element. With a Logo, background in black (more visual and serious) and 4 buttons linked to other sites.

Here you can see my html and css:

html; HTMLnav

css;

css1

While I was coding based on the PSD, I realized that the color nav and the hover in all the button list wasn’t good enough for my design, that is why I have decided change it.

My anchor background was actually easier to create here than with photoshop in my PSD.

I just had to upload the tiny pic and duplicate it with css. (Remember that there are more than one way to reach the same solution). Also I am open to new ideas for those who are interested in sharing go ahead.

Here an example of my css for the background.

css;

css2

I fixed the background so it stays in one position, while all the other elements in the foreground can scroll up and down.

The footer will be the last element explained here since those three; nav, background and footer are the most important and they will be used on the rest of my site.

On the footer, I have used Fontawesome to create all the logos for Social media, which have been linked to different sites. Also, I chose Flex Box to give it the style through css.

html;

footer1

By the way, don’t forget to include Fontawesome in the “head” of your site, this way you link the places and html knows where to find the characters that you are working with.

Same as here;

css2

css;

footercss

Well, that’s all I can show you otherwise this article will never end! I will go through a couple of other things that I found kind of hard to complete or I never tried.

What have I found so difficult?

It took me a while to figure out how to make the pictures with a black background and letters over it when you hover over the picture. I tried to make it through opacity, then I tried different positioning in the elements, like relative in the parent and absolute in the children with different z-index and none of those were working.

Here is how I fixed the problem.

html;

htmlfotooo

css;

12345

In the end, I spent at least 5 hours trying, maybe 6? Anyway, the start is always hard. Hopefully everything will be easier with more practice in the near future.

Something impossible at this point.

I tried, although I haven’t be able to make the rate working properly in my form. If you go close to the site and have a look at my rating starts, they are working right to left instead in the opposite direction.

I have no idea why!!! I have been using flex and trying to float the elements instead but nothing was working. At some point I had all tthe stars spread around the form. At this point is when I decide stop playing and keep going.

I suppose I need more knowledge in jquery. That will be my next step. I think with a little bit of more idea of Jquery and  keep working and playing with css in different projects I ll be able to create nice things. I can’t wait to see the evolution.

Things to work hard on in the next month.

I am thinking that I should work in the basis of  jquery. Then when I come back from Christmas I would be able to have a better understanding of how this tool is working and so, go deeply into in.

Also, after my break I ll focus on a couple of things from css as grid which will work perfectly with flex box and of course get deeply into our friend jquery and JavaScript.

For now, I just need a break for a couple of days because I am overwhelmed after my three months none stop with classes and work at the same time.

Although, I am not going to give up I will I promise to keep going as far as my imagination leads me. Remember;

Let’s allow our imagination fly the boat‍!


Let’s allow our imagination fly the boat🚣‍!

Process of Creating a Website 1/2

Welcome to the end of my first term!

movie cinema or theater hall for film premier poster design with

We have been tasked with creating a Website based on a known character from a movie.

Before starting the work, I need to know what and who I am designing for. Besides the description of the site, I need to know what the expectations are for it. That is why I did some research before starting.

Research, history and analysis of competitors.

1.Trends in the Market.

As everybody knows, the trends in food nowadays are towards healthy and organic products. Customers demand clean labels and natural ingredients. For retailers we have seen sales of healthier products such as Vitamin Waters, protein shakes and healthy snacks more than double in recent times. New ways of alimentation are appearing every year, for example; an alternative to veganism or vegetarianism is “Flexitarianism”, (only eating meat on the weekends). This could be one of the biggest new trends in the coming years.

Also, there are food trends in the market such as focusing on protein, that had risen to the top in 2017.

2.Company Introduction.

I will offer a total new concept in a shakes, juices and proteins shop. It is an initiative that has in mind sport; healthy protein smoothies with a focus on taste, diet; having good eating habits, drinking the lowest calories while getting information about a healthy life and sickness; avoiding all kinds of sickness and high quality, looking after yourself with our natural antibiotics. We will delight consumers treating them individually.
I will coach and inform our customers about fitness nutrition, exercises in the gym, and how to eat in the healthiest way. The website will be created as if Popeye and Olive Oil will run the business. They will be the mascots of the business and they will do amazingly!

It is essential that our website has a menu and informs consumers about the products, new recipes, story and how to contact us. All of this through Popeye, Olive Oil and friends…so don’t miss it!

We will use psychological factors to attract our customers with a clean layout, taking care of the colors and typography. Also with an easy to understand navigation together with a visual appealing interface.

Looking firstly to get their attention, then awaken the interest, arouse the desire and take the action of purchase.

3.Competitors

Let’s study and spy on the businesses of our competitors, to learn from them and know if they could be a threat.

ALCHEMY JUICE.CO
They have juices, smoothies, and some food.
Their strategy on their site is selling the brand as a natural and healthy product based on a detox programme. This is a diet based in detoxification; the body’s natural, ongoing process of neutralizing and eliminating toxins.

Website: (Alchemy Juice.CO)

  • Strengths;
    Strong logo and good colour scheme.
    Keeping a design element and content organized.
  • Weaknesses;
    Navigation is for PC using only.
    Long page. It takes too long to load.
    No responsive design on some devices.
    Hard to understand navigation, overlaping issues.

JUMP JUICE BAR
Juice shop where they sell healthy and fresh products with a fun environment. Their Strategy is to give you enough energy for the day thanks to their products which are packed full of key nutrients. Hence the description “fuel good”.

Website: (JumpJuiceBar)

  • Strengths;
    Clean layout.
    Design chosen is appropriate to the topic.
  • Weaknesses;
    Isolated page. Overcrowded with information.
    Poor typography and random colors.
    They were thinking more about the design than the usability of the site.

After we have studied our competitors, we know more about user needs and what our goals are. It is going to be easier to design a solution that satisfies both Users and Stakeholders needs.

I will demonstrate creativity throughout the project and hopefully everyone will be happy with the results.

Wireframes (Sketches)

Here is a visual representation of my interface using only simple shapes.

This slideshow requires JavaScript.

 

It is created early in the design process. Wireframes help designers to demonstrate how the layout should be organized without explicitly specifying the visual design of a product. So its basically easier than explaining it through words.

The goal of sketching is to explore a variety of layouts. Thus, using just enough detail so it will be easy to review and refine the sketches later.

Hold on a second

Before getting into Mock up. I will stop here to share with all of you a Contact Us page that was created yesterday in one of the classes through Jotform site.

It is a popular online web form builder. I really want to encourage you to have a quick look at this page since I found that so useful. You can create forms for your website as quick as a flash, also it is useful for those of you who need to send forms to make people fill them in.

Have a look at this, it was created in less than 5 minutes.

It will help me a lot with the project and make my life easier.

PSD Mock up

Main. (Home page)                   Hover buttons

 

Products page.                            Hover Buttons

Recipes page.                           Hover Buttons

Contact page.                           Hover Buttons

Keep going to the second part 2/2.


Let’s allow our imagination fly the boat🚣‍!

The best layout mode in CSS3; FLEXBOX.

I’m excited to show you all of this!

“You must either modify your dreams or magnify your skills.” (Jim Rohn)

happy family having fun together on the beach at sunset. Building sand castle horizontal view

What is Flexbox?

Flexbox is a system of flexible elements that comes with the idea of ​​forgetting old mechanisms such as positioning (static, relative, absolute …), elements in line or block (and derivatives) or float. Flexbox is a more powerful, clean and customizable mechanics, in which HTML elements are automatically adapted and placed. It allows you to place the elements of a page so that they behave in a predictable manner when the design of the page should accommodate different screen sizes and different devices.

What characterizes a flexible design is its ability to alter the width and height of its elements to best fit the space available on any device. A flexible container expands its elements to fill the free space, or compresses them to avoid exceeding the planned area.

The algorithm of the design model of “flexible boxes” does not start from any predetermined direction, unlike what happens with the “block” model, which assumes a vertical arrangement of the elements, or what happens with the “online” model, which assumes a horizontal arrangement.

Vocabulary & Properties

Flex container
The “parent” element that contains the flexible elements. A flexible container is defined using the flex or inline-flex values ​​in the display property.

Flex item
Each child of a flex container becomes a flexible element. If there is text directly included in the flexible container, it is automatically wrapped in an anonymous flexible element.

AXES
Each “flexible box” design follows two axes. The main axis is the axis along which the flexible elements follow one another. The secondary axis is the axis perpendicular to the main axis.

csshtml

Parent or Container Properties

Flex-direction. This property controls the direction in which the flex-items are laid along the main axis. It may take on any four values:

ul {
flex-direction: row | column | row-reverse |column-reverse;
}

Flex-wrap. This property controls how container adapts to fit all children. With the property flex-wrap: wrap; If there is no space available within the flexible container and there are no flexible elements in their default widths, the children (elements) breaks into multiple lines. Otherwise, a flex container will keep on accommodating more flex items on a single line. The flex-wrap property can take on any three values:

ul {
flex-wrap: wrap | nowrap | wrap-reverse;
}

Flex-flow. Multiple values declared in one line. It is a shorthand property which involves flex-direction and Flex-wrap in the same command. There are different combinations:. flex-flow: row nowrap, flex-flow: column wrap, flex-flow: column nowrap.

ul {
flex-flow: row nowrap |column wrap |column nowrap;
}

Justify-content. The justify-content property defines how flexible elements are arranged along the main axis in the current line. In that way flex-start will order the elements to stay at the start of the content while flex end will settle them at the end and so on. More info in this article.

ul {
justify-content: flex-start | flex-end | center | space-between | space-around
}

Align-items. The align-items property defines how flexible elements are arranged along the secondary axis of the current line. The default value is stretch. This will “stretch” the flex-items so they fill the entire height of the flex container. Examples.

ul {
align-items: flex-start |flex-end | center | stretch | baseline
}

Align-content. The align-content property is used on multi-line flex-containers. By definition, it controls how the flex-items are aligned in a multi-line flex container. Examples.

ul {
align-items: flex-start |flex-end | center | stretch
}

Child or Element Properties

I hope you are still alive! I know it looks like it is a lot, but once you start using this daily you will realize how fascinating flex box is and how much easier it makes our lives.

Here are the properties for the element:

flex-grow|flex-shrink|flex-basis|order

Firstly, we have the flex-grow property to indicate the growth factor of the items if they do not have a specific width. For example, if with flex-grow we indicate a value of 1 to all its items, each one of them would have the same size. But if we put a value of 1 to all the elements, except for one of them, which we indicate 2, that item will be larger than the previous ones. The items to which no value is specified will have a default value of 0.

flex-gwor Picture from getflywheel.com

Secondly, flex-shrink does just the opposite of the previous one, applies a decrease factor. In this way, items that have a larger numerical value will be smaller and vice versa.

Also, we have the flex-basis property, which defines the default size (base) that the items will have before applying the space distribution. Generally, a size is applied (units, percentages, etc.), but you can also apply the keyword content that automatically adjusts the size to the content of the item, which is its default value.

*There is a property called flex that serves as a shortcut for these three properties. It works in the following way:

.item {
 / * flex: <flex-grow> <flex-shrink> <flex-basis> * /
flex: 1 3 35%;
}

 

order

Lastly, order that allows to reorder the flex items within a container. Basically, you can move a flex-item from one position to another. This is done without affecting the source code in HTML.

Picture from: http://www.slideshare.net

How does it work?

Thats the question that everyone has in mind, and the answer is much simpler than you think.

To start using the Flexbox model, all you need to do is first define a flex-container. So, to find a way to explain I will give you this example in HTML:

Create a simple list of items taking this form:flexb1

As you can see there is a “ul” element as “the parent element”, and “li” as “the child element”.

To make Flexbox work you have to set in CSS “display:flex;” or “display: inline-flex” in the parent element. And give some properties like width, height and color to the childs element just to know what happens.

childparent

See? It’s that simple, and from there you’re all set to use the Flexbox model.

Remember that “<li>” elements are by nature block elements, which means they stack vertically. However, you can immediately see a change in layout, the list elements are now stacked horizontally, from left to right. Just like they would if you used float.

This video helped me to clarify my ideas about Flexbox. Hopefully it will help you too.

 

Do you want to try it now?

Play these Games Online;

Flexbox Playground
Flexy Boxes


Let’s allow our imagination fly the boat🚣‍!

References:
https://goo.gl/C6C7ey
https://goo.gl/FgqHSh
https://goo.gl/XmE3uc

The First Step in Design Thinking; Empathy Maps

Hello everyone!

Are the Empathy Maps really helpful?

Team in social networks working vector illustration

What are Empathy maps and what are they for?

The empathy map is a graphical tool developed by the consultant XPLANE used to identify our target audience.

Empathy map’s objective is to create a high degree of empathy with our clients, knowing their day to day and the world in which they move. In other words, put ourselves in their shoes and see the world through their eyes.

A deep knowledge of each one of our customers is the key at the time to choose the way to design our business. As the product / service must fit the needs of our customers very well.

Empathy Maps allow us to understand a person from multiple viewpoints in relation to the service. Based on the results of the user observation, interviews or research, insights can be drawn and user needs can be identified, which can also be included in the map.

An empathy map must answer:

  1. Customer Needs
  2. What is he/she looking for?
  3. How can we help?
  4. What could we improve?
  5. How can we know more about them?

To help with this we can create a sketch with 5 different areas. Like the one you can see below provided by my lecturer.

empathy

  • SAY; What this person heard from friends, family, etc? Who influences him? What kind of offers is he exposed to and what kind of problems is he facing?
  • THINK; What kind of emotions are expressed? What really matters to him? What is he expecting from you? Do not forget what they are not saying so focus in non-spoken language, voice tone and so on.
  • DOES; What can he tell everybody else about our business? Is he an influencer?
  • FEEL; What are his main frustrations? What is he worrying about? What kind of risks is he facing? What does he want to achieve?

 

Empathy maps can be used in the beginning of the design process while understanding the users, and also during the prototype-validation phase when we observe the users, while they are using the designed service.

 Empathy maps provide a guidance on identifying how a user thinks, the impresion on the service and how they behave.

How to create an Empathy Map?

The exercise can be either very simple or very complex depending on how you want to do it. Here are some steps you should follow to create it:

1. Segment:
The first step is to be sure who your customers are, like your “Buyer Persona”, and then you must group them by common attributes (demographic, lifestyle, psychological, etc.) until you get some segments. It is recommended not to create more than 3, since the strategy would diversify too much.

2. Humanize:
Once you have the segments created, you will have to “bring them to life” a person from each segment. To do this, you will create a profile prototype with your own name, a photograph and your information. Giving concrete personality to what was once a segment of the population will be useful to create a mental image and focus on who you have to address.

3. Empathize:
This is the key stage in which we really build the empathy map answering questions about 4 concepts: FEEL, SEE, HEAR, SAY.

4. Validate:
The map is not a static element, but must be validated and revalidated as many times as possible and necessary. You will have to constantly test and analyze the hypotheses you have built to see if they are true or not, and include new discoveries or eliminate errors.

Blog12

Implementation in 3 steps:

  • On a blackboard or mural, start by drawing your Buyer Persona in the center or including your photograph and write your identifying information (age, work, education, etc.).
  • Create a square and divide it into four quadrants (FEEL, SEE, HEAR, SAY) and create below two others for Pains and Gains.
  • Fill each space with post-it or notes with the information of the user that you have been extracting.

Download the template here.

 

Finally, as UX professionals it is our job to advocate on behalf of the user. In order to do it, not only must we deeply understand our users, but we must also help our colleagues understand them and prioritize their needs. Empathy maps, widely used throughout agile and design communities, are a powerful, fundamental tool for accomplishing both.

 


Let’s allow our imagination fly the boat🚣‍!

What is the story with jQuery?

It is that time again!

The most famous dollar sign.

If we are talking about becoming professionals in the web design sector, one topic that we should master is jQuery.

1111

What is jQuery?

jQuery is a JavaScript library that simplifies the way you develop web applications. Those applications need less time and less code than applications made with pure JavaScript.

jQuery was created by John Resig in 2006. 

That is the reason why jQuery is very popular and has been used in lots of web pages to simplify the work.

In other words, we can achieve the same results in less time, without the need to program a long code.

If less code is written, errors will be less frequent, and because of this, the library became very popular since its appearance in 2006.

What can we do with jQuery?

jQuery allows us to add complex effects and functions to our website;

  • Manipulate elements of the DOM (texts, images, links, etc.)
  • Change and improve CSS design. 
  • Make Ajax requests using simple instructions.
  • Easy-to-use API* that works across a multitude of browsers.
  • Add some character to the website using animations.
  • Effects and more.

 

With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. All of this through a very concise and simple code.

*I will explain what API is in one of the next posts.

How and why did jQuery appear?

Some years ago, if you wanted to give some style to the text in your website you had to write loads of tags and attributes. That was a nightmare for developers, if they wanted to make any small change on their websites they had to go one by one through each of their pages.

questionmar2k

The reason why CSS appeard in 1994.

To allow developers and designers to manage website style from just one place.

So, interaction with HTML documents becomes a bit easier.

Something similar happened with JavaScript an Objectoriented programming that was used to improve the user experience.

It was created in 1995 and it was quickly implemented in browsers. The problem was that nobody created standards so the implementation of JS in each browser was not exactly the same.

That brought a lot of problems because the code written for a navigator did not work correctly in different browser. Also, JS and HTML was written together, so again HTML was big and saturated.

So, around the year 2000 jQuery and some more JS libraries appeared to solve the big issue.

jQuery had the necessary logic to identify the browser and the JavaScript version. This way you could write jQuery code that worked on many different platforms. This ability to write code in different browsers helped jQuery gain popularity.

Already, in 2014 more than 70% of the websites in the world were made with jQuery.

How to use jQuery;

jQuery  is a  file with extension .js that contains objects and functions written in JavaScript. So you have loads of functions that you can use in your projects.

To use it you just have to download the library from the official page and add it to your HTML document.

jquery2

Once jQuery is downloaded, you have to add it to your HTML document like any other JavaScript file, using the tag. Also, you can include jQuery from a CDN, like Google.

The jQuery library is a single JavaScript file, and you reference it with the HTML tag (notice that the tag should be inside the section):
 src=”jquery-3.3.1.min.js”>
</head>

Remember to save it in the same folder as the HTML document. And now you can use jQuery on your page!

 


LET’S ALLOW OUR IMAGINATION FLY THE BOAT🚣‍!

References:
https://goo.gl/tDCWVq
https://goo.gl/y18dXw
https://goo.gl/oXSLfi
https://goo.gl/7ndJKg
https://goo.gl/qK4AR7
https://goo.gl/dMa63w

 

Understanding UI/UX design challenges.

You are not the only one confused about the difference between UX and UI.

UIusUX

What’s the difference between user interface and user experience?

The User Experience Design (UX) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction.

UX is not only what Internet users do on our websites, but also what they feel and think when browsing it. Taking into account also if they are visiting our website from a computer, smartphone or other devices.

In the same way, the UX also takes place in the apps. Why does a user choose an application over others that have the same functionality? What leads you to make this decision?

Design is more than the aesthetic, it is also usability.

If we started only with the usability of the interface (UI), it would not make sense for a user to use one more than another application if they all have the same function. It is at this moment when they see the need to create a new concept: the user experience.

From that moment on, “the user experience” has been studied, being able to get to know how the user behaves and how to solve problems or weaknesses that arise in our website or app.

“The user experience” is mainly focused on their thoughts and emotions. In addition, it does not take into account only their behavior during navigation or use, but also what they think or feel before and after the interaction.

brainPhoto from: https://goo.gl/WwBEX7

The User Interface Design (UI) is the design of user interfaces for machines and  software, such as computers, mobile devices, and other electronic devices, with the focus on maximising usability and the user experience.

This interface is how the user will interact with the tool, hence its design is so important. Auditory, visual and even tactile elements are part of this user interface. These elements must also be taken into account when designing and then analysing the UI.

The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals.

The user experience is involved in the workflows in one way or another. The creation of user scenarios is an important part of the process that is worked from the UX.

A bad UI design will make the users feel the website is complicated and difficult to operate.

Expert professionals in the user experience should consider as many scenarios as possible from the web or app. We must predict what the user will do, how they will act during their navigation or use and have an answer for each of their actions.

If you want to go one step further, in our post ‘Your website is not for you, it is for your customers. What is the user experience. ‘ you will find the most practical part of the UX.

How to make Great UI

To deliver impressive UI, remember – users are humans, with needs such as comfort and low cognitive loads. Follow these guidelines:

  • Create buttons and other common elements that perform predictably.
  • Keep high discoverability. Clear icons and include well-indicated affordances.
  • Keep interfaces simple. Every element must serve a purpose.
  • Respect the user’s eye and attention regarding layout; focus on hierarchy and readability:
    • Alignment; think justified text.
    • Draw attention to key features using:
      • Colour, brightness and contrast. (Avoid visual overcrowding)
      • Text via font sizes, bold type and weighting. Also, distance between letters.
  • Guide users by indicating preferred actions.
  • Reduce the use of fill-forms.
  • Use reusable design patterns to guide behavior in navigation and search functions.

 

In other of my posts you can find more about UX and what kind of steps you must follow before start your design. “Empathy Maps”

Here you have an speech of Margaret Gould Stewart in 2014 who was working for YouTube. “As a dedigner you have to understand who you are designing for”.

Enjoy it!!


Let’s allow our imagination fly the boat!🚣

References:
https://goo.gl/xicq47
https://goo.gl/caLSM1
https://goo.gl/XV82XB
https://goo.gl/gx6jV3