This is a post title

Written by Author Name on

I have always considered myself a “designer who codes”. I enjoy that aspect of the web, even while in a purely visual design role.

Not too long ago, in a previous visual design position I was in, I had a manager refer to me as a code “dabbler”. This actually offended me. Surely countless hours spent reading books, doing tutorials, hacking away, building websites makes me more than a “dabbler”? I thought to myself, I am not a “dabbler”, I am a unicorn! 1

Proof of this unicorniness? I packed up my design and code skills, and found a new work home at Cloud Four, haven to unicorns just like myself. Everyone at Cloud Four is a kind of unicorn… magnificent designing developers and developing designers.

Proof of this unicorniness? I packed up my design and code skills, and found a new work home at Cloud Four, haven to unicorns just like myself. Everyone at Cloud Four is a kind of unicorn… magnificent designing developers and developing designers.

But after a few months of having my code reviewed by my fellow unicorns, I felt less like a magnificent unicorn and more like this:

ugly unicorn

Working in code every day has given me a new perspective… I am an Ugly Unicorn.

I found myself spending little to no time in photoshop or sketch and jumping into the deep end of pattern libraries and prototypes. For the first time I was working on a team, submitting code, using git and creating pull requests.

And lists were in this quote, too…

  • Look, a list item
  • Quick, there's another

Here is a little how that went:

PR comment

Yikes. I kept hearing the those words echo through my head: .code dabbler <code dabbler> .code dabbler. Over the last year I have been waiting for an “ah-ha” moment where things would click and I would feel super comfortable and confident in my skill set, that really hasn’t been the case.

.Sky--clouds {
  background-image: url("/images/sandbox/clouds-alt.svg");
  background-position: -60% bottom;
  background-repeat: repeat-x;
  background-size: calc(420 / 16em * 1.25);
  content: "Whut?" !important;
  padding-bottom: calc(24 / 16em * 1.25);
}

@media (min-width: 1337px) {
  p > b > a {
    content: "Terrible selector! :(";
  }
}
$font-stack: sans-serif;
$primary-color: #333;

@mixin reset-type() {
  font: 100% $font-stack;
  color: $primary-color;
}
<ul class="Example">
  {{#each items 'another' hashValue=false}}
    <li>Whoa!!</li>
  {{/each}}
</ul>
// Sweet useless condition
if (this !== 'that' || truth == false) {
  new RegExp(/ab+c/, 'i');
  boyHowdy(5, 'something');
  return 2 * 4 / 3;
}

class Bread {
  constructor (slices) {
    this.slices = 12;
  }
}
function lyzadotcom_custom_loop($args)
{
    global $wp_query;
    global $post;
    $post_template_dir          = 'post_templates';
    /* The 'template' element should be the name of the PHP template file
       to use for rendering the matching posts. It should be the name of file,
       without path and without '.php' extension. e.g. the default value 'default'
       is $post_template_dir/default.php
    */
    $defaults                   = Array('template' => 'default' );

    $opts = wp_parse_args($args, $defaults);

    // Bring arguments into local scope, vars prefixed with $loop_
    extract($opts, EXTR_PREFIX_ALL, 'loop');

    // Preserve the current query object and the current global post before messing around.
    $temp_query = clone $wp_query;
    $temp_post  = clone $post;

    $template_path = sprintf('%s/%s/%s.php', dirname(__FILE__), $post_template_dir, $loop_template);

    if(!file_exists($template_path))
    {
        printf ('<p class="error">Sorry, the template you are trying to use ("%s") in %s() does not exist (%s).',
            $template,
            __FUNCTION__,
            __FILE__);
        return false;
    }
    /* Allow for display of posts in order passed in post__in array
       [as the 'orderby' arg doesn't seem to work consistently without giving it some help]
       If 'post__in' is in args and 'orderby' is set to 'none', just grab those posts,
       in the order provided in the 'post__in' array.
    */
    if($loop_orderby && $loop_orderby == 'none' && $loop_post__in)
    {
        foreach($loop_post__in as $post_id)
            $loop_posts[] = get_post($post_id);
    }
    else
        $loop_posts = query_posts($args);

    /* Utility vars for the loop; in scope in included template */
    $loop_count             = 0;
    $loop_odd               = false;
    $loop_even              = false;
    $loop_first             = true;
    $loop_last              = false;
    $loop_css_class         = '';                               // For convenience
    $loop_size = sizeof($loop_posts);
    $loop_owner = $temp_post;       /* The context from within this loop is called
                                       the global $post before we query */

    foreach($loop_posts as $post)
    {
        $loop_count += 1;
        ($loop_count % 2 == 0) ? $loop_even = true : $loop_even = false;
        ($loop_count % 2 == 1) ? $loop_odd  = true : $loop_odd  = false;
        ($loop_count == 1) ?     $loop_first = true : $loop_first = false;
        ($loop_count == $loop_size) ? $loop_last = true : $loop_last = false;
        ($loop_even) ? $loop_css_class = 'even' : $loop_class = 'odd';
        setup_postdata($post);
        include($template_path);
    }
    $wp_query = clone $temp_query;  // Put the displaced query and post back into global scope
    $post = clone $temp_post;       // And set up the post for use.
    setup_postdata($post);
    return $loop_posts;
}
{
  "name": "Cloud Four",
  "short_name": "Cloud Four",
  "description": "We design and develop responsive websites and progressive web apps.",
  "icons": [
    {
      "src": "\/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png"
    },
    {
      "src": "\/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image\/png"
    }
  ],
  "theme_color": "#456BD9",
  "background_color": "#456BD9",
  "display": "standalone",
  "orientation": "natural",
  "start_url": "/",
  "gcm_sender_id": "482941778795",
  "example_bool": true,
  "example_integer": 42,
  "example_float": 1.337
}

As someone who knows a little code,2 it’s easy to be like, “Hey, just learn to code”. However, stepping out of your knowledge base and comfort zone can be a scary place. It can even be daunting just knowing where to begin.

This is a left-aligned image

Some designers I have talked to are straight up hostile when the idea of having to learn to code is mentioned. One designer friend of mine was appalled at the idea that now after having invested so much time, energy and money into her design education she would additionally have to learn to code. What I wanted to say to my friend, and also what I should remind myself of at times is that, it is going to be okay. You do not have to become a developer.

A Narwhal is the unicorn of the sea.

It’s not about being an expert at both design and development. You will always have a strong leaning towards one or the other. I will always be a designer first. I will never look at something and not want to make it beautiful. Also, there are developers out there that not only can see and appreciate design, but can put together typographic systems and pick amazing color palettes, however, at their core they are developers. People have their natural strengths, but that doesn't preclude them from having other talents and appreciations.

Here is a right-aligned image

When I look at a problem, it will always be from the perspective of a designer. I like to solve the big problem, piecing the code together to get my idea out as quickly as possible. Then I worry about making the code better later. The main point is getting the design, or the experience out of my head and into the browser, where I can squish my screen, or pull it up on my phone. I don’t have to be an amazing developer, or a decent developer or even developer at all. I just need the tools necessary to realize my vision for the design problem I am trying to solve.

I like to look at having technical skills the same way I would look at having presentation skills. Or project management, writing, and concepting skills. We are not just pixel pushers, we are designers. We are complex thinkers, makers and problem solvers. That goes way beyond just the presentation layer of a design. It’s about a breadth of knowledge that informs your creative process. Code informing visual design. And vice versa, visual design informing the code.

I don’t believe there are natural born unicorns

People are not just magically amazing designers and awesome developers. I do believe in the constant and perpetual learner. What being a unicorn is really about is just having a hunger for knowing more. Not stopping at just enough knowledge. Unicorns are just people who are curious. You show me a unicorn, and I see someone who likes to learn not just about their own discipline, but also the ones that overlap theirs.

Some practical advice from an Ugly Unicorn

You don’t have to become a developer, it’s about getting your idea out.
  • A basic knowledge of HTML and CSS is enough to start designing in-browser.
  • Start a CodePen account.
  • Bookmark and save plugins that can help you prototype quickly.

Be okay with feeling like you kinda suck, or feeling uncomfortable. Embrace being an ugly unicorn. Even though it feels weird and messy stepping out of your pixel-pushing comfort zone, you will ultimately be embracing the responsive web.

Footnotes

  1. A unicorn is someone who can perform the tasks of a UX Designer/Architect, Visual Designer and Developer (typically front-end).
  2. Otherwise known as a super smug person who considers themselves a unicorn.

Responsive Images 101 Series

  1. Definitions
  2. Img Required
  3. Srcset Display Density
  4. Srcset Width Descriptors
  5. Sizes
  6. Picture Element
  7. Type
  8. CSS Responsive Images
  9. Image breakpoints
  10. Currently Viewing: Conclusion
Author Name

Author Name has an author bio. HTML elements can be within it. It should be relatively short. It should contain some links, possibly pointing to a @twitter profile or maybe a website.

Comments

Add a comment

Keytar McSweeney's Williamsburg, readymade leggings try hard 90's street art letterpress hoodie occupy Wes Anderson Banksy. Asymmetrical viral letterpress, McSweeney's seitan 3 wolf moon drinking vinegar sartorial pour-over messenger bag photo booth umami next level craft beer.

Craig Little

Reply

Replies

Tofu photo booth American Apparel, cliche brunch swag freegan lomo retro cray Vice gastropub post-ironic +1 pickled.

Marfa Tonx next level, Banksy lo-fi vegan pop-up chia small batch DIY seitan asymmetrical viral. Disrupt salvia bespoke craft beer master cleanse. Butcher cornhole gentrify pop-up, raw denim viral literally.

Fixie tote bag ethnic keytar. Neutra vinyl American Apparel kale chips tofu art party, cardigan raw denim quinoa. Cray paleo tattooed, Truffaut skateboard street art PBR jean shorts Shoreditch farm-to-table Austin lo-fi Odd Future occupy.

Dreamcatcher locavore iPhone chillwave, occupy trust fund slow-carb distillery art party narwhal.

Ennui shabby chic Brooklyn, fanny pack direct trade Tumblr tattooed retro polaroid deep v chia vinyl Austin Tonx food truck. Literally ugh umami, pickled jean shorts Wes Anderson letterpress. Banjo Tonx beard biodiese.

Patricia Schultz

Reply

Chambray mustache cray migas, man bun meggings affogato synth pitchfork gastropub ethical fixie pabst food truck.

Poutine cred blue bottle selvage, everyday carry tote bag trust fund aesthetic portland dreamcatcher flexitarian mumblecore church-key selfies. Readymade everyday carry etsy next level, fashion axe DIY neutra farm-to-table gluten-free offal kinfolk.

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us