FRANK RIAÑO

Developer / Designer

About me

Hi, I'm Frank Riaño. Professional with over years of experience at the intersection of design, technology, and user experience. Expert in creating consistent visual identities and high-performing websites using Webﬂow, WordPress, Adobe Creative Suite, and prototyping tools like Figma. Specialized in brand management, UX/UI optimization, and web development (HTML5, CSS3, JavaScript, React, Git, PHP, SQL). Combining Software Development,Google UX Design certification with high-level bilingual communication in English and Spanish, I focus on delivering high quality, detail-oriented solutions that solve real user problems.

Personal info

Email frankseb04@gmail.com
Website sirfrank0.netlify.app
Address Bogotá, Colombia

Hobbies

Videogames

Art

Travel

Learn

Sports

Food

Xtreme

Tech

SKills

Technical Skills

HTML5

Javascript

CSS3

Bootstrap

Figma

Tailwind

React

DOM

Wordpress

Git

Photoshop/ Illustrator

Slack

Webflow

Premiere/Davinci Resolve

SQL

Professional Skills

Leadership

Order

Critical Thinking

Teamwork

Time management

Analysis

Creativity

Decision making

Curriculum

Education

Software Development

Universidad Nacional Abierta y a Distancia (UNAD) 2022 - 2025

Validate applications of IT projects following test plans ensuring data quality and security.
Software developer in charge of requirements gathering, analysis, design, development and testing of applications according to technical procedures and requirements.
Software tester with skills to define and execute activities in search of possible malfunctions, configuration and usability of software, applying methodologies and tools for test management, automation and defect tracking.
Co-team player with self-learning, responsibility, innovation and teamwork skills to support business processes that generate added value in technology-supported solutions.

Google User Experience (UX) Design

Coursera 2023

Gained a foundational understanding of user experience (UX) and user interface (UI) design principles.
Learned how to conduct user research and create user personas to inform design decisions.
Developed skills in creating wireframes and prototypes to visualize and test design ideas.
Acquired techniques for conducting usability tests to gather feedback and improve designs.
Became proficient in using design tools such as Figma, Adobe XD, and Sketch.

Frontend Development & UX/UI Design

Platzi 2021 - Now

Knowledge in HTML, CSS with its libraries and Javascript with skills in one or more Javascript frameworks.
Translator of designs to programming language.
Learning the principles of usability and responsive design patterns, usability for web and mobile devices.
Use of research methodologies and make design decisions based on research results.
Creating prototypes as close to the final product as possible, going through all phases of the design process and based on constant iterations.

Teaching of English and Spanish

Antonio Nariño College 2019 - 2022

Making of proposals for the teaching of foreign languages and Spanish.
High grammatical and practical command of the English language.
Qualities necessary for good communication in a second language.
Cultural study of English-speaking societies in order to understand their context.

Work experience

UI/UX Designer & Web Developer

Freelance 2021 - Current

Built responsive websites with WordPress, Webflow, and custom code (HTML, CSS, JavaScript, React).
Designed UI/UX systems in Figma with wireframes and prototypes for complex flows
Created interactive front-end features using React with clean, cross-browser code
Produced brand identities and digital assets using Adobe Creative Suite.
Managed Git repositories and optimized sites for speed, SEO, and accessibility.

Full Stack Developer

Solati SAS 2023 - 2025

Acted as a bridge between UX/UI and development, using prototypes to validate requirements and build new application views.
Analyzed PHP controllers and SQL queries to improve frontend integration and data management.
Fixed visual and interface bugs to ensure a smooth, consistent, and functional user experience.
Managed software installation and parameterization, creating responsive designs with HTML, CSS, and JavaScript.
Ensured quality standards and client requirements were met while following agile methodologies and productivity metrics.
Used Git for version control and team collaboration throughout the entire software lifecycle.

Web Designer & UX/UI Designer

BootNetwork 2022 - 2023

Worked for 6 months as a UX copywriter at BootNetwork, a US-based company.
Redesigned and rewrote content for various web pages.
Wrote persuasive and engaging copy to improve user experience and increase conversions.
Conducted A/B testing to evaluate the performance of different copies and designs.
Achieved an increase in traffic and sales through my work.

Bilingual Tech Support Agent

Teleperformance, Sutherland, Webhelp 2018 - 2022

I worked as a technical support specialist resolving platform errors and issues related to applications for global telecommunications companies and products.
Managed real-time troubleshooting for software navigation bugs and communication tool failures to ensure seamless service.
Remote support via chat or voice to foreign customers.
Handling of information management and communication tools.
Earned several bonuses for personal and group performance. Hotlines increased user feedback.

Team metrics management

Teleperformance 2020-2020

Evaluated the work of customer service team members.
Managed and calculated numbers related to the performance of each member of the team
Achieved maximum score in quality during the time as an analyst on the line.
Achieved an increase in quality scoresa from the agents.

English Teacher

YouAndEnglish.com 2020-2021

I taught English to students in Spain from 13 to 68 years old, men and women, from A1 level.
Handling of virtual teaching tools and implementation of personalized methodologies according to the student.
I achieved that their level reached B1 and they were able to pass English language exams for their studies.

Portafolio

Code Projects

80s Flappy Bird Game

Implementation of core game mechanics including gravity, collision detection, scoring, and game states.
Use of requestAnimationFrame for smooth animations and real-time gameplay updates.
Integration of sound effects and background music to enhance player feedback and immersion.
Focus on performance and user interaction, handling keyboard controls, restart logic, and visual feedback.

HTML

CSS

Frank's Console

Design and development of an interactive terminal-style personal portfolio inspired by retro command-line interfaces.
Implementation of command-based navigation using vanilla JavaScript for dynamic content rendering.
Creation of a custom UI with pixel/retro typography, animations, and console aesthetics using HTML and CSS.
Structured commands to display profile, experience, education, skills, and links in a non-traditional format.

HTML

CSS

Debts Project

Design and development of a personal debt management web application
Implementation of CRUD functionality to add, edit, delete, and filter debts by person and type.
Use of localStorage to persist data across sessions without a backend.
Creation of a real-time balance summary showing who owes whom and total amounts.
Export functionality to JSON backup and Excel files for data portability and reporting.

HTML

CSS

Aeropress Recipe Generator

Implementation of randomized recipe logic covering method, grind size, ratios, temperatures, and brew times.
Creation of a responsive, minimalist UI with grid layouts, animations, and coffee-themed visual styling.
Use of vanilla JavaScript for DOM manipulation, state handling, and dynamic content rendering without external libraries.
Integration of a built-in timer/chronometer to support the brewing process.

HTML

CSS

Web for document management

Making of a website to view and manage files.
Flex and Grid as technologies used for the responsive design of this website.
Use of JavaScript programming language to navigate through each section of the website, from Log-in, to Administrator mode.
Interactive prototyping with Figma.
Atomic model used for the creation of elements.
Figma prototype

Figma

HTML

CSS

Color Palette Generator

Generate visually appealing color combinations using the 60-30-10 rule.
Responsive Design creating a web page that adapts to different screen sizes for optimal user experience.
Contrast Optimization that ensures legibility by automatically calculating contrasting colors.
See color values and corresponding boxes instantly as you explore different palettes.

HTML

CSS

My Web Page

Making of my portfolio website with personal and work information.
Flex and Grid as technologies used for the responsive design of this website.
Use of JavaScript programming language for user interaction.
Use of external APIs such as Font Awesome and Formspree for icon visualization and interaction with the contact form.

HTML

CSS

Chimpokomon

Programming and design of a dynamic web page that recreates a video game of turn-based attack of the user and the CPU.
Use of tools such as CSS3, HTML5 and JavaScript..
Code optimization through the use of classes and objects.
Responsive design to be displayed on various devices.

HTML

CSS

SaveWalterWhite Re-design

Redesign of the webpage inspired by Breaking Bad, focusing on improved visual hierarchy and modern UI.
Development of a responsive layout using HTML and CSS with multiple breakpoints for desktop, tablet, and mobile.
Emphasis on clean layout, accessibility, and consistency while maintaining the original theme and tone of the page.
Use of flexbox and grid for structured content sections such as navigation, about, donation, and visitors areas.
Figma prototype
Original webpage

Figma

HTML

CSS

Calculator

Making of a calculator with a button-based interface.
Flex and Grid as technologies used for the responsive design of this website.
Use of JavaScript programming language for user interaction.
Use of external libraries such as Font Awesome and Formspree for icon display and interaction with the contact form.

HTML

CSS

CV Linktr-Style

Website with similar style to the social network link with personal and work information of my occupational profile.
Bootstrap library used for the styles of this web page.
Use of CEO tricks for better positioning in the Web.

HTML

CSS

Frontend Mentor | Product preview card component

Frontend mentor challenge to replicate a product card with responsive design for mobile and desktop.
Use of CSS and media queries for responsive design.
Implementation of images that modify to the size of the card.
Flex and Grid as technologies used for this challenge.

HTML

CSS

Frontend Mentor | QR code component

Frontend mentor challenge that consists of replicating a card with a QR code for subsequent scanning through a camera.
Use of colors, contrasts, margins and padding for proper display.
Flex as the technology used for this challenge.

HTML

CSS

Frontend Mentor | Single Price Grid Component

Frontend mentor challenge that consists of replicating a component card with a part of description, information and price of a service.
Use of colors, contrasts, margins and padding for proper display.
Flex and Grid as technologies used for the responsive design of this challenge.

HTML

CSS

Design Projects

Bodaza

App design connecting Colombian couples with wedding venues based on budget and specific needs.
Interviews revealed that both young and professional couples prioritize efficiency and quality.
Features location-based search, personalized quotes, and automated payment reminders.
Uses the 60-30-10 color rule and a persistent menu for custom accessibility settings.
Figma High-fi prototype
Figma Low-fi prototype

Figma

MetroApp

Making of the interface of a mobile application for the transportation system of a fictitious city.
Use of User Journeys and User personas for the direction and design features of the application.
Use of prototyping and wireframing tools such as Figma, Canva and Whimsical.
With only 2 months of study I was one of the top 10 projects according to Platzi and Torresburriel Estudio.
Atomic model used for the creation of elements.
Figma prototype
Landing of the challenge

Figma

Web for document management

Making of a website to view and manage files.
Flex and Grid as technologies used for the responsive design of this website.
Use of JavaScript programming language to navigate through each section of the website, from Log-in, to Administrator mode.
Interactive prototyping with Figma.
Atomic model used for the creation of elements.
Figma prototype

Figma

HTML

CSS

Gallery app

Design of a mobile photo gallery app prototype focused on capturing and organizing personal memories.
Creation of onboarding and home screens with clear navigation and visual hierarchy.
Creation of onboarding and home screens with clear navigation and visual hierarchy.
Figma prototype

Figma

SaveWalterWhite Re-design

Redesign of the webpage inspired by Breaking Bad, focusing on improved visual hierarchy and modern UI.
Development of a responsive layout using HTML and CSS with multiple breakpoints for desktop, tablet, and mobile.
Emphasis on clean layout, accessibility, and consistency while maintaining the original theme and tone of the page.
Use of flexbox and grid for structured content sections such as navigation, about, donation, and visitors areas.
Figma prototype
Original webpage

Figma

HTML

CSS

Re-design colegiovirtualnacional.com

Responsive re-design of a website for a school that offers various courses to its students.
Prototypes made in Figma, with the correct use of margins, typography and contrast for the correct visualization of the content.
Atomic model used for the creation of elements.
Figma prototype
Original webpage

Figma

Next Step Studio

Prototype of interface dedicated to the service of creation and maintenance of web pages for a project of my university.
Prototypes made in Figma, with the correct use of margins, typography and contrast for the correct visualization of the content.
Figma prototype

Figma

Certificates

Certificates Gallery

Development of a personal certificates gallery webpage to showcase academic and professional achievements.
Creation of a responsive image grid layout using HTML and CSS with flexible columns.
Implementation of hover animations and transitions to enhance visual interaction.
Use of minimalist design with dark background to highlight content clarity and focus.

HTML

CSS

Contact me

Twitter

Got something to share or discuss? Reach out to me on Twitter and let's connect!

E-mail

Have a question or a collaboration idea? Shoot me an email, and let's start a conversation!

Looking to collaborate or explore new opportunities? Message me on LinkedIn and let's start a conversation!