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. 

Icing: Single Page Web Design

This single page website was a quick exercise for my web design class while learning how to use Adobe Muse.

Icing is a bakery with a feminine and fun appeal. I chose pastels and pinks for the color palette. It was incredibly fun to work with a palette that personally resonated to me as well as beautiful imagery.

Photo Credits:

Alison Marras, Heather Schwartz, Jasmine Waheed on Unsplash
Spencer Selover, Bruce Mars from Pexels

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)

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 its large size makes it a wonder to view.

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

How to add a sidebar to Squarespace

* This is an old post from 2018. Things may have changed since then.

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.

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.

App Critique: Wünderlist

Wünderlist’s main list screen (left) and to-do item screen (right).

The Target Audience 

The target audience are people who are technically savvy and want to use a to-do list app on their mobile device to keep track of their tasks. The demographic probably skews younger in the 22-39 range. Wunderlist’s design is appropriate for their target audience since they offer advanced features like conversations and shared lists in addition to the typical features a user would expect of a to-do list. The advanced features require more familiarity and integration with technology, such as syncing with a Google account.

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

Yes, navigation is touch based, relying mostly on taps and swipes. Positioning of the Add button is in the bottom center which is an easy position for the user to tap with their thumb. There’s the standard swipe left to delete function as well. Taps on different areas of a to-do list item also offers different functionality: tapping the checkbox checks or unchecks the item, tapping in the center of the list item brings up a more detailed screen where the user can edit their list item or add subtasks, tapping to the right side stars/favorites the item for easier sorting and viewing.

I like, I wish, what if?

I like using a to-do list app over traditional paper and pen for recurring tasks. It’s so easy to set up a recurring task and customize how often the task should recur. The organization of the app is also simple and clean allowing for groups of lists and folders.

I wish the app continually auto-sorted tasks by the user’s preferences. For example, I frequently choose to sort my tasks by due date, however, if I add a new task, that tasks just goes to the top of the list instead of in the proper spot according to its due date. I need to manually re-apply the sort by due date filter if I would like the new task sorted by it’s due date rather than added at the top.

What if Wünderlist allowed more user customization for the visual design? Wünderlist currently allows users to choose from a limited set of preset themes that changes the background and color of the UI elements. It would be nice if the user could choose their own colors for more customization or import their own photos to use as a background.

Additional Thoughts

The visual design is nice for the app’s functionality - essentially a list of items - so form follows function. The navigation and user flow is also standard, making use of the back button in the upper left corner to navigate to previous screens and using taps on the to-do list items to navigate forward into more detailed screens.