Showing source for: https://oscarotero.com/
Duration: 0.068904s
Server: Netlify
<!DOCTYPE html>
<html lang="en" class="theme-light"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Óscar Otero - Digital designer and developer</title>
<link rel="alternate" hreflang="gl" href="https://oscarotero.gal/">
<meta property="og:title" content="Óscar Otero - Digital designer and developer">
<meta name="author" content="Óscar Otero">
<meta property="og:locale" content="en">
<meta name="description" content="">
<meta property="og:description" content="">
<meta property="og:url" content="/">
<script type="application/ld+json">
{"url":"https://oscarotero.com/","headline":"Óscar Otero - Web designer and developer","name":"Oscar Otero","author":{"@type":"Person","name":"Oscar Otero"},"description":"I’m just a designer and web developer","@type":"WebSite","@context":"https://schema.org"}
</script>
<link rel="stylesheet" href="/styles.css?cache=1715787224549">
<script type="module" src="/scripts/theme.js?cache=1715787224549"></script>
<link rel="icon" sizes="48x48" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" sizes="any" href="/favicon.svg" type="image/svg+xml">
</head>
<body>
<a href="/" title="Portada" class="logo">
<svg width="48" viewbox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" height="48">
<g stroke="black" stroke-width="3" fill="white">
<circle cx="24" cy="24" r="22"></circle>
<circle cx="24" cy="24" r="10"></circle>
<line x1="32" y1="16" x2="40" y2="8"></line>
</g>
</svg>
</a>
<h1>Hello. <br>I'm Óscar Otero <br>—digital designer</h1>
<h2>Superpowers:</h2>
<ul>
<li>Listen to people.</li>
<li>Divide a complex problem into several smaller and simpler ones.</li>
<li>Communicate with developers and help them to build the best possible
interface.</li>
<li>Combine fonts and colors.</li>
<li>I can code my designs.</li>
</ul>
<h2>Successes:</h2>
<ul>
<li><a href="https://web.archive.org/web/20191203021950/http://v1.anavallasuiza.com/">I had my own design company</a>
with 4 partners for 8 years.</li>
<li>I've been president of the <a href="http://dag.gal">Design Association of Galicia.</a></li>
<li><a href="https://www.academiagalegadoaudiovisual.gal/es/portfolio-item/vii-premios-mestre-mateo/">I won a Mestre Mateo</a>
(Galician Oscar's), and an award at the MIPTV of Cannes without making films
but designing.</li>
<li>I have <a href="https://github.com/oscarotero/Embed"><s>one</s></a>,
<a href="https://github.com/lumeland/lume">two</a> GitHub repositories with more than
1000 stars.</li>
<li>I went to a workshop in Istanbul to teach about open video in English, and be
able to be understood by the students.</li>
<li><a href="https://dag.gal/gl/feed2015/">I've been to a conference</a> with Javier Cañada,
Álvaro Valiño, Raquel Pelta, Pepe Barro and many other great designers,
speaking about web and interactivity.</li>
<li>I've been part of a working group in the PHP-FIG, to work on a new PHP
standard for <a href="https://www.php-fig.org/psr/psr-15/meta/">Http Middlewares</a>.</li>
<li>I was a member of a jury to
<a href="https://www.youtube.com/watch?v=dDnsVNcoiq8">evaluate works</a> submitted by
Spanish national design awards.</li>
</ul>
<h2>Failures:</h2>
<ul>
<li>I created a <a href="http://stylecow.github.io/">CSS processor</a> but it wasn't popular.</li>
<li><a href="https://web.archive.org/web/20191203021950/http://v1.anavallasuiza.com/">I started a company</a>
with other partners but unfortunately, we weren't able to do what we wanted.</li>
<li>I cannot speak excellent English (yet).</li>
<li>After many attempts, I'm not able to make homemade dough bread.</li>
<li>I didn't make a beautiful personal website. But you can see some of my recent
works <a href="/portfolio/">in my portfolio</a>.</li>
</ul>
<hr>
<h2>Things I made:</h2>
<h3>Conxeito</h3>
<p>Newsletter (in the Galician language) about digital design, published during the
Covid confinement. You can access all numbers here:</p>
<ul>
<li><a href="http://eepurl.com/gWhDcn">#001 — Welcome</a> — <em>March 20, 2020</em></li>
<li><a href="http://eepurl.com/gW6GQn">#002 — Web apps today</a> — <em>March 27, 2020</em></li>
<li><a href="http://eepurl.com/gX19yr">#003 — Design principles</a> — <em>April 3, 2020</em></li>
<li><a href="http://eepurl.com/gYFKG5">#004 — About cursors and pointers</a> — <em>April 10,
2020</em></li>
<li><a href="http://eepurl.com/gZwOff">#005 — About design and code</a> — <em>17 de abril, 2020</em></li>
<li><a href="http://eepurl.com/g0jglP">#006 — About subscriptions</a> — <em>April 24, 2020</em></li>
<li><a href="http://eepurl.com/g08xOz">#007 — Specialization and fragmentation</a> — <em>May 1,
2020</em></li>
<li><a href="http://eepurl.com/g10VOz">#008 — Tokens</a> — <em>May 8, 2020</em></li>
<li><a href="http://eepurl.com/g22Uv5">#009 — Web books</a> — <em>May 15, 2020</em></li>
<li><a href="http://eepurl.com/g3JroH">#010 — Methods and tools</a> — <em>May 22, 2020</em></li>
<li><a href="http://eepurl.com/g4Sy01">#011 — About colors</a> — <em>May 29, 2020</em></li>
<li><a href="http://eepurl.com/g5IuWr">#012 — Job to be done</a> — <em>June 5, 2020</em></li>
<li><a href="http://eepurl.com/g6wYW5">#013 — About tools</a> — <em>June 12, 2020</em></li>
<li><a href="http://eepurl.com/g7t9wH">#014 — About Hey</a> — <em>June 19, 2020</em></li>
<li><a href="http://eepurl.com/g8Os_v">#015 — Digital and sustainable</a> — <em>July 3, 2020</em></li>
<li><a href="http://eepurl.com/g_qf1z">#016 — Public design</a> — <em>July 31, 2020</em></li>
<li><a href="http://eepurl.com/hcDGzf">#017 — Internal logotypes</a> — <em>September 11, 2020</em></li>
<li><a href="http://eepurl.com/hfv_U9">#018 — Transformative design</a> — <em>October 18, 2020</em></li>
<li><a href="http://eepurl.com/himrb1">#019 — Static sites</a> — <em>November 15, 2020</em></li>
<li><a href="http://eepurl.com/hnuhJv">#020 — Design for the speech</a> — <em>January 17, 2020</em></li>
</ul>
<h3>HA! redesign</h3>
<p>During the redesign and development of the new web for
<a href="https://historia-arte.com/">HA!</a>, I've documented the whole process in a
collection of posts written in real-time (Galician language):</p>
<ul>
<li><a href="https://medium.com/@misteroom/redese%C3%B1o-ha-parte-1-o-reto-e773e7ad6a43">Part 1 — O reto</a>
— <em>December 18, 2017</em></li>
<li><a href="https://medium.com/@misteroom/redese%C3%B1o-ha-parte-2-tipograf%C3%ADa-2a34ac09dc3c">Part 2 — Tipografía</a>
— <em>January 23, 2018</em></li>
<li><a href="https://medium.com/@misteroom/redese%C3%B1o-ha-parte-3-layout-a73eedea2eaf">Part 3 — Layout</a>
— <em>March 6, 2018</em></li>
<li><a href="https://medium.com/@misteroom/redese%C3%B1o-ha-parte-4-a-cor-70fb7c070fb2">Part 4 — A cor</a>
— <em>March 26, 2018</em></li>
<li><a href="https://medium.com/@misteroom/redese%C3%B1o-ha-parte-5-artigos-2408005fb932">Part 5 — Artigos</a>
— <em>April 23, 2018</em></li>
<li><a href="https://medium.com/@misteroom/redese%C3%B1o-ha-parte-6-artistas-49213653922a">Part 6 — Artistas e navegación</a>
— <em>May 28, 2018</em></li>
<li><a href="https://medium.com/@misteroom/redese%C3%B1o-ha-parte-7-rompendo-algunhas-reglas-333335722946">Part 7 — Rompendo algunhas regras</a>
— <em>July 27, 2018</em></li>
</ul>
<p>This project won several awards:</p>
<ul>
<li><a href="https://www.awwwards.com/mobile-sites/ha">Awwwards — Mobile site of the week</a></li>
<li><a href="https://www.awwwards.com/sites/ha/mobile-excellence-report">Awwwards — Mobile excellence</a></li>
<li><a href="https://www.awwwards.com/sites/ha">Awwwards — Honorable Mention</a></li>
<li><a href="https://premiosclap.org/ganador-730">CLAP 2018 selection — Best graphic design for a
website</a></li>
</ul>
<h3>Ola</h3>
<p>At <strong>marketgoo</strong> I have designed
<a href="https://zeroheight.com/22mjgbuf6/p/56796c-ola">the <strong>Ola</strong> design system,</a> and
have collaborated in the implementation with this
<a href="https://marketgoo.github.io/Ola/">collection of React components</a>, for emails
with <a href="https://github.com/marketgoo/Ola-Emails">a collection of MJML components</a>
and many other internal works that I cannot share currently. This project
started in 2019 and was presented
<a href="https://www.marketgoo.com/blog-post/say-hello-to-ola-design-system/">in this post on the <strong>marketgoo</strong> blog</a>.</p>
<h3>Lume</h3>
<p>In late 2020, I started the <a href="https://lume.land/">Lume project</a>, a static site
generator built on top of Deno and inspired by other generators like Jekyll,
Hugo or Eleventy. I use it for all web projects I work since then.</p>
<ul>
<li><a href="https://lume.land">Lume website</a>.</li>
<li><a href="https://github.com/lumeland/lume">GitHub repository</a>.</li>
<li><a href="https://deno.com/blog/build-a-static-site-with-lume">Guest post in Deno official blog</a>.</li>
</ul>
<h3>Random</h3>
<ul>
<li><a href="http://www.nmtype.com/">NM type</a>: Design and development of the web for this
typographic studio founded by María Ramos (Spain) and Noel Pretorius (Sweden).</li>
<li>Online cheat sheets for <a href="https://oscarotero.com/jquery/">jQuery</a> and
<a href="https://oscarotero.com/deno/">Deno</a></li>
<li><a href="https://github.com/oscarotero/awesome-design">Awesome design</a>: A collection
of open source resources for web designers.</li>
<li><a href="https://oscarotero.github.io/chipi-client/">Chipi</a>: Design and interactive
prototype for a desktop app to search in any service (Slack, Google Docs,
Trello, etc).
(<a href="https://www.sketch.com/s/f46f510c-9f81-432b-be97-8b71d968f526">Sketch prototype</a>,
<a href="https://chipi.io/#/">chipi.io</a>)</li>
<li>I collaborate in the <a href="https://tarugoconf.com">Tarugoconf</a>, by helping to build
the website (made with Lume).</li>
<li>Occasionally, I teach about CSS, HTML and Deno at
<a href="https://hackaboss.com/">Hack a Boss</a></li>
</ul>
<h3>Code</h3>
<p>I love to write HTML/CSS and build or experiment with very under-engineering
solutions. I'm also a strong advocate of open source and maintainer of several
projects like:</p>
<ul>
<li><a href="https://lume.land">Lume</a>, a static site generator for Deno.</li>
<li><a href="https://www.figma.com/community/plugin/1001444625792698603/marketgoo-copies">A plugin for Figma</a>
to work with copies using Google Spreadsheets documents
(<a href="https://github.com/marketgoo/figma-copies">code</a>). Previously I had created
<a href="https://github.com/marketgoo/sketch-copies">the same plugin for Sketch</a>.</li>
<li>Some PHP projects: <a href="https://github.com/middlewares">PHP middlewares</a> (a
collection of PSR-15 HTTP middlewares),
<a href="https://github.com/php-gettext">PHP-Gettext</a>, (a popular PHP library to work
with Gettext), <a href="https://github.com/oscarotero/Embed">Embed</a> (to get info from
any web service or page),
<a href="https://github.com/oscarotero/simple-crud">SimpleCrud</a> (easy and magic CRUD
in SQL databases), <a href="https://github.com/oscarotero/form-manager">FormManager</a>
(to create and validate form data).</li>
<li>Several Node tools like
<a href="https://github.com/oscarotero/node-sketch">node-sketch</a> (read and edit Sketch
documents) and
<a href="https://github.com/oscarotero/keep-a-changelog">keep-a-changelog</a> (parse and
generate changelog files).</li>
<li>Other <em>frontend</em> libraries like
<a href="https://github.com/oom-components/carousel">a carousel</a> (a <em>web component</em> to
create carousels) and
<a href="https://github.com/oom-components/page-loader">page-loader</a> (to load and
create fancy transitions between pages).</li>
</ul>
<hr>
<h2>What am I doing now?</h2>
<ul>
<li>I'm working as <em>product designer</em> at <a href="https://www.marketgoo.com/">marketgoo</a>.</li>
<li>I'm the creator and maintainer, with <strong>Miguel Calvo</strong>, of the
<a href="https://historia-arte.com/">project HA!</a>.</li>
<li>I'm the creator and maintainer of 🔥 <a href="https://lume.land">Lume</a>, a static site
generator for Deno.</li>
</ul>
<hr>
<footer>
<ul>
<li>
<a href="/inspiracion/">
Inspiration
</a>
</li>
<li>
<a href="/notes/">
Notes
</a>
</li>
<li>
<a href="/portfolio/">
Portfolio
</a>
</li>
<li>
<a href="/starred/">
Starred
</a>
</li>
<li>
<a href="/uses/">
The tools I use
</a>
</li>
</ul>
<ul>
<li>
<a href="mailto:[email protected]" title="">
Email
</a>
</li>
<li>
<a href="https://github.com/oscarotero" title="">
Github
</a>
</li>
<li>
<a rel="me" href="https://mastodon.gal/@misteroom" title="">
Mastodon
</a>
</li>
<li>
<a href="https://twitter.com/misteroom" title="">
Twitter
</a>
</li>
<li>
<a href="https://www.linkedin.com/in/misteroom/" title="">
LinkedIn
</a>
</li>
</ul>
<p>
<small>© Óscar Otero, 2023.<br>
Thanks to Marcos Dopico for the font <a href="http://maistypes.com/">Atlantica Serif</a>.</small>
</p>
</footer>
<theme-switcher><theme-switcher>
</theme-switcher></theme-switcher></body></html>