Designing for the Web: The Fundamentals of HTML and CSS
10 March 2023
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:
- The edges of the blocks needed to look like organic growth rather than being zigzagged all the time.
- 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:
- To create a more random appearance, warm and cool colors shouldn’t touch, especially in the block motif.
- Each color is connected to one of the six lessons.
- 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.
- Building Lean The launch of this project occurred at a time when many of our web designers were simultaneously working on other projects. As a result, I got to work on the registration website and design.
- We had been contemplating employing a landing page builder to permit other members of the marketing team to independently create one-of-a-kind pages. It seemed like a good time to give the builder Tilda a shot. The builder’s constraints ultimately benefited the design.
- By building this way, our content and design teams could work on their respective assets simultaneously, our web designers could concentrate on other projects, and the team could test a new tool. This procedure allowed us to work more quickly and efficiently.
- We are unable to claim that this design tactic was the reason why one of AWeber’s properties received more signups than the average. It did set a good example for future internal design systems.
- Because it deviated from our usual corporate brand identity, I believe that this style risk had excellent outcomes in the end. Additionally, it gave us a solid foundation for future style direction.