I\u2019m a designer who started with industrial design and then transitioned to digital product design.
I have a passion for creating products that are functional, simple, and powerful, and that can be improved by investigation and testing. I have worked on a lot of interesting projects, and I love to accuire new skills and tools to enhance my design work.
"},{"location":"about/#my-background","title":"My Background","text":"Ever since I was a kid, I was fascinated by architecture and design. I wanted to be an architect and create beautiful and functional buildings. However, I ended up studying industrial design instead. I was very lucky to find a captivating career that was interesting and creative, two things that have always been very important to me.
After finishing my design career, I joined a scholarship at a local institution that opened a world of opportunities for design for me. I got to work on different types of projects, from paper flyers to complicated web design projects. I was able to try on a lot of different challenges and some of them are still used to this very day.
Later on, in my Master's Degree, I discovered responsive web design, UX, UI, and HCI design fields, and I fell in love with the ability to make products that are never actually finished, nor done, but can be only improved by investigation and testing. I love that part of digital product design, and I decided to pursue it as my main focus.
I truly believe that nothing is impossible.
"},{"location":"about/#design-philosophy-and-style","title":"Design Philosophy and Style","text":"My design philosophy is based on the idea that design should be fun, functional, and user-centric. I believe that design should solve problems, enhance experiences, and create value for both the users and the clients. I also believe that design should be simple, but not simplistic, and that every element should have a purpose and a meaning.
My design style is influenced by my industrial design background, where I learned to appreciate the beauty and elegance of minimalism, geometry, and contrast. I also like to experiment with vivid and saturated colors, and to add some originality and personality to my work. I admire designers who can combine functionality, simplicity, and power in their work, such as Dieter Rams, Jony Ive, and Paula Scher.
"},{"location":"about/#fun-stuff","title":"Fun stuff","text":"My geeky nature and stubborness enhance my problem-solving skills, bringing a unique perspective and insatiable curiosity to each project. This drive to explore and invent enables me to address software and interface challenges and play with different solutions, until I find the most suitable one for the situation.
"},{"location":"about/#hobbies-and-interests","title":"Hobbies and Interests","text":"As a designer, I have some goals and dreams that I want to achieve and pursue. Some of them are:
Feel free to reach out and discuss your design needs or simply to talk about the latest tech trends.
I\u2019m always up for an exciting conversation and the opportunity to explore new frontiers of problem-solving.
Let\u2019s make magic happen!
Contact
"},{"location":"about/#career-timeline","title":"Career timeline","text":""},{"location":"blog/","title":"Blog","text":""},{"location":"blog/2024/04/design-system-inputs/","title":"Bridging the Gap: Design in Figma with HTML Input Types in Mind","text":"In software development, when we want to collect information from users, we often use forms with labeled text fields. While these fields might seem a bit robotic to us humans, they're crucial for allowing communication between people and software. This communication helps systems create personalized experiences and recommendations within their digital interfaces.
View Figma Community File
"},{"location":"blog/2024/04/design-system-inputs/#design-and-development","title":"Design and Development","text":"Designers and developers often face challenges in communication, leading to the creation of similar outputs. However, there's typically a lack of coordination between them. Designers design with humans in mind, naming their components' properties accordingly, which is great for keeping the focus on the user experience. On the other hand, developers operate in a more machine-centric environment. While this approach is beneficial in maintaining a human-centric design and a machine-centric development process, I believe that aligning certain aspects with similar names could greatly benefit both sides.
The journey from design concept to functional implementation is usually a bumpy ride. We, designers, craft visually appealing interfaces, developers have to translate these designs into tangible elements with specific characteristics defined in HTML. The challenge lies in ensuring that both parties speak the same language, minimizing misunderstandings and streamlining the development process.
"},{"location":"blog/2024/04/design-system-inputs/#html-inputs","title":"HTML Inputs","text":"Here are 12 different input types that are most likely to be used in any website or digital product.
If you still need to check if there are even more types, you can go and explore the complete list on MDN web docs. Almost all inputs have some common attributes that we are going to be addressing and we will see how we can set our Figma components for success.
"},{"location":"blog/2024/04/design-system-inputs/#desired-anatomy","title":"Desired Anatomy","text":"It's often the most basic form element used for accepting single-line text input from users. By starting here, we can establish foundational design principles that can be applied to more complex input types.
"},{"location":"blog/2024/04/design-system-inputs/#html-structure","title":"HTML structure","text":"<label for=\"name\" class=\"inputLabel\">Label</label> \n\n<input type=\"text\" id=\"name\" name=\"name\" class=\"inputTypeText\" required/>\n\n<span class=\"inputCaption\">Additional instructions</span>\nWhen we talk about the structure of HTML elements, it's crucial to understand the relationship between labels and input fields. The \"for\" attribute in a label should always match the \"id\" attribute of the corresponding input field. Why? Because this association is what makes forms accessible and user-friendly. When they're correctly linked, users can click on the label itself to activate or focus on the input field, making navigation smoother and more intuitive. It's a small detail, but it significantly enhances the overall usability of web forms.
"},{"location":"blog/2024/04/design-system-inputs/#css-styling","title":"CSS styling","text":".exampleForm {\n flex-direction: column; \n justify-content: flex-start; \n align-items: flex-start; \n gap: 0.75rem; /*12px*/\n display: inline-flex;\n}\n.textInput{\n flex-direction: column; \n justify-content: flex-start; \n align-items: flex-start; \n gap: 0.125rem; /*2px*/\n display: inline-flex;\n}\n .inputLabel {\n font-size: 0.75rem; /*12px*/\n }\n .required:after{\n content: \" *\";\n }\n .inputTypeText {\n font-size: 1rem;\n height: 2rem;\n border: 1px solid var(--tags);\n border-radius: 0.25rem; /*4px*/\n padding-inline: 0.75rem; /*12px*/\n }\n .inputCaption{\n font-size: 0.75rem; /*12px*/\n color: var(--input-caption);\n }\n.textInput .inputTypeText:focus{\n outline: 1px solid var(--primary);\n outline-offset: 0.125rem;\n}\n.textInput .inputTypeText:enabled:hover {\n border-color: var(--input-caption);\n background: var(--primary-light-008);\n}\n.textInput .inputTypeText:enabled.error{\n border-color: var(--error);\n color: var(--md-typeset-color);\n}\n*:disabled, .disabled {\n color: var(--disabled);\n opacity: 1;\n cursor: not-allowed;\n}\n*.error {\n color: var(--error);\n opacity: 1;\n}\n.inputSubmit {\n border-radius: var(--spacing-1);\n border: 0.1rem solid transparent;\n background-color: var(--md-typeset-color);\n color: var(--md-typeset-color-inverted); \n padding: var(--spacing-1) var(--spacing-4);\n margin-top: var(--spacing-2);\n margin-right: var(--spacing-2); \n font-size: 1rem;\n}\n.inputSubmit:hover {\n background-color: var(--primary);\n color: var(--md-typeset-color-inverted);\n border: 0.1rem solid var(--primary);\n}\nAnd here is the result of the HTML and CSS combined, following the Figma design:
Label Additional instructions Label Additional instructions Label Additional instructionsWhat we need to have in mind when designing:
<input type=\"text\">disabled, pattern, placeholder, readonly, required, size:hover, :focus, and :active
These classes play a significant role in enhancing the user experience by providing visual feedback for different states of interaction. By defining them consistently across components, we ensure a cohesive and intuitive interface.
The order of these pseudo classes is very important and we should always define them as follows 1:
The question is where and how can we link these properties to the Figma panel? Some of the component properties will refer to HTML attributes and others will be referring to CSS pseudo classes that will determine the final look of the components. Let's figure it out together...
"},{"location":"blog/2024/04/design-system-inputs/#figma-component-properties","title":"Figma component properties","text":"Connecting component properties in the Figma panel to those corresponding to HTML attributes (such as \"Disabled,\" \"Required\") and associated with CSS pseudo-classes (like \"Hover,\" \"Focus\") might not seem essential at first glance. However, when you're designing something meant to be both human-readable and developer-friendly, it's crucial. Avoiding the need for extensive explanations by ensuring clarity in design components fosters smoother communication between designers and developers. This connection enables them to effortlessly discuss and understand component behavior directly within the design tool, facilitating collaboration and streamlining the design and development process.
Bits of code - Articles on frontend engineering and more When do the :hover, :focus, and :active pseudo-classes apply? \u21a9
WordPress has been my go-to platform for a portfolio since the beginning of time. However, I wanted to showcase my skills in HTML and CSS in a clear and straightforward manner. A couple of months ago, I made the decision to go static and build my own portfolio from the ground up, creating something I can be proud of. Here it is.
"},{"location":"blog/2023/12/going-static-design-portfolio/#choosing-a-platform","title":"Choosing a Platform","text":"There are numerous platforms available for building static websites. Some offer excellent documentation, providing step-by-step guidance for creating your desired outcome. Others, while powerful, lack comprehensive documentation, making the setup process challenging. Personally, if the setup is slow and tedious, it dampens my enthusiasm for content creation. Here are the platforms I tried:
When I sit down to write text in front of any text editor (Google Doc, Word, Confluence page), I usually start by defining the structure. In this website, I just need to think about the elements of text that I am going to include so that the navigation is accurate, there is a natural text flow, and the titles of each section lead to the next.
I have decided to write and publish content on this website, and until now, it has felt like home.
I hope I will have fun with this one.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/","title":"How to keep up with large prototypes in Adobe Xd","text":""},{"location":"blog/2019/11/large-prototypes-adobe-xd/#updates-from-adobemax-2019","title":"Updates from AdobeMAX 2019","text":"This November Adobe Xd provided a huge update during the annual conference Adobe MAX. It came with a lot of cool stuff, such as components states, real time collaboration, and more. I\u2019ve been using this software for a little less than a year and I have to say, it has changed a lot in the last few months. They have developed a lot of functionalities, keep it up Adobe. Although, it had this major update a lot is still missing, I am sure it will come soon.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#prototype-that-is-constantly-growing","title":"Prototype that is constantly growing","text":"At work, our team is deeveloping a complicated platform, it includes more than a hundred screens and interactions between them. We used to have it all in only one file because it\u2019s what you would expect. As the number of artboards and interactions grew, we needed to do something about it because the software was getting slow. This is how the first file separation in major sections happened. And here is the feature I am missing \u2013 External Links to link our other files and simulate navigation through the whole platform.
Then, we realised that working in agile and continuous development cannot go on overwriting the prototype as we go. It provokes conflict with stakeholders and the development team. We needed to close a prototype version with the same pace as our releases. Each one of those files needed to be available for search, allowing us to consult changes and when were they applied. This is exactly how it gets a little bit tricky. We could have the files in Creative Cloud but uploading and updating those big files also got slow.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#version-control","title":"Version control","text":"Another downside was that nobody has the version control over the files and things appear and disappear without leaving a trace. We decided we should go old school, using git, and putting a message with each commit. The most important thing when you develop a modern app is that you are not limited to only one type of 12 grids. (BOOOM!). You can have different grids throughout your design and they don\u2019t need to match (mind blowing, I know). These grids do not come specified in the shared for development prototype, yet. The solution, developers download the files and consult the grids that are used in each section.
This is still a workaround and seems complicated at first, so I hope it changes and adapts better to continuous development.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#some-unexpected-changes","title":"Some unexpected changes","text":"When the new update was released this November, the first day I was puzzled: \u201cOhhh\u2026? Ahhh\u2026? Where is my Share button?\u201d It moved from the top right corner to the top left one, so it took me some time to adapt. It looks like a small change, but it is about a functionality you are using everyday and let\u2019s face it, the first couple of days it\u2019s tough.
I am usually excited about the new stuff, so this was no different. One of the coolest things they presented was Components states \u2013 simulation of buttons states \u2013 normal, on hover, pressed, expanded, those are the basic ones. This also meant that we needed to remake a lot of stuff. Obviously we had already made navigation menus, checkboxes, radio buttons, search areas, etc\u2026 the old way. But this new thing meant that we could reduce the number of Artboards and actually present more realistic results. So we got on to it.
Now, we have our main platform separated by main sections with its primary, secondary and tertiary buttons, checkboxes, toggles and radio buttons all clickable from the prototype: \u201cYey!\u201d I must say they are all shared and it looks very cool, but I would really like to be able to have the whole prototype in the same file. I don\u2019t know what number is the limit for artboards, but I know we have outgrown it very fast.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#website-prototype","title":"Website prototype","text":"We needed to prepare a website prototype for a client applying all the different capabilities we have developed so far. Taking into account each one of the included functionalities, each layout change, everything. Here we are developing this prototype for approval and it is getting cra-aa-zy again.
We are already 36 artboard designs in. It includes six different resolutions, light and dark modes, and of course, designs for different sections which multiplies by six resolutions and it grows and grows. We try to maintain everything nice and organized, but with this many considerations, it is insane.
I remember my first website prototype back in 2009, it had 5 main pages, no CMS behind and only one resolution and only one mode. We did designs for a homepage and three or four main pages, including special services and featured elements. In total, it was like 5 screens and we were good to go.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#conclusions","title":"Conclusions","text":"Here we are now, it\u2019s so overwhelming. Sure the tools and computers have become a lot better, it\u2019s faster than ever to develop something cool, but come on?!
The most frustrating thing of all this is that all I mentioned above is necessary, so everybody stays on the same page of what\u2019s being developed. It is great for your client, to see what you are actually talking about. Also for the development team to know exactly what everybody is expecting with little amount of extra information. And here we are, keeping it all connected and trying to develop the next best product.
A lot of artboards, powerful tools and a lot to keep track of, when somebody asks for changes. I will keep applying all the new stuff as I always do, because it is important to stay up to date. It makes our lives better.
Keep it up and rock on!.
"},{"location":"blog/2019/10/112-hours-remote-work/","title":"My first 112 hours of Remote work","text":"I started a new job around seven months ago with everything that comes with it.
New people, new habits, new executives and the most exciting part of all, my new title is User Experience Designer. I have been longing to get to it and I finally did.
There were a couple of things I had to get used to at my new position. The first and very important, integrate in a development team that has not had a designer for a very long time. I had to learn a lot about the project we are developing, who is doing what, who to talk to when I have a specific question, etc\u2026
When people go to work in an office, there usually is no habit of documenting everything, every decision that was taken, reasons why, etc \u2026 and this place was no different. There was some documentation, but it was definitely not enough for me to understand it all.
I decided to stay patient (everybody that knows me, knows that this is the hardest part), but eventually, I got used to the process, morning stand ups, retrospectives, sprint planifications and everything else. Although, this was all new for me, from the experience I previously had, I felt like in my own waters there.
A couple of months later when I felt that I knew my way around and got a little more confident in my new position, I made the first request for Work From Home in the company\u2019s calendar. I got almost an immediate response: \u201cOK\u201d. I said: \u201cWait a minute, is that all that it takes? I will definitely do it again.\u201d After that he day came and I took my laptop, connected my home screen to it and started working from my home desk.
Well, I don\u2019t really remember what I did that day, but I remember the feeling of a dream just getting a big fat green checkmark.
You see, around four years ago, I was working on a project of developing a base theme for twelve different websites, using a local server for development and another one for production. The themes had the same base structure, but had some differences, so all of this had to be managed, developed and maintained and I had the best document ever to guide me how to do it. Everything that was changed manually and to watch for when updates were coming and so on. I got a little carried away here, but my point is, around this time, I started thinking that something basic is wrong there and after a little while I came to the conclusion that what I was actually doing was crossing half an island (60km back and forth) to go to the office and connect to a server, maintain myself busy and then get on a car again, and head home. Around that time, I had a little boy, he was a little over 2 years old, and it was very interesting seeing him discovering simple things. So, I made a simple count and the two hours I am spending on the road everyday are taking ten hours per week from me seeing this little boy growing.
Well, nothing is that simple, but the fact is, there is no sense of me being present in an office, if I am going to be much happier staying a couple of days a week and work from home. It saves energy in the morning, saves gasoline and, frankly, two hours of my day. It made me look for opportunities, but again around 2015, there were some remote companies, but nothing like what we have nowadays. There a couple of sites where you can go to, register and start experiencing on your own, see if you actually like it. There was nothing there when I started thinking about it. There were some lucky people posting how cool it is to work remotely and don\u2019t depend on a physical environment. I don\u2019t remember exactly when, but sure enough, Automattic closed their office and it got a lot of press around the world, I remember thinking to myself that day: \u201cjust how lucky these people are!\u201d. I went on doing my job, crossing the island and waiting for something new and interesting to appear. Well, it\u2019s been some time, but it is actually happening now.
Remote work is way more attractive for me and I hope more companies will realise that and help their people stay happier and more productive, enjoying the work and their lives.
I am very grateful for my current position, where I can ask for a remote day and just get it. It comes very helpful when my son has a cold and need to stay around to give him medicine. Although, he is not so little now, I still enjoy his presence a lot and I am very happy to have him around while I am actually at work, resolving my everyday jira tasks.
"},{"location":"blog/2019/11/podcasts-i-listen/","title":"Podcasts to listen","text":"This year has definitely been discovering podcasts for me.
"},{"location":"blog/2019/11/podcasts-i-listen/#in-english","title":"In English","text":"Well, since there has always been more content in English than any other language over the internet. It is normal that this list has more examples.
"},{"location":"blog/2019/11/podcasts-i-listen/#scriptnotes","title":"Scriptnotes","text":"Lately, I find myslef listening to mainly four podcasts. One of them is Scriptnotes it is a podcast for screenwriters and things that are intersting to screenwriters. Well, I am not a writer, not even close to being one, but I do enjoy when John August and Craig Maizin speak their truth about very diverse topics. I also think that going out of my industry is actually beneficial to keep an open mind.
"},{"location":"blog/2019/11/podcasts-i-listen/#getting-things-done","title":"Getting things done","text":"At work and in my personal life, I have been struggling with task organization and keeping things planned and thought out. Then, one day I found a podcast by a very famous author right on topic \u2013 Getting things done (of course). It has served me well to start applying concepts from David Allen\u2019s book and to understand better problems that come with the lack of organization. I hope, I am getting better at it, but it will take time to master.
"},{"location":"blog/2019/11/podcasts-i-listen/#distributed","title":"Distributed","text":"Another topic that is very dear to me is working remotely, or in distance or in distributed environments, whatever term you like. There is one podcast about things that happen to people that are working far away from one another and do not have an office. It is called Distributed by Matt Mullenweg. Since Automattic is 100% distributed, they have been dealing with those issues for a very long time. I find it important to listen to people that actually have the experience.
"},{"location":"blog/2019/11/podcasts-i-listen/#tracks-to-relax","title":"Tracks to Relax","text":"I tend to have troubles with sleeping. Sometimes, I wake up in the middle of the night and going back to sleep is very difficult. Another search result brought me to Tracks to relax. Since the first episode of sleeping meditation I listened, the meditations have worked like a charm every single night.
"},{"location":"blog/2019/11/podcasts-i-listen/#in-spanish","title":"In Spanish","text":""},{"location":"blog/2019/11/podcasts-i-listen/#entiende-tu-mente","title":"Entiende tu mente","text":"One of my favourite podcasts in the whole world is \u201cEntiende tu mente\u201d (Understand your mind). It\u2019s been a long time since the first episode I listened, and I have never stopped. In this podcast, there are three main figures, one coach \u2013 Monica Gonzales, one psychotherapist \u2013 Luis Mui\u00f1o and a former radio spokesmam \u2013 Molo Cebrian. The trio talks about mental difficulties and how to deal with different situations. I love it, because no matter how I am feeling the day I listen to an episode, my mood changes in just 20 minutes.
I discovered it one day when I was feeling particularly down and started searching for information in the internet. I stumbled upon a podcast stating \u201c20 minutes to understand yourself better\u201d. I gave it a try and I actually felt better, so I continued listening. The thing is, no matter what \u201chole\u201d is in front of me, when they talk about serious problems and situations that people deal with, I get that feeling inside: \u201cThank god I am alive and actually fine!\u201d
"},{"location":"blog/2019/11/podcasts-i-listen/#el-arte-de-presentar","title":"El arte de presentar","text":"Another podcast that worths listening to in Spanish is \u201cEl arte de presentar\u201c. Although, it\u2019s been almost a year since the last episode, if you haven\u2019t listened to this podcast you definitely should. They speak about presentations, how to sound confident and provide value to your audience at scale. I am sure there are a lot of people that are doing this kind of thing, but Gonzalo really walks the talk and it\u2019s a pleasure to listen to him and his interviews.
This is my current list of podcasts and reasons I find them interesting. Let me know if you agree or not with it.
"},{"location":"work/brands/cosmo-bots/","title":"Cosmobots","text":""},{"location":"work/brands/hornets-hockey/","title":"Hornets Hockey","text":""},{"location":"work/brands/hornets-hockey/#project-summary","title":"Project Summary","text":"Client
Hornets Hockey Roller Hockey Kids Club
Timeline
17 Jul 2023 (1 day)
Role
Branding Designer
Technology
A friend of mine decided to create a Roller Hockey kids club. She needed a logo and asked for help. Since I had the Midjourney (MJ) subscription, I decided to give it a try. It was a completely new concept for me, leveraging all the efforts to AI and trying to come up with something good enough so it can become the club's brand.
"},{"location":"work/brands/hornets-hockey/#brainstroming-and-concept","title":"Brainstroming and concept","text":"First things first, we kick off with brainstorming. It's crucial to nail down the logo style we're after. My friend already chose a bunch of Hornets hockey logos and shared them with me.
With my MJ subscription in hand, I explored different concepts, taking into consideration the desired identity, spirit, and the essence of hockey. This initial phase laid the foundation for the elements that would later come together in the final logo.
Here is a small sample of the different ideas that came up:
"},{"location":"work/brands/hornets-hockey/#image-generation-with-mj","title":"Image Generation with MJ","text":"After thoughtful consideration, I selected a couple of styles that looked promising and started more detailed-oriented generation. Here are a few examples.
At this point, I could explore different shapes, styles, and colors. This iterative process played a crucial role in shaping the final design.
"},{"location":"work/brands/hornets-hockey/#selecting-the-parts","title":"Selecting the parts","text":"In this process, I found myself drawn to specific elements in different images. Some had a beautiful body shape, while in others, the head of the character was achieved better. In all versions, the hornet wings were just too weird, so I had to create them separately.
Making sure that every aspect of the logo was at the same level of detail, I selected and organized these standout parts. Afterwards, I created a new character using a collage technique in Affinity Designer on iPad, and sent it for approval to my friend.
Once I got the \"OK!\", I could proceed to vectorizing the final shape and defining the branding elements in more detail.
"},{"location":"work/brands/hornets-hockey/#vectorization-and-simplification","title":"Vectorization and simplification","text":"This step is crucial in every branding image creation. It ensures that the final shape is refined and detailed, and most of all, scalable.
One requirement for this particular case, since the beginning, was to make it possible to be embroidered on a patch.
"},{"location":"work/brands/hornets-hockey/#color-palette","title":"Color Palette","text":""},{"location":"work/brands/hornets-hockey/#final-thoughts","title":"Final thoughts","text":"While it might not be the ultimate, flawless logo in the entire universe, the real takeaway here is the process. Thanks to MJ, I was able to speed up the creation process significantly. I was able to define a final image, create a completely unique character from nothing, choose different elements that looked nice to me, and offer a final proposal in just one day. Yes, 24 hours!
I don't know if I am going to do it again; that's for the future to decide. At this point, AI definitely helped find an acceptable solution for the situation, and I am very grateful I could experiment and do it.
"},{"location":"work/content/pecas/","title":"PECA'S Tenerife","text":""},{"location":"work/content/pecas/#project-summary","title":"Project Summary","text":"Client
Calzados PECA\u2019S (local shoe stores chain)
Timeline
Jul-2017 <--> Dec 2018 (1 yr 6 mos)
Role
Achievements
Create and grow the social media following for the brand:
A well-known local brand of shoe stores decided to enter into the online market. Initially, there was a well-established warehouse management system with a connection through the database. The dates for new collection releases were set, and the latest models were chosen in line with seasonal trends.
However, what was lacking was material for creating publications and social media posts. There was no product photography beyond what the brands produced for their social media. Utilizing these materials wouldn't make the shoe store brand recognizable or remarkable. Early on, we decided to create unique material to promote the trendiest products independently from the manufacturers.
Lacking a model for the shoes, I had to get creative and started creating different compositions by type, size, and color to make them appealing and interesting. Surprisingly, it worked out well, and our following began to grow steadily.
After that period, we were able to secure a model for the shoes, and naturally, the quality of our photo shoots improved a lot.
"},{"location":"work/content/pecas/#outside-photoshoots","title":"Outside Photoshoots","text":""},{"location":"work/content/pecas/#my-unique-contribution-to-the-project","title":"My Unique Contribution to the Project","text":"Some of the shoe compositions from our images were reposted by the brands manufacturers and gained significant interest on their social media profiles.
"},{"location":"work/content/pecas/#in-store-photoshoots","title":"In-Store Photoshoots","text":""},{"location":"work/content/pecas/#the-takeaways","title":"The takeaways","text":"I worked at the company's head office, which maintained constant communication with the warehouse and the development team responsible for connecting the physical warehouse platform to the online sales platform. We were all in constant communication, planning, and managing every task meticulously to ensure everything was done at the right moment.
"},{"location":"work/content/pecas/#did-this-work-experience-improve-my-career","title":"Did this work experience improve my career?","text":"Absolutely! I learned how to manage a relatively large database of physical products, create a content calendar, and post engaging content on social media. I witnessed continuous growth in our social following and had direct contact with clients, which was very important to me.
These images represent only a small part of what I accomplished during my time there.
Disclaimer: All the Pictures are property of Calzados PECA\u2019S Tenerife.
"},{"location":"work/digital/kuno/","title":"KUNO","text":"Online Video Platform"},{"location":"work/digital/kuno/#project-summary","title":"Project Summary","text":"Client
System73 Powering Porfitable Streaming
Timeline
Mar-2019 <--> Jun 2022 (3 yrs 4 mos)
Role
Product Designer
Achievements
We want to enhance our recently established Online Video Platform, so that our content creators from our two online tv channels to seamlessly upload and manage three different types of video content.
Additionally, we seek to establish a well-defined workflow for the various stages - \"design, development, stakeholders\" - with the aim of enhancing collaboration and ensuring predictability in deliverables.
"},{"location":"work/digital/kuno/#goals","title":"Goals","text":"In a single designer team, surrounded by developers, the role of design often lacks clarity. The individual tasked with this responsibility may encounter challenges in dealing with team members who may not fully comprehend the purpose of design.
The ultimate objective of the feature definition flow is to reach a point where one can anticipate approximately 80%-95% of what is expected to happen and how it will unfold, leaving only a minimal percentage to simple coincidence.
Wireframe -------> Prototype -------> Reality
How might we accomplish that?
In this project, we followed these steps. However, it is crucial to tailor them to the specific teamwork dynamics within the company, considering how teams communicate, collaborate, and ensure alignment toward a shared project goal.
"},{"location":"work/digital/kuno/#prd-product-requirements-document","title":"PRD - Product Requirements Document","text":"During multidisciplinary meetings, verbal discussions without visual aids such as a whiteboard (or its virtual equivalent) can lead to different interpretations by participants. While this divergence is understandable, addressing it is key.
How might we anticipate this?
One effective approach is to create a concise, one-page Product Requirements Document (PRD) that explicitly outlines what we commit to deliver. This document encapsulates the entire feature scope and the estimated phases required for completion, aligning them with the development team's planning cycles.
Once the definition meeting concludes, and all participants have endorsed the pre-requirements and commitments, there is no room for \"You said\" or \"I said\" discussions \u2013 everything is documented and accessible to everyone.
This serves as a robust guide that can be flexibly adapted to meet the specific needs of the team --> Atlassian PRD
"},{"location":"work/digital/kuno/#wireframing","title":"Wireframing","text":"Before diving into design work, it's essential for designers to grasp project requirements. Rather than creating multiple versions of the same concept, gathering insights from various team members can save time, especially considering potential technical limitations. This initial step is crucial.
In my experience, involving individuals from different departments improves the process. Not everyone attends every meeting, and incorporating diverse perspectives ensures everyone feels included in decision-making. This fosters a personalized connection for each team member with the project, creating a mutually beneficial scenario.
"},{"location":"work/digital/kuno/#prototype","title":"Prototype","text":"Prototypes play a crucial role in the design process as they offer a tangible sense of a product, something static screens cannot achieve. Before the advent of Sketch, web design was commonly done in Photoshop, a powerful yet expensive tool with a steep learning curve and no interactivity.
With the emergence of Sketch, other alternatives like Adobe XD surfaced. Adobe XD, from its inception, catered to both MacOS and Windows designers, offering an interactive prototype mode that evolved from simple click-throughs to more sophisticated interactions. Clicking a button to navigate to a new screen provides clients and stakeholders with a unique \"feel\" of the product.
Prototypes are essential for problem-solving, showcasing new features, and communicating designs to developers. An interactive prototype goes beyond a static image, offering a more immersive experience. During this stage, ideas can be explored, tested, and validated, allowing for the identification and resolution of potential issues before actual development.
Here, you can see a single-screen prototype in Figma.
View Figma Reduced Prototype
"},{"location":"work/digital/kuno/#test","title":"Test","text":"No matter how positive you feel about the progress of your project, it inevitably has flaws. The sooner these flaws are identified, the better, as addressing them early on reduces the workload for developers.
Regardless of one's confidence in design skills, users seldom interact with products as intended.
If you doubt this, consider the impact of this viral video:
The original Square Hole video
I had a similar experience with the Online Video Platform. After conducting tests, a substantial list of flaws began accumulating, and we had to address them in the subsequent sprints
Here is one of the Affinity boards that we generated:
"},{"location":"work/digital/kuno/#developers-handover","title":"Developers Handover","text":"We realized that having a constantly changing design file, with ongoing modifications from the design team alongside the addition of new functionalities by the development team, led to shifting requirements and general confusion.
To address this, we implemented a practice of closing versions for design. This meant that once a feature was approved for development, it was assigned a fixed version number, and no changes were allowed until it was developed.
Managing this was not straightforward due to limitations in design software, but we successfully controlled a significant portion of it. This approach spared everyone from the frustration of dealing with unexpected changes.
Specifications were documented in the Jira tickets for development, establishing a continuous line of communication between FrontEnd and Design throughout the process of developing new features.
"},{"location":"work/digital/kuno/#validation","title":"Validation","text":"We implemented an interlocked circle of approval to remove emotion and personal opinions from the development process.
graph TD;\n A[PM Creates Task] -->|Assigns to Design| B(Design Working);\n B -->|Task Finished| C[PM Approval];\n C -->|Approved| D(Front and Back end);\n D -->|Work Finished| E(Design Approval);\n E -->|Approved| F[Done];\n E -->|Not Approved| D;\n C -->|Not Approved| B;\n D -->|Not Finished| C;This straightforward process effectively eliminated personal relationships from the work, streamlined PM's agendas, and ensured that each team member completed their respective tasks.
"},{"location":"work/digital/kuno/#documentation","title":"Documentation","text":""},{"location":"work/digital/kuno/#help-center","title":"Help Center","text":"Having introduced over 20 features, we observed a lack of user awareness regarding available functionalities and how to perform simple tasks with these features. To address this, we developed the Help Center \u2013 a comprehensive guide showcasing all platform features. While the Online Video Platform is no longer available, a substantial portion of the Help Center remains accessible.
"},{"location":"work/digital/kuno/#internal-documentation","title":"Internal Documentation","text":"Given the complexity of some features, we created internal documentation to facilitate the onboarding of new team members. This documentation aimed to provide in-depth knowledge about the platform, enabling new additions to the team to quickly grasp essential information.
"},{"location":"work/digital/kuno/#final-deploy","title":"Final Deploy","text":"After completing the aforementioned steps, we reached the Final Deploy stage, where the new features became available to users. Although this marks the typical endpoint, in the realm of software, it is merely the beginning of potential challenges. Service failures, user complaints, and infrastructure issues can arise. With a proficient team, this stage is managed as effectively as the preceding ones.
"},{"location":"work/digital/kuno/#maintainence","title":"Maintainence","text":"This is the actual conclusion of the journey. It occurs when we are confident that the feature functions as intended, users are no longer perplexed by it, and minimal effort is required to keep it operational.
"},{"location":"blog/archive/2024/","title":"2024","text":""},{"location":"blog/archive/2023/","title":"2023","text":""},{"location":"blog/archive/2019/","title":"2019","text":""},{"location":"blog/category/design-system/","title":"Design system","text":""},{"location":"blog/category/inputs/","title":"Inputs","text":""},{"location":"blog/category/design-decisions/","title":"Design decisions","text":""},{"location":"blog/category/ui-prototypes/","title":"UI Prototypes","text":""},{"location":"blog/category/personal/","title":"Personal","text":""}]} \ No newline at end of file +{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"about/","title":"About me","text":""},{"location":"about/#welcome-i-am-anelia-sheher","title":"Welcome, I am Anelia (She/Her)","text":"I\u2019m a designer who started with industrial design and then transitioned to digital product design.
I have a passion for creating products that are functional, simple, and powerful, and that can be improved by investigation and testing. I have worked on a lot of interesting projects, and I love to accuire new skills and tools to enhance my design work.
"},{"location":"about/#my-background","title":"My Background","text":"Ever since I was a kid, I was fascinated by architecture and design. I wanted to be an architect and create beautiful and functional buildings. However, I ended up studying industrial design instead. I was very lucky to find a captivating career that was interesting and creative, two things that have always been very important to me.
After finishing my design career, I joined a scholarship at a local institution that opened a world of opportunities for design for me. I got to work on different types of projects, from paper flyers to complicated web design projects. I was able to try on a lot of different challenges and some of them are still used to this very day.
Later on, in my Master's Degree, I discovered responsive web design, UX, UI, and HCI design fields, and I fell in love with the ability to make products that are never actually finished, nor done, but can be only improved by investigation and testing. I love that part of digital product design, and I decided to pursue it as my main focus.
I truly believe that nothing is impossible.
"},{"location":"about/#design-philosophy-and-style","title":"Design Philosophy and Style","text":"My design philosophy is based on the idea that design should be fun, functional, and user-centric. I believe that design should solve problems, enhance experiences, and create value for both the users and the clients. I also believe that design should be simple, but not simplistic, and that every element should have a purpose and a meaning.
My design style is influenced by my industrial design background, where I learned to appreciate the beauty and elegance of minimalism, geometry, and contrast. I also like to experiment with vivid and saturated colors, and to add some originality and personality to my work. I admire designers who can combine functionality, simplicity, and power in their work, such as Dieter Rams, Jony Ive, and Paula Scher.
"},{"location":"about/#fun-stuff","title":"Fun stuff","text":"My geeky nature and stubborness enhance my problem-solving skills, bringing a unique perspective and insatiable curiosity to each project. This drive to explore and invent enables me to address software and interface challenges and play with different solutions, until I find the most suitable one for the situation.
"},{"location":"about/#hobbies-and-interests","title":"Hobbies and Interests","text":"As a designer, I have some goals and dreams that I want to achieve and pursue. Some of them are:
Feel free to reach out and discuss your design needs or simply to talk about the latest tech trends.
I\u2019m always up for an exciting conversation and the opportunity to explore new frontiers of problem-solving.
Let\u2019s make magic happen!
Contact
"},{"location":"about/#career-timeline","title":"Career timeline","text":""},{"location":"blog/","title":"Blog","text":""},{"location":"blog/2024/04/design-system-inputs/","title":"Bridging the Gap: Design in Figma with HTML Input Types in Mind","text":"In software development, when we want to collect information from users, we often use forms with labeled text fields. While these fields might seem a bit robotic to us humans, they're crucial for allowing communication between people and software. This communication helps systems create personalized experiences and recommendations within their digital interfaces.
View Figma Community File
"},{"location":"blog/2024/04/design-system-inputs/#design-and-development","title":"Design and Development","text":"Designers and developers often face challenges in communication, leading to the creation of similar outputs. However, there's typically a lack of coordination between them. Designers design with humans in mind, naming their components' properties accordingly, which is great for keeping the focus on the user experience. On the other hand, developers operate in a more machine-centric environment. While this approach is beneficial in maintaining a human-centric design and a machine-centric development process, I believe that aligning certain aspects with similar names could greatly benefit both sides.
The journey from design concept to functional implementation is usually a bumpy ride. We, designers, craft visually appealing interfaces, developers have to translate these designs into tangible elements with specific characteristics defined in HTML. The challenge lies in ensuring that both parties speak the same language, minimizing misunderstandings and streamlining the development process.
"},{"location":"blog/2024/04/design-system-inputs/#html-inputs","title":"HTML Inputs","text":"Here are 12 different input types that are most likely to be used in any website or digital product.
If you still need to check if there are even more types, you can go and explore the complete list on MDN web docs. Almost all inputs have some common attributes that we are going to be addressing and we will see how we can set our Figma components for success.
"},{"location":"blog/2024/04/design-system-inputs/#desired-anatomy","title":"Desired Anatomy","text":"It's often the most basic form element used for accepting single-line text input from users. By starting here, we can establish foundational design principles that can be applied to more complex input types.
"},{"location":"blog/2024/04/design-system-inputs/#html-structure","title":"HTML structure","text":"<label for=\"name\" class=\"inputLabel\">Label</label> \n\n<input type=\"text\" id=\"name\" name=\"name\" class=\"inputTypeText\" required/>\n\n<span class=\"inputCaption\">Additional instructions</span>\nWhen we talk about the structure of HTML elements, it's crucial to understand the relationship between labels and input fields. The \"for\" attribute in a label should always match the \"id\" attribute of the corresponding input field. Why? Because this association is what makes forms accessible and user-friendly. When they're correctly linked, users can click on the label itself to activate or focus on the input field, making navigation smoother and more intuitive. It's a small detail, but it significantly enhances the overall usability of web forms.
"},{"location":"blog/2024/04/design-system-inputs/#css-styling","title":"CSS styling","text":".exampleForm {\n flex-direction: column; \n justify-content: flex-start; \n align-items: flex-start; \n gap: 0.75rem; /*12px*/\n display: inline-flex;\n}\n.textInput{\n flex-direction: column; \n justify-content: flex-start; \n align-items: flex-start; \n gap: 0.125rem; /*2px*/\n display: inline-flex;\n}\n .inputLabel {\n font-size: 0.75rem; /*12px*/\n }\n .required:after{\n content: \" *\";\n }\n .inputTypeText {\n font-size: 1rem;\n height: 2rem;\n border: 1px solid var(--tags);\n border-radius: 0.25rem; /*4px*/\n padding-inline: 0.75rem; /*12px*/\n }\n .inputCaption{\n font-size: 0.75rem; /*12px*/\n color: var(--input-caption);\n }\n.textInput .inputTypeText:focus{\n outline: 1px solid var(--primary);\n outline-offset: 0.125rem;\n}\n.textInput .inputTypeText:enabled:hover {\n border-color: var(--input-caption);\n background: var(--primary-light-008);\n}\n.textInput .inputTypeText:enabled.error{\n border-color: var(--error);\n color: var(--md-typeset-color);\n}\n*:disabled, .disabled {\n color: var(--disabled);\n opacity: 1;\n cursor: not-allowed;\n}\n*.error {\n color: var(--error);\n opacity: 1;\n}\n.inputSubmit {\n border-radius: var(--spacing-1);\n border: 0.1rem solid transparent;\n background-color: var(--md-typeset-color);\n color: var(--md-typeset-color-inverted); \n padding: var(--spacing-1) var(--spacing-4);\n margin-top: var(--spacing-2);\n margin-right: var(--spacing-2); \n font-size: 1rem;\n}\n.inputSubmit:hover {\n background-color: var(--primary);\n color: var(--md-typeset-color-inverted);\n border: 0.1rem solid var(--primary);\n}\nAnd here is the result of the HTML and CSS combined, following the Figma design:
Label Additional instructions Label Additional instructions Label Additional instructionsWhat we need to have in mind when designing:
<input type=\"text\">disabled, pattern, placeholder, readonly, required, size:hover, :focus, and :active
These classes play a significant role in enhancing the user experience by providing visual feedback for different states of interaction. By defining them consistently across components, we ensure a cohesive and intuitive interface.
The order of these pseudo classes is very important and we should always define them as follows 1:
The question is where and how can we link these properties to the Figma panel? Some of the component properties will refer to HTML attributes and others will be referring to CSS pseudo classes that will determine the final look of the components. Let's figure it out together...
"},{"location":"blog/2024/04/design-system-inputs/#figma-component-properties","title":"Figma component properties","text":"Connecting component properties in the Figma panel to those corresponding to HTML attributes (such as \"Disabled,\" \"Required\") and associated with CSS pseudo-classes (like \"Hover,\" \"Focus\") might not seem essential at first glance. However, when you're designing something meant to be both human-readable and developer-friendly, it's crucial. Avoiding the need for extensive explanations by ensuring clarity in design components fosters smoother communication between designers and developers. This connection enables them to effortlessly discuss and understand component behavior directly within the design tool, facilitating collaboration and streamlining the design and development process.
Bits of code - Articles on frontend engineering and more When do the :hover, :focus, and :active pseudo-classes apply? \u21a9
WordPress has been my go-to platform for a portfolio since the beginning of time. However, I wanted to showcase my skills in HTML and CSS in a clear and straightforward manner. A couple of months ago, I made the decision to go static and build my own portfolio from the ground up, creating something I can be proud of. Here it is.
"},{"location":"blog/2023/12/going-static-design-portfolio/#choosing-a-platform","title":"Choosing a Platform","text":"There are numerous platforms available for building static websites. Some offer excellent documentation, providing step-by-step guidance for creating your desired outcome. Others, while powerful, lack comprehensive documentation, making the setup process challenging. Personally, if the setup is slow and tedious, it dampens my enthusiasm for content creation. Here are the platforms I tried:
When I sit down to write text in front of any text editor (Google Doc, Word, Confluence page), I usually start by defining the structure. In this website, I just need to think about the elements of text that I am going to include so that the navigation is accurate, there is a natural text flow, and the titles of each section lead to the next.
I have decided to write and publish content on this website, and until now, it has felt like home.
I hope I will have fun with this one.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/","title":"How to keep up with large prototypes in Adobe Xd","text":""},{"location":"blog/2019/11/large-prototypes-adobe-xd/#updates-from-adobemax-2019","title":"Updates from AdobeMAX 2019","text":"This November Adobe Xd provided a huge update during the annual conference Adobe MAX. It came with a lot of cool stuff, such as components states, real time collaboration, and more. I\u2019ve been using this software for a little less than a year and I have to say, it has changed a lot in the last few months. They have developed a lot of functionalities, keep it up Adobe. Although, it had this major update a lot is still missing, I am sure it will come soon.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#prototype-that-is-constantly-growing","title":"Prototype that is constantly growing","text":"At work, our team is deeveloping a complicated platform, it includes more than a hundred screens and interactions between them. We used to have it all in only one file because it\u2019s what you would expect. As the number of artboards and interactions grew, we needed to do something about it because the software was getting slow. This is how the first file separation in major sections happened. And here is the feature I am missing \u2013 External Links to link our other files and simulate navigation through the whole platform.
Then, we realised that working in agile and continuous development cannot go on overwriting the prototype as we go. It provokes conflict with stakeholders and the development team. We needed to close a prototype version with the same pace as our releases. Each one of those files needed to be available for search, allowing us to consult changes and when were they applied. This is exactly how it gets a little bit tricky. We could have the files in Creative Cloud but uploading and updating those big files also got slow.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#version-control","title":"Version control","text":"Another downside was that nobody has the version control over the files and things appear and disappear without leaving a trace. We decided we should go old school, using git, and putting a message with each commit. The most important thing when you develop a modern app is that you are not limited to only one type of 12 grids. (BOOOM!). You can have different grids throughout your design and they don\u2019t need to match (mind blowing, I know). These grids do not come specified in the shared for development prototype, yet. The solution, developers download the files and consult the grids that are used in each section.
This is still a workaround and seems complicated at first, so I hope it changes and adapts better to continuous development.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#some-unexpected-changes","title":"Some unexpected changes","text":"When the new update was released this November, the first day I was puzzled: \u201cOhhh\u2026? Ahhh\u2026? Where is my Share button?\u201d It moved from the top right corner to the top left one, so it took me some time to adapt. It looks like a small change, but it is about a functionality you are using everyday and let\u2019s face it, the first couple of days it\u2019s tough.
I am usually excited about the new stuff, so this was no different. One of the coolest things they presented was Components states \u2013 simulation of buttons states \u2013 normal, on hover, pressed, expanded, those are the basic ones. This also meant that we needed to remake a lot of stuff. Obviously we had already made navigation menus, checkboxes, radio buttons, search areas, etc\u2026 the old way. But this new thing meant that we could reduce the number of Artboards and actually present more realistic results. So we got on to it.
Now, we have our main platform separated by main sections with its primary, secondary and tertiary buttons, checkboxes, toggles and radio buttons all clickable from the prototype: \u201cYey!\u201d I must say they are all shared and it looks very cool, but I would really like to be able to have the whole prototype in the same file. I don\u2019t know what number is the limit for artboards, but I know we have outgrown it very fast.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#website-prototype","title":"Website prototype","text":"We needed to prepare a website prototype for a client applying all the different capabilities we have developed so far. Taking into account each one of the included functionalities, each layout change, everything. Here we are developing this prototype for approval and it is getting cra-aa-zy again.
We are already 36 artboard designs in. It includes six different resolutions, light and dark modes, and of course, designs for different sections which multiplies by six resolutions and it grows and grows. We try to maintain everything nice and organized, but with this many considerations, it is insane.
I remember my first website prototype back in 2009, it had 5 main pages, no CMS behind and only one resolution and only one mode. We did designs for a homepage and three or four main pages, including special services and featured elements. In total, it was like 5 screens and we were good to go.
"},{"location":"blog/2019/11/large-prototypes-adobe-xd/#conclusions","title":"Conclusions","text":"Here we are now, it\u2019s so overwhelming. Sure the tools and computers have become a lot better, it\u2019s faster than ever to develop something cool, but come on?!
The most frustrating thing of all this is that all I mentioned above is necessary, so everybody stays on the same page of what\u2019s being developed. It is great for your client, to see what you are actually talking about. Also for the development team to know exactly what everybody is expecting with little amount of extra information. And here we are, keeping it all connected and trying to develop the next best product.
A lot of artboards, powerful tools and a lot to keep track of, when somebody asks for changes. I will keep applying all the new stuff as I always do, because it is important to stay up to date. It makes our lives better.
Keep it up and rock on!.
"},{"location":"blog/2019/10/112-hours-remote-work/","title":"My first 112 hours of Remote work","text":"I started a new job around seven months ago with everything that comes with it.
New people, new habits, new executives and the most exciting part of all, my new title is User Experience Designer. I have been longing to get to it and I finally did.
There were a couple of things I had to get used to at my new position. The first and very important, integrate in a development team that has not had a designer for a very long time. I had to learn a lot about the project we are developing, who is doing what, who to talk to when I have a specific question, etc\u2026
When people go to work in an office, there usually is no habit of documenting everything, every decision that was taken, reasons why, etc \u2026 and this place was no different. There was some documentation, but it was definitely not enough for me to understand it all.
I decided to stay patient (everybody that knows me, knows that this is the hardest part), but eventually, I got used to the process, morning stand ups, retrospectives, sprint planifications and everything else. Although, this was all new for me, from the experience I previously had, I felt like in my own waters there.
A couple of months later when I felt that I knew my way around and got a little more confident in my new position, I made the first request for Work From Home in the company\u2019s calendar. I got almost an immediate response: \u201cOK\u201d. I said: \u201cWait a minute, is that all that it takes? I will definitely do it again.\u201d After that he day came and I took my laptop, connected my home screen to it and started working from my home desk.
Well, I don\u2019t really remember what I did that day, but I remember the feeling of a dream just getting a big fat green checkmark.
You see, around four years ago, I was working on a project of developing a base theme for twelve different websites, using a local server for development and another one for production. The themes had the same base structure, but had some differences, so all of this had to be managed, developed and maintained and I had the best document ever to guide me how to do it. Everything that was changed manually and to watch for when updates were coming and so on. I got a little carried away here, but my point is, around this time, I started thinking that something basic is wrong there and after a little while I came to the conclusion that what I was actually doing was crossing half an island (60km back and forth) to go to the office and connect to a server, maintain myself busy and then get on a car again, and head home. Around that time, I had a little boy, he was a little over 2 years old, and it was very interesting seeing him discovering simple things. So, I made a simple count and the two hours I am spending on the road everyday are taking ten hours per week from me seeing this little boy growing.
Well, nothing is that simple, but the fact is, there is no sense of me being present in an office, if I am going to be much happier staying a couple of days a week and work from home. It saves energy in the morning, saves gasoline and, frankly, two hours of my day. It made me look for opportunities, but again around 2015, there were some remote companies, but nothing like what we have nowadays. There a couple of sites where you can go to, register and start experiencing on your own, see if you actually like it. There was nothing there when I started thinking about it. There were some lucky people posting how cool it is to work remotely and don\u2019t depend on a physical environment. I don\u2019t remember exactly when, but sure enough, Automattic closed their office and it got a lot of press around the world, I remember thinking to myself that day: \u201cjust how lucky these people are!\u201d. I went on doing my job, crossing the island and waiting for something new and interesting to appear. Well, it\u2019s been some time, but it is actually happening now.
Remote work is way more attractive for me and I hope more companies will realise that and help their people stay happier and more productive, enjoying the work and their lives.
I am very grateful for my current position, where I can ask for a remote day and just get it. It comes very helpful when my son has a cold and need to stay around to give him medicine. Although, he is not so little now, I still enjoy his presence a lot and I am very happy to have him around while I am actually at work, resolving my everyday jira tasks.
"},{"location":"blog/2019/11/podcasts-i-listen/","title":"Podcasts to listen","text":"This year has definitely been discovering podcasts for me.
"},{"location":"blog/2019/11/podcasts-i-listen/#in-english","title":"In English","text":"Well, since there has always been more content in English than any other language over the internet. It is normal that this list has more examples.
"},{"location":"blog/2019/11/podcasts-i-listen/#scriptnotes","title":"Scriptnotes","text":"Lately, I find myslef listening to mainly four podcasts. One of them is Scriptnotes it is a podcast for screenwriters and things that are intersting to screenwriters. Well, I am not a writer, not even close to being one, but I do enjoy when John August and Craig Maizin speak their truth about very diverse topics. I also think that going out of my industry is actually beneficial to keep an open mind.
"},{"location":"blog/2019/11/podcasts-i-listen/#getting-things-done","title":"Getting things done","text":"At work and in my personal life, I have been struggling with task organization and keeping things planned and thought out. Then, one day I found a podcast by a very famous author right on topic \u2013 Getting things done (of course). It has served me well to start applying concepts from David Allen\u2019s book and to understand better problems that come with the lack of organization. I hope, I am getting better at it, but it will take time to master.
"},{"location":"blog/2019/11/podcasts-i-listen/#distributed","title":"Distributed","text":"Another topic that is very dear to me is working remotely, or in distance or in distributed environments, whatever term you like. There is one podcast about things that happen to people that are working far away from one another and do not have an office. It is called Distributed by Matt Mullenweg. Since Automattic is 100% distributed, they have been dealing with those issues for a very long time. I find it important to listen to people that actually have the experience.
"},{"location":"blog/2019/11/podcasts-i-listen/#tracks-to-relax","title":"Tracks to Relax","text":"I tend to have troubles with sleeping. Sometimes, I wake up in the middle of the night and going back to sleep is very difficult. Another search result brought me to Tracks to relax. Since the first episode of sleeping meditation I listened, the meditations have worked like a charm every single night.
"},{"location":"blog/2019/11/podcasts-i-listen/#in-spanish","title":"In Spanish","text":""},{"location":"blog/2019/11/podcasts-i-listen/#entiende-tu-mente","title":"Entiende tu mente","text":"One of my favourite podcasts in the whole world is \u201cEntiende tu mente\u201d (Understand your mind). It\u2019s been a long time since the first episode I listened, and I have never stopped. In this podcast, there are three main figures, one coach \u2013 Monica Gonzales, one psychotherapist \u2013 Luis Mui\u00f1o and a former radio spokesmam \u2013 Molo Cebrian. The trio talks about mental difficulties and how to deal with different situations. I love it, because no matter how I am feeling the day I listen to an episode, my mood changes in just 20 minutes.
I discovered it one day when I was feeling particularly down and started searching for information in the internet. I stumbled upon a podcast stating \u201c20 minutes to understand yourself better\u201d. I gave it a try and I actually felt better, so I continued listening. The thing is, no matter what \u201chole\u201d is in front of me, when they talk about serious problems and situations that people deal with, I get that feeling inside: \u201cThank god I am alive and actually fine!\u201d
"},{"location":"blog/2019/11/podcasts-i-listen/#el-arte-de-presentar","title":"El arte de presentar","text":"Another podcast that worths listening to in Spanish is \u201cEl arte de presentar\u201c. Although, it\u2019s been almost a year since the last episode, if you haven\u2019t listened to this podcast you definitely should. They speak about presentations, how to sound confident and provide value to your audience at scale. I am sure there are a lot of people that are doing this kind of thing, but Gonzalo really walks the talk and it\u2019s a pleasure to listen to him and his interviews.
This is my current list of podcasts and reasons I find them interesting. Let me know if you agree or not with it.
"},{"location":"work/brands/cosmo-bots/","title":"Cosmobots","text":""},{"location":"work/brands/hornets-hockey/","title":"Hornets Hockey","text":""},{"location":"work/brands/hornets-hockey/#project-summary","title":"Project Summary","text":"Client
Hornets Hockey Roller Hockey Kids Club
Timeline
17 Jul 2023 (1 day)
Role
Branding Designer
Technology
A friend of mine decided to create a Roller Hockey kids club. She needed a logo and asked for help. Since I had the Midjourney (MJ) subscription, I decided to give it a try. It was a completely new concept for me, leveraging all the efforts to AI and trying to come up with something good enough so it can become the club's brand.
"},{"location":"work/brands/hornets-hockey/#brainstroming-and-concept","title":"Brainstroming and concept","text":"First things first, we kick off with brainstorming. It's crucial to nail down the logo style we're after. My friend already chose a bunch of Hornets hockey logos and shared them with me.
With my MJ subscription in hand, I explored different concepts, taking into consideration the desired identity, spirit, and the essence of hockey. This initial phase laid the foundation for the elements that would later come together in the final logo.
Here is a small sample of the different ideas that came up:
"},{"location":"work/brands/hornets-hockey/#image-generation-with-mj","title":"Image Generation with MJ","text":"After thoughtful consideration, I selected a couple of styles that looked promising and started more detailed-oriented generation. Here are a few examples.
At this point, I could explore different shapes, styles, and colors. This iterative process played a crucial role in shaping the final design.
"},{"location":"work/brands/hornets-hockey/#selecting-the-parts","title":"Selecting the parts","text":"In this process, I found myself drawn to specific elements in different images. Some had a beautiful body shape, while in others, the head of the character was achieved better. In all versions, the hornet wings were just too weird, so I had to create them separately.
Making sure that every aspect of the logo was at the same level of detail, I selected and organized these standout parts. Afterwards, I created a new character using a collage technique in Affinity Designer on iPad, and sent it for approval to my friend.
Once I got the \"OK!\", I could proceed to vectorizing the final shape and defining the branding elements in more detail.
"},{"location":"work/brands/hornets-hockey/#vectorization-and-simplification","title":"Vectorization and simplification","text":"This step is crucial in every branding image creation. It ensures that the final shape is refined and detailed, and most of all, scalable.
One requirement for this particular case, since the beginning, was to make it possible to be embroidered on a patch.
"},{"location":"work/brands/hornets-hockey/#color-palette","title":"Color Palette","text":""},{"location":"work/brands/hornets-hockey/#final-thoughts","title":"Final thoughts","text":"While it might not be the ultimate, flawless logo in the entire universe, the real takeaway here is the process. Thanks to MJ, I was able to speed up the creation process significantly. I was able to define a final image, create a completely unique character from nothing, choose different elements that looked nice to me, and offer a final proposal in just one day. Yes, 24 hours!
I don't know if I am going to do it again; that's for the future to decide. At this point, AI definitely helped find an acceptable solution for the situation, and I am very grateful I could experiment and do it.
"},{"location":"work/content/pecas/","title":"PECA'S Tenerife","text":""},{"location":"work/content/pecas/#project-summary","title":"Project Summary","text":"Client
Calzados PECA\u2019S (local shoe stores chain)
Timeline
Jul-2017 <--> Dec 2018 (1 yr 6 mos)
Role
Achievements
Create and grow the social media following for the brand:
A well-known local brand of shoe stores decided to enter into the online market. Initially, there was a well-established warehouse management system with a connection through the database. The dates for new collection releases were set, and the latest models were chosen in line with seasonal trends.
However, what was lacking was material for creating publications and social media posts. There was no product photography beyond what the brands produced for their social media. Utilizing these materials wouldn't make the shoe store brand recognizable or remarkable. Early on, we decided to create unique material to promote the trendiest products independently from the manufacturers.
Lacking a model for the shoes, I had to get creative and started creating different compositions by type, size, and color to make them appealing and interesting. Surprisingly, it worked out well, and our following began to grow steadily.
After that period, we were able to secure a model for the shoes, and naturally, the quality of our photo shoots improved a lot.
"},{"location":"work/content/pecas/#outside-photoshoots","title":"Outside Photoshoots","text":""},{"location":"work/content/pecas/#my-unique-contribution-to-the-project","title":"My Unique Contribution to the Project","text":"Some of the shoe compositions from our images were reposted by the brands manufacturers and gained significant interest on their social media profiles.
"},{"location":"work/content/pecas/#in-store-photoshoots","title":"In-Store Photoshoots","text":""},{"location":"work/content/pecas/#the-takeaways","title":"The takeaways","text":"I worked at the company's head office, which maintained constant communication with the warehouse and the development team responsible for connecting the physical warehouse platform to the online sales platform. We were all in constant communication, planning, and managing every task meticulously to ensure everything was done at the right moment.
"},{"location":"work/content/pecas/#did-this-work-experience-improve-my-career","title":"Did this work experience improve my career?","text":"Absolutely! I learned how to manage a relatively large database of physical products, create a content calendar, and post engaging content on social media. I witnessed continuous growth in our social following and had direct contact with clients, which was very important to me.
These images represent only a small part of what I accomplished during my time there.
Disclaimer: All the Pictures are property of Calzados PECA\u2019S Tenerife.
"},{"location":"work/digital/kuno/","title":"KUNO","text":"Online Video Platform"},{"location":"work/digital/kuno/#project-summary","title":"Project Summary","text":"Client
System73 Powering Porfitable Streaming
Timeline
Mar-2019 <--> Jun 2022 (3 yrs 4 mos)
Role
Product Designer
Achievements
We want to enhance our recently established Online Video Platform, so that our content creators from our two online tv channels to seamlessly upload and manage three different types of video content.
Additionally, we seek to establish a well-defined workflow for the various stages - \"design, development, stakeholders\" - with the aim of enhancing collaboration and ensuring predictability in deliverables.
"},{"location":"work/digital/kuno/#goals","title":"Goals","text":"In a single designer team, surrounded by developers, the role of design often lacks clarity. The individual tasked with this responsibility may encounter challenges in dealing with team members who may not fully comprehend the purpose of design.
The ultimate objective of the feature definition flow is to reach a point where one can anticipate approximately 80%-95% of what is expected to happen and how it will unfold, leaving only a minimal percentage to simple coincidence.
Wireframe -------> Prototype -------> Reality
How might we accomplish that?
In this project, we followed these steps. However, it is crucial to tailor them to the specific teamwork dynamics within the company, considering how teams communicate, collaborate, and ensure alignment toward a shared project goal.
"},{"location":"work/digital/kuno/#prd-product-requirements-document","title":"PRD - Product Requirements Document","text":"During multidisciplinary meetings, verbal discussions without visual aids such as a whiteboard (or its virtual equivalent) can lead to different interpretations by participants. While this divergence is understandable, addressing it is key.
How might we anticipate this?
One effective approach is to create a concise, one-page Product Requirements Document (PRD) that explicitly outlines what we commit to deliver. This document encapsulates the entire feature scope and the estimated phases required for completion, aligning them with the development team's planning cycles.
Once the definition meeting concludes, and all participants have endorsed the pre-requirements and commitments, there is no room for \"You said\" or \"I said\" discussions \u2013 everything is documented and accessible to everyone.
This serves as a robust guide that can be flexibly adapted to meet the specific needs of the team --> Atlassian PRD
"},{"location":"work/digital/kuno/#wireframing","title":"Wireframing","text":"Before diving into design work, it's essential for designers to grasp project requirements. Rather than creating multiple versions of the same concept, gathering insights from various team members can save time, especially considering potential technical limitations. This initial step is crucial.
In my experience, involving individuals from different departments improves the process. Not everyone attends every meeting, and incorporating diverse perspectives ensures everyone feels included in decision-making. This fosters a personalized connection for each team member with the project, creating a mutually beneficial scenario.
"},{"location":"work/digital/kuno/#prototype","title":"Prototype","text":"Prototypes play a crucial role in the design process as they offer a tangible sense of a product, something static screens cannot achieve. Before the advent of Sketch, web design was commonly done in Photoshop, a powerful yet expensive tool with a steep learning curve and no interactivity.
With the emergence of Sketch, other alternatives like Adobe XD surfaced. Adobe XD, from its inception, catered to both MacOS and Windows designers, offering an interactive prototype mode that evolved from simple click-throughs to more sophisticated interactions. Clicking a button to navigate to a new screen provides clients and stakeholders with a unique \"feel\" of the product.
Prototypes are essential for problem-solving, showcasing new features, and communicating designs to developers. An interactive prototype goes beyond a static image, offering a more immersive experience. During this stage, ideas can be explored, tested, and validated, allowing for the identification and resolution of potential issues before actual development.
Here, you can see a single-screen prototype in Figma.
"},{"location":"work/digital/kuno/#test","title":"Test","text":"No matter how positive you feel about the progress of your project, it inevitably has flaws. The sooner these flaws are identified, the better, as addressing them early on reduces the workload for developers.
Regardless of one's confidence in design skills, users seldom interact with products as intended.
If you doubt this, consider the impact of this viral video:
The original Square Hole video
I had a similar experience with the Online Video Platform. After conducting tests, a substantial list of flaws began accumulating, and we had to address them in the subsequent sprints
Here is one of the Affinity boards that we generated:
"},{"location":"work/digital/kuno/#developers-handover","title":"Developers Handover","text":"We realized that having a constantly changing design file, with ongoing modifications from the design team alongside the addition of new functionalities by the development team, led to shifting requirements and general confusion.
To address this, we implemented a practice of closing versions for design. This meant that once a feature was approved for development, it was assigned a fixed version number, and no changes were allowed until it was developed.
Managing this was not straightforward due to limitations in design software, but we successfully controlled a significant portion of it. This approach spared everyone from the frustration of dealing with unexpected changes.
Specifications were documented in the Jira tickets for development, establishing a continuous line of communication between FrontEnd and Design throughout the process of developing new features.
"},{"location":"work/digital/kuno/#validation","title":"Validation","text":"We implemented an interlocked circle of approval to remove emotion and personal opinions from the development process.
graph TD;\n A[PM Creates Task] -->|Assigns to Design| B(Design Working);\n B -->|Task Finished| C[PM Approval];\n C -->|Approved| D(Front and Back end);\n D -->|Work Finished| E(Design Approval);\n E -->|Approved| F[Done];\n E -->|Not Approved| D;\n C -->|Not Approved| B;\n D -->|Not Finished| C;This straightforward process effectively eliminated personal relationships from the work, streamlined PM's agendas, and ensured that each team member completed their respective tasks.
"},{"location":"work/digital/kuno/#documentation","title":"Documentation","text":""},{"location":"work/digital/kuno/#help-center","title":"Help Center","text":"Having introduced over 20 features, we observed a lack of user awareness regarding available functionalities and how to perform simple tasks with these features. To address this, we developed the Help Center \u2013 a comprehensive guide showcasing all platform features. While the Online Video Platform is no longer available, a substantial portion of the Help Center remains accessible.
"},{"location":"work/digital/kuno/#internal-documentation","title":"Internal Documentation","text":"Given the complexity of some features, we created internal documentation to facilitate the onboarding of new team members. This documentation aimed to provide in-depth knowledge about the platform, enabling new additions to the team to quickly grasp essential information.
"},{"location":"work/digital/kuno/#final-deploy","title":"Final Deploy","text":"After completing the aforementioned steps, we reached the Final Deploy stage, where the new features became available to users. Although this marks the typical endpoint, in the realm of software, it is merely the beginning of potential challenges. Service failures, user complaints, and infrastructure issues can arise. With a proficient team, this stage is managed as effectively as the preceding ones.
"},{"location":"work/digital/kuno/#maintainence","title":"Maintainence","text":"This is the actual conclusion of the journey. It occurs when we are confident that the feature functions as intended, users are no longer perplexed by it, and minimal effort is required to keep it operational.
"},{"location":"blog/archive/2024/","title":"2024","text":""},{"location":"blog/archive/2023/","title":"2023","text":""},{"location":"blog/archive/2019/","title":"2019","text":""},{"location":"blog/category/design-system/","title":"Design system","text":""},{"location":"blog/category/inputs/","title":"Inputs","text":""},{"location":"blog/category/design-decisions/","title":"Design decisions","text":""},{"location":"blog/category/ui-prototypes/","title":"UI Prototypes","text":""},{"location":"blog/category/personal/","title":"Personal","text":""}]} \ No newline at end of file diff --git a/sitemap.xml.gz b/sitemap.xml.gz index 6afa082..6bfe151 100755 Binary files a/sitemap.xml.gz and b/sitemap.xml.gz differ diff --git a/stylesheets/extra.css b/stylesheets/extra.css index 1b4cc61..5c9f7d9 100755 --- a/stylesheets/extra.css +++ b/stylesheets/extra.css @@ -117,9 +117,9 @@ --md-default-fg-color--lighter: var(--grayscale-gray-450); --md-default-fg-color--lightest: var(--grayscale-gray-500); --md-default-bg-color: var(--grayscale-gray-920); - --md-default-bg-color--light: rgba(0, 0, 0, 0.54); - --md-default-bg-color--lighter: rgba(0, 0, 0, 0.32); - --md-default-bg-color--lightest: rgba(0, 0, 0, 0.07); + --md-default-bg-color--light: var(--grayscale-gray-900); + --md-default-bg-color--lighter: var(--grayscale-gray-800); + --md-default-bg-color--lightest: var(--grayscale-gray-700); --md-typeset-color: var(--md-default-fg-color); --md-typeset-color-inverted: var(--grayscale-gray-920); @@ -173,14 +173,14 @@ --md-accent-fg-color: var(--tertiary); - --md-default-fg-color: var(--grayscale-gray-900); - --md-default-fg-color--light: rgba(0, 0, 0, 0.54); - --md-default-fg-color--lighter: rgba(0, 0, 0, 0.32); - --md-default-fg-color--lightest: rgba(0, 0, 0, 0.07); + --md-default-fg-color: var(--grayscale-gray-920); + --md-default-fg-color--light: var(--grayscale-gray-900); + --md-default-fg-color--lighter: var(--grayscale-gray-800); + --md-default-fg-color--lightest: var(--grayscale-gray-700); --md-default-bg-color: var(--grayscale-gray-100); - --md-default-bg-color--light: rgba(255, 255, 255, 0.7); - --md-default-bg-color--lighter: rgba(255, 255, 255, 0.3); - --md-default-bg-color--lightest: rgba(39, 27, 27, 0.12); + --md-default-bg-color--light: var(--grayscale-gray-200); + --md-default-bg-color--lighter: var(--grayscale-gray-300); + --md-default-bg-color--lightest: var(--grayscale-gray-400); --md-typeset-color: var(--md-default-fg-color); --md-typeset-color-inverted: var(--grayscale-gray-200); @@ -442,9 +442,7 @@ input { } -.iconSummary { - color: var(--md-secondary); -} + /* gallery */ .galleryFlex { @@ -658,12 +656,28 @@ input { } .handnotes { - background-color: var(--primary-light-020); - font-family: monospace; - margin-left: var(--spacing-2); - padding-inline: var(--spacing-2); + text-decoration-thickness: 16px; + text-underline-offset: -.5em; + text-decoration-color: var(--secondary-050); + text-decoration-style: solid; + text-decoration-line: underline; + text-decoration-skip-ink: none; } .md-sidebar__scrollwrap { overflow-y: visible; -} \ No newline at end of file +} + +.iconSummary { + color: var(--md-secondary); + margin-right: var(--spacing-2); +} + +.md-typeset .grid.cards>ul>li { + border-radius: var(--spacing-3); +} + +.grid.cards>ul>li>p:first-child { + display: flex; + align-items: center; +} diff --git a/work/digital/kuno/index.html b/work/digital/kuno/index.html index ee23e44..d8f94f3 100755 --- a/work/digital/kuno/index.html +++ b/work/digital/kuno/index.html @@ -619,6 +619,30 @@ + + +
In a single designer team, surrounded by developers, the role of design often lacks clarity. The individual tasked with this responsibility may encounter challenges in dealing with team members who may not fully comprehend the purpose of design.
The ultimate objective of the feature definition flow is to reach a point where one can anticipate approximately 80%-95% of what is expected to happen and how it will unfold, leaving only a minimal percentage to simple coincidence.
@@ -1630,8 +1681,7 @@With the emergence of Sketch, other alternatives like Adobe XD surfaced. Adobe XD, from its inception, catered to both MacOS and Windows designers, offering an interactive prototype mode that evolved from simple click-throughs to more sophisticated interactions. Clicking a button to navigate to a new screen provides clients and stakeholders with a unique "feel" of the product.
Prototypes are essential for problem-solving, showcasing new features, and communicating designs to developers. An interactive prototype goes beyond a static image, offering a more immersive experience. During this stage, ideas can be explored, tested, and validated, allowing for the identification and resolution of potential issues before actual development.
Here, you can see a single-screen prototype in Figma.
- -
No matter how positive you feel about the progress of your project, it inevitably has flaws. The sooner these flaws are identified, the better, as addressing them early on reduces the workload for developers.
Regardless of one's confidence in design skills, users seldom interact with products as intended.