Núria Saban de Llos& a Eina

Núria Saban webdeveloper from Llos&

Núria Saban visited us the 28th of May. Ex-student of Eina, “Web developer, Frontendpadawan, html, css, js”, as she defines herself at his web. she explained us his steps until attaining what she had dreamed: being member at Llos&. At the end her studies, she entered an architecture studio during five years, working on modelling. After, she spend two years freelance for several customers, like the Mies van der Rohe Foundation in Barcelona. Tired of little multitasking, she decided to launch to the programming and the world wide web. That was what she liked more and this is how she entered at Llos&.

Her talk begins with the troubles that arise with graphic designers. She tells us a list of the basic aspects a designer would have to detail from his work to programmers could start correctly without generating a lot of changes after. For the development of a website, the format thr ptoject arrives to the programmer is very important.

She shows us the advantages of the Sketch app for her work. Also she comments that designers never think about the different measures of screen for each device (the media queries, the height and width of screens, very different in each device). “If you know what you can have with media queries and start to play with, you’ll have a very cool website”, says Núria. She explains also that she designs according to the criterion “mobile first”, that is to say, the design is based on the version for mobile. From this point, media queries has to append meanwhile the width of the screen grows.

She explains us that accessibility is very important, no only for those who need it, but for everybody: navigating the web would be much more comfortable for all. She also talks us about typography and she advises that we cannot use typography less of 16 px on a website. If we, it has to be for very secondary things. Also she comments another thing that designers never take into account: there is a lot of units of measure on the web to define the size of the typography: ems, rems, pixels, and point view-port (% of the screen). This one enables typography grow concurrently with the screen width in a much more fluid way. So the design will be much finer.

She reviews mistakes that we have to eschew when designing a web. She talks about contrast, when the links cannot be distinguished, gives us tools to check if our web would pass a test of contrast, like: https://colorable.jxnblk.com. She insists that the outline focus, although we would’t like it, is very important to not be deleted: the navigation with tab or screen readers must be available always. If not, it will be a navigation problem for persons that need these systems. This page explains its importance: http://www.outlinenone.com

Before ending, she talks of colour on the web. she recommends a page: https://www.colorhexa.com. She comments also the interactions and his sense: when a button is active, deactivated, what about the hover function, and she complaints that many of these are never defined by the designer.

We have now a few lessons to learn and take into account to carry out a website design and which are the needs for a programmer

SEO (Searching Engine Optimization)

Today, we finished the module called SEO  (Search Engine Optimization) with Rubén Alcaraz. Throughout the module, we learned how to improve the positioning of a web page on the search engine results pages. In addition, we learned the importance of elaborating a good SEO, where these techniques can be applied, how search engines work. Moreover, we learned the structure and architecture of SEO in order to understand better and improve our web positioning. Finally, we also tackled the different strategies that we can use and also understand how users search us in order to choose the right keywords in order to be competitive.

Furthermore, in order to implement all the theoretical knowledge received, we realized a practical exercise. The latter consisted in trying to position an image on Google from the website we created before for the module  Content Management System.

In order to do this exercise, we have used a WordPress plugin called Yoast, which has to guide us in order to position our image on Google. During the exercise, we have learned the importance of the SEO-on page, and how to make a good optimization of our page. We learned the SEO-off page as well with the aim to increase the authority of our site through internal and external links.

 

As a final exercise, we learned how to audit a web page, analyzing its content, the density of keywords, how are the information of its architecture, its technical aspects, and efficiency. As a result,  we have been able to analyze and detect the weaknesses and points of improvement of the abovementioned website.

Analysis and Management of Digital Publications

We have already finished the course of Analysis and Management of Digital Publications taught by Professor Diego Fernández. In it we have made an infographics that has allowed us to learn about the architecture of the information in charge of the study, analysis, organization, disposition and structuring of the information. We have also been able to work on information design, in which we have had to graphically represent the information and structure it efficiently and effectively so that it could be very visual and quickly understood.

The results have been very diverse. They have worked on reports related to the rise of cybercrime or piracy, a comparative of online media sales in black friday, about fake news, the use of apps to find a partner, even wondered if print is dying.

User Centered Design

In this course taught by Professor Enric Mor, we have learned to have a global vision of all aspects involved in user-centred design (UCD). This can be conceived as “the discipline of person-computer interaction (IPO), usability and user experience”. Through different activities, both theoretical and practical, we have been discovering which processes are key in the UCD. We have placed emphasis on the value of knowing the users to whom our product will be destined, the stages and techniques that configure it, knowing how to apply the DCU in the definition of our projects, how to make a correct analysis of what we want to design, and finally how to implement and evaluate interactive digital products. In our case, the redisseny of a website.

The Ideal Wallet

This activity was the letter of introduction of the subject. Through a practical exercise of design thinking by couples, we designed a wallet from a small briefing that we did to our partner. In this way we stressed the importance of knowing the user for whom our product is intended. Therefore to be able to design to measure and look for real solutions in the problems posed by the user.

Lost & Found

During this activity carried out by groups, we learned to use flowcharts for the design of an app. The objective of this practice was to work collectively on the most logical path to report, search, or find a lost pet.

Spaghetti Marshmallow Challange

This activity was the last  we did. Its purpose was to work the design thinking to practice the prototing in collective being able to test what we build through trial and error in a collective way. The goal of this activity was to create a structure that could withstand with 20 raw spaghetti, 1 meter of tape, 1 meter of string and a Marshmellow at the top. Quite a challenge!

 

portfolio-gaizka

Design for CMS Content Managers

Throughout the subject of Design for CMS Content Managers with Daniel Julià we have learned about web layout using HTML and CSS as well as PHP working with WordPress. Finally, we practised such knowledge by designing and programming our portfolios.

You will find some of the results in this next compilation:

 

Gemma Fontanals

Daniel Iglesias

 

Emily Eldridge

Gaizka Pagonabarraga

Andrea Rueda

Laura Magallón

Carolina Orozco

programacio-portada

Introduction to programming

Throughout the subject Introduction to programming, taught by Jordi and Oriol Collell, we have learned both the basic notions and the more complex ones of the digital era that have allowed us to develop our skills in web programming as designers.

These are some of the final works we created based in different SVG animations. They are built with HTML, CSS and Javascript from libraries like Green Sock, using most cases TweenMax.

after-effects

Digital Video and Animation

During the sessions of Digital Video and Animation we have learned and worked with Diego Fernández the techniques and methods of audiovisual creation for the media environment: from basic video characteristics, 2D digital animations, an introduction to 3D, as well as to the audio processing throughout the edition with After Effects.

These are some of the final projects of the subject:

 

 

King workshop

Gabriela Lazbal and Concept Art

Last Tuesday 15th of May we had the visit of Gabriela Lazbal on the subject of Rich Media Projects. Lazbal works at King, a leading interactive entertainment company for the mobile world, known worldwide for its gem game Candy Crush. After being six years in the team, she is nowadays working as a Senior Artist and as a Lead Artist supervising all the follow-up of the Bubble Witch 3

Gabriela was born in Argentina, where she studied, but she has been living in Spain for nearly 20 years, having worked in Madrid, Zaragoza and Barcelona so far. From the beginning, she explains that her trajectory is quite multidisciplinary, always guided by her artistic vein.

Since she was thirteen, she knew that wanted to study the Fine Arts degree. However, as she is a curious mind, she discovered other disciplines along the way, such as film and television production and also analogue and 3D animation. Besides, before establishing in King and parallelly to her studies, she had dedicated plenty of her time being a teacher and working independently as a freelance.

King workshop

During the session, Lazbal explains in detail the process of making video games. In the case of the Swedish company, they follow a work methodology based on the SCRUM model, which avoids hierarchies, enhancing proactivity and coordination among its members. She highlights that the success of their projects it is based on the communicative routine they persistently build.

“The most positive thing that SCRUM has is the retrospective. In this sessions, we discuss what has gone well or badly both professionally and personally, to avoid carrying problems or accumulate misunderstandings. Is the moment we establish honest relationships through conversation.”

Lazbal tells us that brainstormings are composed of different types of work profiles like artists, game designers, producers and data scientists. Also, developers and testers use to join the team when all of them start the prototyping stage. The idea is that they don’t see each other only once for the initial brainstorming, but they meet regularly being everyone involved in every decision even if is ideating, analysing or sharing the results of tests along the evolution of the product.

“Discussing ideas together makes simply enrich them, that’s why teamwork is so important.”

Lazbal defines their process as progressive and introduces us the concept of sprints. This methodology consists of stipulating a group of tasks and schedules them in weeks or months. Then, all the team have to work together to reach the deadline. The purpose of this system is to be able to test the product as soon as possible. Although both creative and production stages use to grow simultaneously, the concept always goes first. For this reason, Lazbal remarks how much necessary is to define the drawings a lot, going through many steps if needed, to achieve a definitive version that will be used as a reference when creating the 3D images.

King workshop

During the talk, other aspects appeared associated with the design. On the one hand, it was interesting to realise the value of the typographic treatment and the UX / UI method. In the end, they contribute to define the style of the world’s game and satisfy the user expectations. On the other, Lazbal gave us advice on how to deal with the real world. Through anecdotes, she told us how to prepare a job interview, tips for the portfolio and the importance of being proactive but receptive at the same time, maintaining a flexible attitude and an open-mind ready for receiving the feedback that benefits us so much.

Sketching

User-Centered Design

Throughout the subject of Analysis and Management of Digital Publications with Enric Mor, we discovered the DCU (User-Centered Design) and the stages that configure its iterative process. It is necessary to apply it in each interactive product because it helps to improve the usability and accessibility of the user experience.

We learned about UX/UI redesigning the official webpage of a real client. To do it, we complete all phases of the project. We started with its definition and research. Then we analysed the architecture of information and developed the sketches. After that, we continued designing the wireframes and prototyping the result. And finally, we did the evaluation. Also, we alternated the theoretical content given by the teacher with dynamics developed in class.

The Wallet Project

The first activity was an introduction to Design Thinking. In pairs, we had to create a personal briefing. In one hour, we understood the essential thing that is to know about the needs of the person who’s going to use the product or will take benefit from the service, in that case, a wallet or purse. To achieve this, we had to interview each other, leaving aside our preferences as designers and proposing real solutions that could satisfy each case.

User Journey

The design of any online platform or application must contemplate user journeys. It means that is important to define previously which type of activity is, its contexts of use and the emotions experienced by users to detect such failures that we understand now as opportunities for improvement. On this occasion, we defined profiles and routes of people who would use an app to listen to music.

MDG EINA CDU 2018

Pet Lost & Found

In this activity, we used flowcharts to design the navigation of an app whose functionality consisted of a search and encounter system for lost pets.

Spaghetti Marshmallow Challange

Towards the end of the subject, we carried out this activity that consisted of, by groups of 3-4 people and in 18 minutes, constructing a structure that would stand on its own with the following elements:

  • 20 Raw spaghetti
  • Tape measure
  • Meter of string
  • Marshmallow
  • Scissors

And something else, the marshmallow must be located at the top. The initiative is raised from Harvard by Tom Wujec who took us to the curious observation on the success (or failure) of working as a team, especially among design students.

From the beginning, we talked about iterative design, a cyclical methodology of multi-stage problem-solving, always based on validating assumptions on the user behaviour in real-world tests. Prototypes and analysis of a product or service are made continuously to achieve a more and more recent perfected version.

Infographic

Analysis and Management of Digital Publications

In the subject of Analysis and Management of Digital Publications, we have developed infographics of topics related to the Internet and technologies. In the last session with Diego Fernández, we showed our results in class to share and discuss them all together.

Every project was diverse at both formal and content level. Themes were very broad: from the existence of cookies, the world of emojis, the success of online dating, the streaming music, the usage and abuse of smartphones or Instagram and the curious case of #foodporn.