Mood boards, Grayscale & Style Tiles

Final week was very design centric. We acquired to play in Affinity Designer once more, which I at all times get pleasure from. Now that we’ve got the instruments and expertise to construct a responsive webpage, we switched gears to study the extra emotional facet. create a really feel for the web page utilizing colours, spacing, fonts, picture placements and so forth.



Temper Boards

All through the coarse, on a regular basis we’ve been sharing examples of inspiring visuals. That may very well be a graphic, picture, structure, font or something we deem visually interesting and provoking. It’s been a enjoyable approach for us to see one another’s kinds and likewise broaden our horizons as all of us have our personal tastes.

Now that we’ve had a pair month’s price of visible inspo, it was time for us to slap them onto a canvas (digital after all) and create a Temper board. It was basically our first step in organizing our content material. I separated mine into actual world content material and colours as proven under. I didn’t put a lot thought into the location of my pictures aside from inserting related colours close to one another. That’s simply what appealed to me.

Image description

In our second iteration with the temper boards, we performed round with measurement and spacing. This allowed us to see how totally different pictures can work collectively. Some pictures would possibly harmonize and others might conflict, however we’ve got to maneuver them round to seek out out. When one picture is absolutely small subsequent to a different that’s actually massive, what sort of really feel does that create and vice versa? Within the instance above, I positioned the quilt of Watch the Throne (the gold metallic sq. within the heart) above 4 different pictures to see how that may play with the totally different colours. I sort of just like the darkish blue, however that’s about it. This was good follow for us to get a really feel for creating totally different moods with our visible inspos.

Image description



Grayscale

We spent a day creating graphics and layouts in grayscale. The concept was to learn the way we are able to visually create really feel within the absence of shade. I didn’t notice how a lot you are able to do with out shade and now I’m satisfied we don’t want shade. We will all have the imaginative and prescient of canines and be comfortable. Once more, spacing, utilizing black versus white all impression the temper. I had numerous enjoyable creating the pictures under. As you may see, I didn’t use any white, which I’m solely realizing now.

Image description

Image description

Image description



Fonts and Spacing

We discovered all about fonts and spacing. Properly, as a lot as you may study in a day when there’s complete educational {and professional} disciplines on this subject. You could not notice it, however fonts and spacing play an enormous function within the design and really feel of an internet site. For instance, this weblog makes use of sans-serif for the headers and a serif font for the physique textual content. It could in all probability really feel totally different if the headers used a serif font and the physique sans-serif.

Via nice design, you may deliberately information the customers’s eyes alongside your designed path. There’s a precept utilizing “small, medium and huge”. That may very well be for each textual content and spacing.

In one in all our assignments, we researched a structure that makes use of intentional spacing and measurement and recreated the structure with HTML/CSS. Here’s the layout I found.

Image description

I assumed it made nice use of the “small, medium, massive” precept the place your eyes go straight to the “Barca Clock” (massive), then under it you learn the sub-header (medium) and to the left you learn the main points of the undertaking (small).

I additionally favored the way in which the textual content traces up with one another. The highest of the undertaking particulars on the left traces up with the highest of “Barca”. It sort of facilities the content material horizontally on the web page. Then the center block of content material is packaged collectively by itself, aligning on the identical left line. It seems that the center block of content material has about the identical quantity of padding throughout it. This helps emphasize the content material and makes it the “characteristic” of the web page.

Image description

What stood out to me essentially the most was the “R” in “Barca” and the “L” in “Clock” each being left aligned collectively. It seems that’s that center of the web page vertically. It provides to the focus. I additionally suppose having “Clock” indented and breaking from the left alignment provides the physique of textual content some character.

If you happen to’d wish to see my recreation, you’ll need to click on here!

Vocabulary phrase of the week:
Rag: The form {that a} physique of textual content makes.



Fashion Tiles

Each time I sort “fashion tiles” I wish to sort “fashion tyles” as an alternative. Is that simply me? In any case, we have been launched to fashion tiles, which is a approach for a designer to offer you an concept of the final feel and look of a product (in our case an internet site). It’s like a one-pager for the potential last product. It could embody a shade palette, totally different button choices, examples of a header, sub-header and physique textual content; principally any of the main elements you anticipate to see or use on a website. It’s all packaged collectively in a single, organized web page.

It took me some time to determine what precisely goes on a method tile and it’s one thing I’m nonetheless studying. Right here’s examples of my try at some fashion tiles for my private undertaking website. You’d seemingly have a couple of fashion tile to permit for various kinds or feels. Beneath, I used to be going for clear and fashionable.

Image description

Image description

Image description

That is it for now! Have an amazing weekend!

Add a Comment

Your email address will not be published. Required fields are marked *