Ellatronic
Design Portfolio

Blog

Posts in Design
Daily UI: 002

So, much quicker this time. I think the first challenge took about three days and this time, I got it down to two. Hooray! I also felt more confident going into this one following the steps that I outlined in the previous post which was basically:

  1. Brainstorm requirements

  2. Select topic

  3. Sketch layout

  4. Choose visuals

002-CreditCardCheckout.png

I feel more confident creating gradients now, and much quicker than I used to be. Perhaps next time I’ll try something more complex than the basic linear gradient. I’m also more pleased with how this one turned out than the previous post.

Daily UI: 001

So, I completed the first one. Yay! After that experience, I learned how much I appreciate having more constraints around what I’m designing. For example, with this sign up screen, there are questions like:

  • What product am I signing up for?

  • What are the required fields?

  • What font and colors do I want to use?

At work, we have a design system, so a number of those more detailed decisions like font and color are already predefined. Also, the product is defined. So the process feels a little less nebulous than being basically wide open like this challenge.

SignUp.png

I also learned it would be useful if I had a design process for these challenges as well. Something along the lines of:

  1. Brainstorm what I want to include on the screen. Ex: text, inputs, etc.

  2. Choose a topic/product type.

  3. Sketch layouts and ideas.

  4. Choose a font and color palette.

I’ll try out this formula on the next one and see if that helps since I definitely took longer than a day on this (three days to be exact).

Daily UI: 000
 
000-Intro.png
 

So I’ve decided to do the Daily UI Challenge in an effort to up-skill and also as a creative outlet. It’s something I heard about several years ago and something I’ve been thinking about doing for probably just as long. So finally, what better time than the present to start?

My goals for this challenge are:

  • Speed. Getting faster at producing ideas and designs.

  • Knowledge. Building a repertoire of UI patterns, styles, and components from exploring different examples and experimenting with different layouts, color, type, etc.

  • Skills. Learning different techniques, styles, and ways of creating.

  • Letting go of perfectionism. Keeping to a deadline and knowing when something is good enough for this current iteration.

So tomorrow will be the first day of the challenge and I’m excited to see the progress throughout this experience.

Have you done the Daily UI Challenge? What did you learn from it?

Hanging Punctuation

I read this article the other day about hanging punctuation. Hanging punctuation allows the text on the left side to flow uninterrupted by placing the bullets in the gutter.

HangingPunctuationv2.0.png

To be honest, I don't remember ever seeing hanging bullets. This may be because I do the majority of my reading on screens either through a browser or an e-reader rather than print. Plus, growing up on MS Word, which uses the indented bullets, I just assumed that was the normal way for bulleted lists to look.

However, now that I've seen hanging bullets, I like how it creates a straight line on the left side of the text which looks cleaner and more pleasant.

DesignElla ChiangComment
How To Add a Sidebar to Squarespace

I found and installed a super awesome sidebar plugin for Squarespace. I use Squarespace for my website and the theme I have, Jasper, does not come with a sidebar for the blog section.

The plugin works by using an unlinked page and importing that content onto your desired blog list/post pages.

Start by creating an unlinked page named sidebar. This is where the desired sidebar content is added. It's super easy to do since it's just a regular page but skinnier (default 260px, or however you want to set your sidebar width to), so you have all the same Squarespace blocks. Add the plugin's css and js as unlinked files in your Squarespace dashboard. Then paste some code into the Code Injection sections for your blog.

The plugin is easy to set up and there's step by step video instructions. The plugin costs $50 and it's a more satisfying solution than any workarounds I encountered. The first workaround is changing my Squarespace theme to one that supports a blog sidebar. After spending a month and a half customizing my current theme, I am not about to change themes now.

The second is creating a page with a fake sidebar by using a two column 3/4 + 1/4 layout and placing the sidebar content in the 1/4 section. Then using a summary block for the blog excerpts. With this second option, the fake sidebar would not show up on every blog post without manually creating it nor is there the ability to click Next or Previous to see more blog posts.

Desktop Layout

Using the plugin: how the sidebar looks alongside a blog post.

Using the plugin: how the sidebar looks alongside a blog post.

 

Customizations

Following the installation instructions, I added a 50px margin-top in addition to the default 30px margin-left. This is so the top of my photo will be lower than the top of the blog post date.

Then I made one small change to the code to remove the margin around the sidebar when viewed on a mobile device (or a device under 767px). I simply added the following media query to the bottom of the plugin-sidebar.css file.

@media (max-width: 767px) {
  .sidebar__inner {
    margin: auto;
  }
}
 

The change on mobile

Before (left) and after (right) setting the margin to auto. The difference is subtle.

Before (left) and after (right) setting the margin to auto. The difference is subtle.