Site icon Syrus Design 👨‍🎨

Designing for the Web: The Fundamentals of HTML and CSS

Near the end of 2016, We were only given a limited amount of time to finish this project. To finish everything on time and produce the assets quickly and cohesively, we utilized multiple methods.

I came up with a movable block design that could be the defining feature of the design vocabulary. When attempting to make an ordinary pattern interesting, a significant obstacle is the designer’s capacity to flow the pieces in a random manner. The color, negative space, and size of the blocks had to be chosen at random for this pattern to work.

The vivacity of the blocks was also made possible by the following tenants:

  1. The edges of the blocks needed to look like organic growth rather than being zigzagged all the time.
  2. The blocks were like windows that could either hold images or open to reveal the layer underneath.

Friendly, amusing, and professional The project owner stated that she wanted the colors we used to convey these three qualities. Choosing colors that were both vibrant and professional was difficult. It will all be MTV if you go too crazy; CSPAN will be playing in the background if you play it safe.

Additionally, there were guidelines for the colors we chose:

  1. To create a more random appearance, warm and cool colors shouldn’t touch, especially in the block motif.
  2. Each color is connected to one of the six lessons.
  3. The following explains why Navy (#213547) should be used for all text.

Due to the bold color scheme, we chose to shoot in black and white. This gave the design a more polished appearance while not being overly formal.

We put on a fun photo shoot for the class in which each instructor stood in front of the camera while the others laughed and talked to them. As a result, models developed more distinct personalities and became cozier. The instructors’ humanization, in my opinion, helped them better connect with the potential audience.

After the components were established, we needed to make this design system simple to replicate. However, the elements alone could not keep a group of five or more people aligned.

There was a good chance that we would lose our enthusiasm while making the website, Facebook ads, videos, emails, and slide decks. At that point, documentation became our friend.

I created an internal wiki for the styles for this project. It would be incorrect to refer to it as a style guide because it went far beyond hex values and spacing guidelines. It was the primary source of information for instruction in assets, rationale, and sentiment-based design.

By creating this framework, any member of the team could contribute to the creation of an asset that appeared and felt cohesive.

Exit mobile version