Full-Stack Design: Flask and React
By: Spencer Porter
Tags: React, Web Development, Web Design, Flask, Python

Replicating the Design

Photo by UX Store on Unsplash

Our first step in getting started is extracting the various media elements of the page. Since we don’t have access to any of the original images or fonts the designer used, we’ll have to improvise.

Getting the Images

I used Figma to extract the images by importing the design photo and creating copies. Then I isolated each image within a frame, clipping the excess portions and exporting the frame. For the icon in the header I simply recreated it with the arrow and circle shape tool.

Identifying the fonts

Up next is finding the fonts (or close enough substitutes).

I was able to use the Font Squirrel matcherator to approximate them, with New Renaissance Regular being the closest for the header and TextBook Regular as the body.

Putting it together

Now that I had the media elements, I could start to mock up my own versions of the design.

With the original image I used a mix of Golden Ratio theory and eye-balling to match up the dimensions and layout. The image and body seemed to use the same proportions as the distances between the header/title and the body/secondary image, making things a little easier.

Mobile Friendly

Once I had finished with the desktop layout, it needed be adapted for mobile. Unfortunately the current design doesn’t work well for a straight 1:1 reduction in size.

The whole thing had a very college brochure vibe to it, so I tried to carry that into the mobile display.

With the imagery and font being the key parts of the design, I wanted to be sure that they maintained focus on smaller screens.

I adapted the image as a header background, attaching a semi-transparent black filter over top to allow for a greater contrast with a white font.

The slight indentation of the title helps provide a greater visual prominence from it’s surrounding elements as a cue for the user.

Underneath the header, I used a similar alignment pattern to keep a visual guideline between title and body elements.

Creating The Grid

Full disclosure: I do not like making CSS grids from scratch. Early on I tried to find the easy way out to get around having the make them myself, and I’ve stuck with them to this day.

I subdivided the layout as you can see to the left, and copied the CSS/HTML to act as the baseline for the site.

Development Time

With the Figma designs, media files and Grid in hand, I then started into creating the site itself. I used Flask and React out of personal habit, but you could easily deploy this as a static site on Github Pages/S3 if you were so inclined. If you wanted to learn more about how to create a site using Flask+React, be sure to check out my other tutorials. I also uploaded my static images to S3 to have them available to quickly hook in.

I created a fonts folder along with a stylesheet to import them in the /dist folder and linked to it in the index.html file.

In the stylesheet I setup the grid inside a media query with a minimum width of 600px, and created another media query set at a max width of 600px for the mobile version.

With that done, we can now create the skeleton of the page. In App.jsx, create a series of divs with class names corresponding to the grid divisions we created in the previous step. The image needs to be able to resize gracefully, so we can set it as a cover based background image in the div. Then within each section we can place the title, paragraph and image tags for the content.

On the note of resizing: we want to ensure that the left-hand image is the only portion that is condensed, so that the spacing between text elements doesn’t become overwhelmed. Setting the body div to a static width of 600px will allow us to achieve this effect.

After finishing the rest of the minor sizing and positioning adjustments, we can move onto mobile.

Mobile

The mobile version is a little more involved.

The image that we had in the desktop version as a background wont work for us, so we will need to create an image tag to render a new one. It will be need to be hidden at large resolutions, so we add visibility: hidden and height: 0 to the desktop media query. Since we will also be using a semitransparent black shading over top, we will place our image tag within an image-shading div.

Next, we will need to set the mobile-image as a relative element, place the header and title as absolute positioned elements within, and set the visibility to hidden for the arrow icon.

Our finished site

Done

For this application I deployed on AWS using Zappa, but feel free to use whatever you feel most comfortable with. Just be sure to be aware of the /dev routing that I have used in adapting it to your own uses!

Thanks for reading, and be sure to follow if you want to learn more about developing with Flask and React!