Black Swan
This is a fictional project. It's based on this UI template. (If you select preview, and scroll down, you'll see it.) In a way, this whole page is the project. A meta project, if you will.
Every section, images and styling you see here is inside a rich text format. This means that everything that you see here is done through a powerful text editor that lets you add all sorts of content. There's no coding, shortcodes or css hacks involved for the editor.
In a way, this whole page is the project. A meta project, if you will.
THE RESEARCH
I was looking for a powerful CMS that can handle fully custom content models. One of the main challenges was, "How can I create a section with two columns?".
Designing this in Contentful was hard because I was limited to 25 content models. You can hit that quota pretty fast. And the fact that it's a document, every time you add a custom block to your rich text, it gets added to your data limit.
In Sanity, this was easy. There's no limit on the number of content models and everything didn't have to be a document.
I can create a section block dedicated only for text. Throw in a field for the number of column I want and then it's up to my Gatsby frontend to render this in columns.
THE PROCESS
As Wiki states, a Duotone is a halftone reproduction of an image that brings out its middle tones and highlights. Blue, brown, red and yellow are considered to be the everyday choices. However when it comes to enthusiastic web designers, there is no such thing as common or dominant. As the past several months show, numerous vibrant shades from purple to green are implemented to achieve this incredible effect.
The creatives mix and match different tones even those that are barely conformable.
Trip screen
This a section that have multiple layouts. I can have the text on the left instead. I can also move the image's position from left, right or center relative to it's current layout.
By default, the height of this section is dependent on the text, and the image's height will adapt to it. However, I can also set it so we can see the image's full height right away.
WACOM
This is the same section as the above, but in a different layout.
Did you know you can have nested rich text in Sanity? It's how I can add this table below!
SPECIFICATIONS
Project: | Semister Darwin & Partners |
Size: | 180 x 240 x 520 |
Resolution: | 2048 x 1536 |
Year: | 2016 |
The gallery you will see below uses react-image-gallery. It's the best library out there that implements the Google Images grid algorithm.
These colors set the stage for how everything else works. They are often part of the background, provide a warm or cool feel for the project and contribute to overall navigation and usability though typography and other directional cues.
THE PROCESS
The biggest event of the year for creatives from all across the country. Be there as the design community comes together for provocative speakers, nightly networking receptions.
Bring your site to life with stunning animations and modern design elements.
These variations change the saturation of color and give you variance within a palette. When it comes to creating color combinations tints, tones, and shades are often used to expand a palette beyond two or three colors, so that all the hues are in the same family.