Ellatronic
Design Portfolio

Blog

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
Patterned Anatomical Heart

This was a project in my Beginning Drawing class I took last semester exploring patterns and line work. The assignment was to choose one (school appropriate) body part and apply a pattern design to it. I chose an anatomical heart since I thought it would be both cute and edgy. 

AnatomicalPatternedHeart.JPG
ArtElla ChiangComment
Visiting SF MOMA

Approaching American Abstraction

The following works are from the Approaching American Abstraction exhibit at SFMOMA, made possible by SFMOMA’s and the Doris and Donald Fisher Collection’s partnership established in 2009. This exhibit features a variety of approaches to abstraction as a form of artistic expression since the 1950s.

 Untitled by Sam Francis (1978)

Untitled by Sam Francis (1978)

Untitled by Sam Francis (1978)

This is a large piece at 122 in. by 78 in., unframed, in an indoor installation at SFMOMA.

The artist started exploring matrices like this acrylic on canvas painting in the 1970s combining intentional brushwork of the indigo grid with uncontrolled red and yellow drips on top of a white background.

The painting could be hung either horizontally or vertically due to the lack of a specific subject or object within the painting. 

The blue and green horizontal and vertical lines also help create white squares in the negative space. This contrasts well with the dark grid making the white squares seem to pop out and the blue and green grid to recede inwards creating an illusion of depth. The use of dark blue and green on white evokes a feeling of the galaxy and the stars while the mix of the orderly grid and the chaotic drips are a sharp yet compelling emphasis. The repetition of the grid pattern down the length of the piece provides unity and a feeling of being trapped under a net or looking through a window - the viewer is separated from what is above.

The dark colors in the grid, while kept orderly within the lines of the grid’s boundaries, also feel free floating and organic within the design. In addition to the outer space metaphor, it also feels like the dark ocean. The viewer is floating deep in the sea, hence so much dark blue, while looking up towards the light through some seaweed represented by the splotches of yellow and green. 

The white squares contrasting with the dark grid make the white squares seem to glow. Looking at a glowing white background is reminiscent of looking at a light covered bulb. The movement of the freeform drips on the white background, mostly in red and dark blue, feel like looking at bacteria floating in a petri dish through a microscope. 

The painting feels orderly yet organic and mystical while scientific. It is a great contrast of many different types, combined with it’s large size makes it a wonder to view.

 Untitled by Sam Francis (1980)

Untitled by Sam Francis (1980)

Untitled by Sam Francis (1980)

This is a similar piece to the previous one. It is also an acrylic paint on canvas and features the intentional brushwork grid with the uncontrolled drips. This one feels more lighthearted and fun due to the use of a light pink in the grid instead of the dark blues and greens in the previous painting. This painting also feels warmer with more use of crimson red and in bigger, larger amounts. The drips are more prominent in this piece and seem to overtake the grid. While the main focal point of the painting seems to be the white canvas square on the center left of the painting.

 Ambi I by Morris Louis (1959-60)

Ambi I by Morris Louis (1959-60)

Ambi I by Morris Louis (1959-60)

Ambi I is acrylic paint on canvas. Louis and a group of artists helped develop Color Field painting which simplified the idea of what is considered a finished painting. The light colored canvas provides a stark contrast with the black paint that is washed over the bright colors. The colors can be seen through or underneathe the black wash. The streaks converging to the midline of the painting with a slight tilt to the center give a feeling of the colors being swallowed up by the black. The long, spike-like black streaks look like sharp, pointed teeth which also contributes to the painting feeling like a mouth eating the colors. There is also a lighter grey color which makes it seem like there is a shadow in the painting creating a feeling of depth or dimension.

 Evidence "I was here", standing in front of the museum.

Evidence "I was here", standing in front of the museum.

ArtElla 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.

App Critique: Yelp
 Yelp's search result page (left) and restaurant information page (right).

Yelp's search result page (left) and restaurant information page (right).

The Target Audience

The target audience is college educated (65.8%), upper income (46.3%), between the ages of 18-54 with the 18-34 demographic and 35-54 demographic being pretty evenly split at 36.5% and 36.7% respectively for 2017 (https://www.yelp.com/factsheet). The interface was recently updated so it feels more cluttered than it used to. However, the users in the target audience are tech savvy and can likely navigate the interface fine. The app uses typical UI elements as explained below. 

Does the content, organization, and navigation make sense for a mobile or touch context?

Yes, the content, organization, and navigation makes sense for mobile. 79% of searches on Yelp were done through a mobile device and 65% of new reviews were written on a mobile device (https://www.yelp.com/factsheet).

Yelp is information heavy and includes both text and photographs. The challenge is displaying all the information in a way that is easy for users to find what they are looking for. Yelp employs many different types of content display and navigation including a top search bar with filters, horizontal sliding collection views embedded inside a table view - this is mostly used to display photos or filters for the search results,  as well as a bottom tab bar for navigation to different sections of the app itself such as nearby, search, profile, activity, etc.

I like, I wish, what if?

I like how Yelp orders reviews by displaying your friends’ reviews first in the list before other users. I am are more likely to trust my friends’ reviews, giving them more weight than reviews of people I don’t know. I also like the cute icons for sandwiches, American, burgers, etc. above the restaurant ads.

I wish Yelp went back to their old search result display where the list of queries shows up first and the ability to toggle to the map view is off in the corner, instead of their current update with the map and list both displayed on the initial search result screen. The map is on the top half of the screen and the list is below it. In most cases, I am searching in an area I am familiar with, and thus do not need the map (or I can look at the map location for a specific restaurant that interests me). I would rather just see the list since it shows a location’s distance (ex: .01 miles) from the user anyways.

What if Yelp hid some of its ancillary content in its UI through dropdown menus or other elements in order to streamline the app and make it feel less overwhelming.

Additional Thoughts

Yelp tries to do too many things at once. It started out as a simple search app for local businesses, but now you can order food off the app, view curated lists of businesses, make reservations, or even save a real-time place in line for a restaurant. There’s also a gamification aspect where users’ check-ins earn them badges. When there are too many features in an app, it can feel cluttered and that the main purpose of the app is diluted. I still use Yelp as my go-to search for restaurants, and I generally just use the search functionality and not the other features.

DesignElla ChiangComment