{"id":313,"date":"2019-12-23T16:30:49","date_gmt":"2019-12-23T16:30:49","guid":{"rendered":"https:\/\/www.antpace.com\/blog\/?p=313"},"modified":"2025-08-25T14:00:31","modified_gmt":"2025-08-25T14:00:31","slug":"design-for-programmers","status":"publish","type":"post","link":"https:\/\/www.antpace.com\/blog\/design-for-programmers\/","title":{"rendered":"Design for Programmers"},"content":{"rendered":"<h2>Design<\/h2>\n<p>As programmers, we are creators and innovators. Design should mean more to us than just software architecture and &#8220;API design.&#8221; Graphic design, UI and user experience play a role in what we deliver as digital creators<\/p>\n<ul>\n<li>The importance of typography cannot be understated in design.\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Readability &#8211; cursive and serifs for headings; san-serif for body text<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Choosing font pairs is essential to ensure consistency and visual appeal.<\/li>\n<\/ul>\n<p>When I first started doing freelance work (circa 2007) I was mostly a programmer, and had a hard learning curve for design. I made the mistake of randomly selecting unrelated fonts and slapping them together. One time, I designed ugly (in retrospect; at the time, I thought they were amazing) looking business cards for myself. I order 10,000 of them! I remember I ordered them from GotPrint.net after watching a YouTube video recommendation.<\/p>\n<figure id=\"attachment_1983\" aria-describedby=\"caption-attachment-1983\" style=\"width: 3000px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1983\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/business-cards-antpace-2008.jpg\" alt=\"AntPace.com business cards from 2008\" width=\"3000\" height=\"4000\" \/><figcaption id=\"caption-attachment-1983\" class=\"wp-caption-text\">AntPace.com business cards from 2008<\/figcaption><\/figure>\n<p>I got through maybe one thousand of them, ever. Until recently, I still had boxes of them stored in my parent&#8217;s basement, back in the Bronx. I keep a few in my archives just for memories.<\/p>\n<ul>\n<li>Subtle background patterns can enhance a design. For an example, checkout <a href=\"https:\/\/www.antpace.com\/\">this website&#8217;s homepage<\/a>.<\/li>\n<\/ul>\n<figure id=\"attachment_1997\" aria-describedby=\"caption-attachment-1997\" style=\"width: 1457px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-1997\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/antpace.com-design.png\" alt=\"AntPace.com homepage\" width=\"1457\" height=\"906\" \/><figcaption id=\"caption-attachment-1997\" class=\"wp-caption-text\">A subtle background pattern<\/figcaption><\/figure>\n<ul>\n<li>Using an image as a background, especially if it&#8217;s blurred or darkened and turned black &amp; white, can create a stunning visual effect.<\/li>\n<li>Adding icons to a heading is a way to make a design look more &#8220;finished&#8221;<\/li>\n<li>Using a white font with a semi-transparent black layer on top of the image background can make the text pop out and increase readability.\n<ul>\n<li>I can achieve this effect using the GIMP. Once I have an image open, I add a new layer on top. I fill that layer all black. Finally, I lower the opacity of that layer to about 50%.\u00a0 You can see examples of this on <a href=\"https:\/\/www.splitwit.com\/\">www.SplitWit.com<\/a><\/li>\n<li>I can use CSS to add a transparent shadow to a div that has a background image (that is what I use on <a href=\"https:\/\/www.antpace.com\/portfolio\/\">my portfolio page<\/a>):<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<pre>&lt;style&gt;\n\t.semi-trans-bg::before {\n\t  content: \"\";\n\t  position: absolute;\n\t  top: 0;\n\t  right: 0;\n\t  bottom: 0;\n\t  left: 0;\n\t  background-color: rgba(0, 0, 0, 0.5); \/* Black with 50% opacity *\/\n\t}\n\t.semi-trans-bg p{\n\t   z-index: 1;\n\t   position: relative;\n\t}\n&lt;\/style&gt;<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1994\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/splitwit-graphic-design.png\" alt=\"SplitWit homepage design\" width=\"1380\" height=\"907\" \/><\/p>\n<ul>\n<li>For website design, the navigation often incorporates a <a href=\"https:\/\/www.antpace.com\/blog\/easy-hamburger-menu\/\">hamburger menu for a cleaner look<\/a>.<\/li>\n<li>When considering a logo, decide between using just text or incorporating an image for branding. Consider the &#8220;Anthony Pace&#8221; logo on this website.\n<ul>\n<li>When design my own textual logo, the techniques I found most useful: kearning (letter spacing), drop shadows, and lighting effects.<\/li>\n<li><a href=\"https:\/\/www.antpace.com\/blog\/top-3-graphic-design-apps-for-social-media-marketing\/\">Using apps such as Canva<\/a> makes it fun and easy. Is AI and automatic tooling replacing designers?<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>The logo that I use for this website (check the top-left menu, or my homepage&#8217;s hero space) has went through numerous iterations. I built it using the GIMP (which has been my tool of choice for over twenty years. I first started using it around 2002- and that&#8217;s when I learned that opacity is the opposite of transparency).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1989\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/gimp.png\" alt=\"The GIMP\" width=\"1606\" height=\"599\" \/><\/p>\n<p><em>#todo: Add GIMP tutorials for techniques I often use. ie, Images with Text on top; The importance of padding.<\/em><\/p>\n<p>An important typography technique I leveraged was kearning. I adjusted the spacing between the letters in my last name &#8220;PACE&#8221; to make it wider, and I used all capital letters. This gave it a sturdy feeling (something which I meant to convey).\u00a0 This formed a strong base for &#8220;Anthony&#8221; to balance on top of.<\/p>\n<p>Each letter has a subtle drop-shadow, just barely noticeable, giving a *pop*. And the text center (check the &#8220;h&#8221; in &#8220;Anthony&#8221;) has a lighting effect (in GIMP, &#8220;Filters&#8221; -&gt; &#8220;Light and Shadow&#8221; -&gt; &#8220;Lighting effects&#8230;&#8221;) that draws attention.<\/p>\n<p>Originally, the text logo (referred to as &#8220;wordmark&#8221; or &#8220;logotype&#8221;) I use today (circa 2024) was displayed next to a circled &#8220;A&#8221; (that I now use as the site&#8217;s favicon). Separating those two elements was a simplification that added a feeling of professionalism to my brand.<\/p>\n<p><strong>Pro-tip:<\/strong> Padding and whitespace is your friend. Avoid letting things look cramped &#8211; give your UI elements plenty of space to breathe.<\/p>\n<p>You can see me employ some of these ideas on the YouTube screen recording embedded below. You&#8217;ll notice that in this version of GIMP (2024) to access the &#8220;alignment tool&#8221;, I need to first select the &#8220;move&#8221; tool, and then press &#8220;q&#8221; on the keyboard.<\/p>\n<p><iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/qaxGvxJ2RlY?si=c3GlPKp9-TvPHoqv\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>This same concept was stylized into many other renditions (see below). The fonts I used: <em>Pacifico, Exo, Roboto<\/em>. You can find artifacts of this throughout <em>www.AntPace.com<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_1981\" aria-describedby=\"caption-attachment-1981\" style=\"width: 660px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1981 size-full\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/antpace-blog.png\" alt=\"Ant Pace Weblog\" width=\"660\" height=\"414\" \/><figcaption id=\"caption-attachment-1981\" class=\"wp-caption-text\">A legacy logo design from this website<\/figcaption><\/figure>\n<figure id=\"attachment_2202\" aria-describedby=\"caption-attachment-2202\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2202 size-full\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/slider3.png\" alt=\"mobile software and marketing\" width=\"640\" height=\"300\" \/><figcaption id=\"caption-attachment-2202\" class=\"wp-caption-text\">A design asset for my freelance business<\/figcaption><\/figure>\n<figure id=\"attachment_2203\" aria-describedby=\"caption-attachment-2203\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2203 size-full\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/slider2.png\" alt=\"Web Design and Development\" width=\"640\" height=\"300\" \/><figcaption id=\"caption-attachment-2203\" class=\"wp-caption-text\">I enjoy the outer space theme throughout AntPace.com<\/figcaption><\/figure>\n<figure id=\"attachment_2204\" aria-describedby=\"caption-attachment-2204\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2204 size-full\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/slider1.png\" alt=\"Anthony Pace Cover Art\" width=\"640\" height=\"634\" \/><figcaption id=\"caption-attachment-2204\" class=\"wp-caption-text\">This was originally created in the GIMP and used stock imagery<\/figcaption><\/figure>\n<figure id=\"attachment_2010\" aria-describedby=\"caption-attachment-2010\" style=\"width: 660px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2010 size-full\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2019\/12\/anthony-pace-blog.png\" alt=\"Anthony Pace Blog Logo\" width=\"660\" height=\"414\" \/><figcaption id=\"caption-attachment-2010\" class=\"wp-caption-text\">At first, I wasn&#8217;t sure if my blog and main site should have different brand identities<\/figcaption><\/figure>\n<p>To taste more of my design sense, <a href=\"https:\/\/www.antpace.com\/portfolio\/\">check out my portfolio<\/a>.<\/p>\n<p>Libraries &amp; other resources: FontAwesome, Bootstrap CSS, <a href=\"https:\/\/www.transparenttextures.com\/\" target=\"_blank\" rel=\"noopener\">TransparentTextures.com<\/a>, <a href=\"https:\/\/videoplasty.com\/\" target=\"_blank\" rel=\"noopener\">Stock Animation Clips at VideoPlasty<\/a><\/p>\n<h2>CLI design tools for programmers<\/h2>\n<p>The command line is a place where engineering and design blend like peanut butter and chocolate.<\/p>\n<ol>\n<li><a href=\"https:\/\/www.antpace.com\/blog\/convert-images-to-webp-to-improve-website-performance\/\">Bulk converting images to a new format<\/a><\/li>\n<li><a href=\"https:\/\/www.antpace.com\/blog\/identify-unused-image-files-in-a-code-project\/\">Identify unused image files in a code project<\/a><\/li>\n<li><a href=\"https:\/\/www.antpace.com\/blog\/managing-content-for-an-art-website\/\">Batch renaming and resizing image files<\/a><\/li>\n<\/ol>\n<h2>Creativity<\/h2>\n<p><a href=\"https:\/\/www.antpace.com\/blog\/managing-content-for-an-art-website\/\">In another post, I highlighted solutions I used to manage a large amount of content for a client project<\/a>. I leveraged existing features and technology to achieve results in a unique way. Another way to put it:\u00a0I used technical knowledge to overcome a problem, creatively. Some other examples of creative solutions include:<\/p>\n<p>1)\u00a0Using an existing CSS feature to deliver a better or unique user experience. When applying animations and effects, the possibilities seem limitless.<\/p>\n<p>2) A doctor prescribing a drug, off label, to treat a problem for which it wasn&#8217;t originally intended.<\/p>\n<p>3) A trained athlete combining existing techniques into a unique style.<\/p>\n<p>Although creative, these examples aren&#8217;t innovative. Innovation creates something new and moves the world forward. It creates new products, new industries, and new markets. It takes existing concepts and rearranges them to fit a unique pattern.<\/p>\n<p>An outlet for my design creativity is the featured images used for each of my blog posts. Take a minute to scroll through them on my blog&#8217;s homepage. I usually take existing screenshots relevant to a piece&#8217;s subject matter, and juxtapose them against a desktop background. Sometimes, I create collages from random camera photos saved from old phones too.<\/p>\n<h2>Innovation<\/h2>\n<p>Innovation changes the space in which you&#8217;re working. In the next decade I will focus on that kind of growth, and expand past client-specific work. As a broad stroke, this means building digital products. Specifically, I&#8217;ll be taking the opportunity to solve problems in certain areas. Luckily, there are many exciting problems that need solving.<\/p>\n<p>Innovative solutions require energy &#8211; and here are some places I&#8217;d like to spend mine.<\/p>\n<p>1) Digital accessibility, and solving technology problems for people with disabilities. This will include software, as well as physical products. I&#8217;d like to explore how IOT, wearables, and augmented\/virtual reality can be leveraged.<\/p>\n<p>2)\u00a0Privacy. This issue also seems to include homelessness, the justice system, and personal identity.<\/p>\n<p>3) Business and marketing. These solutions are important, because I can re-use them as tools in other ventures. They can be leveraged to solve other important problems.<\/p>\n<h2>Working with Designers (as a programmer)<\/h2>\n<p>Receiving designs that don&#8217;t scale. Not having explicit designs for CSS break-points. Working with Figma. Using your best judgment as a front-end engineer.<\/p>\n<p><em>* This post, like all of my blog entries, is a work-in-progress.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Design As programmers, we are creators and innovators. Design should mean more to us than just software architecture and &#8220;API design.&#8221; Graphic design, UI and user experience play a role in what we deliver as digital creators The importance of typography cannot be understated in design. Readability &#8211; cursive and serifs for headings; san-serif for &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.antpace.com\/blog\/design-for-programmers\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Design for Programmers&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5],"tags":[22,33,37,55,78,133],"class_list":["post-313","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","category-web-development","tag-cli","tag-css","tag-design","tag-frontend","tag-logo","tag-ui"],"_links":{"self":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/comments?post=313"}],"version-history":[{"count":1,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions"}],"predecessor-version":[{"id":3160,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/313\/revisions\/3160"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media\/3159"}],"wp:attachment":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media?parent=313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/categories?post=313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/tags?post=313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}