Blog Spotlight: Brooke Miccio

This may be one of my favorite blog spotlights because of the homepage on Brooke’s blog. Her home page features a video montage as her header image, and I’ve never seen anything like it. I thought this was a really creative way to show off one of her skills, which is video production and editing. It also captures readers attention and makes them want to look more into her site.

It was hard to capture in a screenshot, but the header featured little snippets of video from her youtube channel and I thought it was a really unique way to design a header. Each video clip being played is slightly faded and when you hover over the header image, the video becomes clearer. There is also a welcome header that features a button to her digital portfolio section. Although I am unfamiliar with the video feature, the faded images, centered text, and rounded button would be easy enough to recreate.

Her about me page would also be easy enough to code in html, as it seems to be a text box with an image on the left and text on the right. Although this is a simple design, the font she uses in her header, the simple and elegant colors, and her images make it look more professional and high end.

I also really like how she had a page that was a digital resume. Again, this could be recreated through making to sections side by side, where one is text and the other is an image. I also understand that she may have wanted to incorporate different colors on this page than in her home or about me pages, but I think the light blue defeats the professional look she established with her other pages. I would choose another blue, or stick to the light gray color used before.

Overall, I would say Brooke does a good job with her website. I thought the images were well planned and placed, and I liked most of colors used on the pages. I also liked how she took simple html section designs and turned them into something that looked like it took more time to create, such as the video header. However, I was expecting more blog posts when in reality her website is just a digital resume. This is fine, but could be confusing to some of her followers who were expecting to find more content from this website.

To fix this confusion I would suggest that Brooke either choose to write more content under her blog section, or, get rid of this blog section all together. If she were to get rid of the blog I would then say for her to make it clearer that this website is meant for future employers, and not her followers. She should make it more clear on her home page by making the text that says “digital profile” bigger. She may even want to add the digital profile section to be a scrolling feature on her homepage, or make the tab in the navigation section closer to the home page.

Blog Spotlight: Barefoot Blonde

This blog was created by Amber Fillerup Clark, and the content is geared towards women who are mostly young mothers. The author creates a wide range of content such as lifestyle, beauty, tips to new moms, fashion, travel, and more. To be completely honest, I found this website when I was searching around for inspiration and don’t normally follow this blog. I did really like some of the design elements she uses however, so I thought I would still share.

To start, I really like the way she categorizes her blog posts. Each category features a three column design where the picture is the main background. The pictures are faded until you hover over them, and they become more clear. This is an easy html design that any beginner can utilize. I have a similar design on my websites I created, however I really like the size of her images and the faded effect. This element takes a simple design layout and makes it a little more interesting and catches the viewer’s eye.

Another thing I liked about her website is that she features a section of commonly asked questions on her about page. I’ve never seen this before and I really liked this idea! I’m not quite sure how to do this in html, but it seems similar to a dropdown navigation bar. If I were the author of this blog however, I would choose a different color than this orange, and I might make the width of each dropdown section slightly wider. Although the questions look big in the screenshot I attached, this is only because I cropped the image. In real life, this section of her website actually doesn’t take up a lot of space and looks small compared to the other elements and sections she uses. The orange color seems to be a theme throughout the blog, and although it works in some areas where it is used a few times together to create a uniform look such as the blog posts show on the homepage, I would say it doesn’t work in this area. If she didn’t want to change the color of the frequently asked questions section I would highly suggest she make it more visually appealing by changing the width, or adding in other elements that also have the same color so that this section doesn’t look as randomly placed as it does right now.

Overall, I would say that this website is professional and does a good job at organizing content into a way that is easy for readers to find and makes sense. I enjoyed the frequently asked questions section, but would advise to change the colors of the dropdown menus and make them wider so that they take up more space and don’t look randomly placed. If I were to design another website I may use this blog as inspiration because of the way she takes simple html layouts and changes them to make them have more style and flare.

The Font Series… Script

Script fonts can be best described as mimicking cursive or calligraphy. There are script fonts that connect, those that don’t, those that look handwritten, and those that look like calligraphy.

Script fonts should be used sparingly to keep your designs readability level high.

There are countless of script fonts out there, too many to narrow down which ones are the most popular. If you are looking for script fonts I would recommend checking out dafont.com.

Now that we know what script fonts are defined as, we can go a little further and research if script fonts are used in online design, where they should be used, and maybe where they shouldn’t be used. I am curious to see what others have to say about using script fonts in online design, because I was taught to use them sparingly in printed designs, and I wonder if the same rules apply to online design.

To start, I found an article from designhack.net where they list 7 tips for choosing the best fonts for a website.

The article starts by listing some basic fundamentals and definitions every web designer should be aware of. Although I knew most of these terms such as, kerning, leading, and contrast, I was surprised to read that you shouldn’t use more than three different typefaces. I knew to not use a lot of different typefaces, but three seems like such a small number.

The article advises designers to first get all of the text they need and then choose a font, instead of trying to decide on a font before even typing, which is something I am guilty of.

I had high hopes for this article because I thought it would be helpful for finding the best fonts to use online, and although it did link a few fonts they thought worked well on the web at the end of the article, the rest of the tips were a little vague and mostly things I already knew.

Although this article isn’s specifically about script fonts, I can take the tips to consider readability and not use more than three typefaces to conclude that script fonts should not be used in areas where there is a lot of text.

The Font Series… Sans Serif

Although I have a post talking about the difference between Sans Serif and Serif typefaces, I still decided to include both in this series because I didn’t mention the most popular fonts in each family.

Sans in french means with out, and Sans Serif fonts are fonts with out serifs. They are also described as being monoweight because there is no contrast between thick and thin lines.

Some popular Sans Serif fonts include:

1. Brandon Grotesque
2. Bailey Sans
3. Folio
4. Helvetica
5. Verdana

It is important to note however that Helvetica and Verdana were designed solely for online use, and not print. This doesn’t really affect online web designers, but it is still an important design tip to know.

I think using a Sans Serif font online would be beneficial to any web designer because they are considered to be very easy to read, they aren’t as boring or overly used as some Serif fonts, and they are a simple way to incorporate design with out overwhelming your reader.

The Font Series… Slab Serif

Whoever comes up with these typeface family names really needs to consider moving away from the word Serif.

Slab Serif fonts can be defined as having a thick and thin contrast. Slab Serif fonts can also be referred to as Clarendon fonts because the font called Clarendon is the poster font for this typeface family. Slab Serif fonts are often used when designing something directed towards children because of their clean and straightforward look, which makes it easier to read for children

Some popular Slab Serif fonts are:

1. Clarendon
2. New Century Schoolbook
3. Memphis

In my opinion, Slab Serif fonts are good for long bodies of text where you want your readability level to be high. However, I personally believe there are better fonts out there that could be used to show style while still having a high level of readability. There aren’t many articles out there that talk about Slab Serif fonts, and because of this I have decided they are an acceptable font to use in online designs, but you could probably do better and find a more interesting and engaging font.

The Font Series… Modern

Modern is the next typeface family we will talk about because it evolved from Oldstyle. Just like Oldstyle fonts, Modern fonts have serifs. However, unlike Oldstyle, Modern font serifs are horizontal instead of slanted.

When set to a large point size Modern fonts can be very striking and have a lot of visual impact. If you need to create more of a visual impact in your design consider using Modern fonts.

A few of the most popular Modern fonts include:;

1. Didot
2. Didot Bold
3. Bodoni
4. Modern No. 2
5. Walbaum

Blog Spotlight: Sarah’s Day

I have been following Sarah’s Day for over two years now. An Australian native, her content revolves around living the healthiest and happiest lifestyle that you can. I mainly follow her youtube channel where she posts video blogs, workout videos, recipes, and more.

However, since starting this blog about online design I’ve been researching other blogs and the layouts they use to gain inspiration for my own blog. I love Sarah’s Day’s website because of the clean design, light colors, and a fun effect where as you scroll content seems to jump on the screen.

Her home page features a set of header images that automatically change after a few seconds.

I also really like her website because it looks professional while still showing her personality. However, the website does seem like more of an online store for Sarah to sell her products instead of a blog. I don’t believe this is an issue though because the order of tabs in her navigation section doesn’t prioritize her blog. Speaking of her navigation, I would suggest she put the “Transformations” tab underneath her ebooks as a sub link, because I don’t think it needs to be its own separate tab. If people are interested in purchasing her ebooks, they may also want to see other people’s transformations from following her workouts, however, when listed as its own separate tab it is a little confusing.

The blog section on her website is set up as three column rows where a short blurb on the post and a feature picture are set up. This would be easy enough to copy because the template I was given for my websites that I am designing features a three column section. All I would have to do is write a headline, a short blurb linking to the full post, and photoshop feature images for each post. I like the pink background and I think it makes this section even more appealing.  I also like how she doesn’t have sublinks underneath her blog tab, but creates a separate navigation section on the blog page for different categories of blogs that she posts. I thought this was very interesting and was more visually appealing than just listing a lot of sublinks. This would be easy enough to recreate because it’s just text that is linked to another page in her website. She also added a simple underline to the categories listed in her blog page.

Overall, I would say I really like this website and there aren’t many things I would change. One thing I would suggest would to change the “Transformations” tab in the navigation bar to be a sub link underneath “Ebooks.” I would also have the contact page be a sub link underneath the about page, or the press page as having both “Press,” and “Contact” seems a little repetitive and unnecessary. The contact page is just an email, and therefore shouldn’t be its own page because the same “Have a question?” and email link are at the bottom of each page. She should instead add it to the top of her about page, or the top of press page where she lists all of the articles she has been featured in.

The Font Series… Oldstyle

Oldstyle fonts were some of the first fonts created, and they were based off of the handlettering of scribes. All Oldstyle fonts have serifs, which are the tiny “feet.” Oldstyle font are different than Serif and Sans Serif fonts because the serifs of lowercase letters are always at an angle and have a curve where they meet the stem.

Oldstyle fonts are good to use because they are a classic and sophisticated typeface.

A few examples of Oldstyle fonts are:

1. Times
2. Palatino
3. Garamond
4. Sabon

Serif vs. Sans Serif

I constatnly confuse the Serif family font and the Sans Serif family, because both their names and styles are very similar.

Serif fonts are defined as having tiny little “feet.” The font used in this post is under the Serif family because if you look at the bottom of most letters, there are lines going in both directions.

Some Serif fonts include old style, modern, transitional, and slab serif.

Sans Serif fonts are defined as not having the “feet” that are present in Serif fonts.

Some Sans Serif fonts include grotesque, neo-grotesque, humanist, and geometric.

There will be another series on examples of fonts in each of the font families listed above, but for now, is one better than the other in terms of online design?

Well for one, it is argued that some fonts are more readable than others. A post by freecodecamp.org says that Humanist fonts are more readable than Grotesque fonts because Humanist fonts contain more open shapes which makes it easier to read.

However, an article on designhack.net argues that Serif fonts aren’t harder to read than Sans Serif fonts because each letter in Serif fonts are more distinctive and easier for the eye to recognize.

As a beginner to online design I’ve noticed this seems to be a common theme among a lot of rules and guidelines to online design. Some people will argue one thing, but other people will argue the exact opposite. If I’ve learned one thing from this course it’s that there really are no rules, just like when you were a little kid in elementary school and were taught to never use and in the beginning of a sentence. And as you grew older you were told that actually a lot of the rules of writing that you were taught as a kid are actually just very loose guidelines, that aren’t followed strictly.

The same thing applies to online design. There really are no rules, and if you want to use Serif fonts online, you can. The article on designhack.net said that you can really do whatever you want in terms of design, you just have to make sure to do it well.

In A Design Rut?

Sometimes I find myself frustrated or just simply not motivated to design because I feel like everything begins to look the same. Sure, it’s okay to know what you like to and to stick to some key elements, but when everything starts looking the same it can be discouraging to try and come up with something new.

This is where I learned the term “idea files.” My professor for one design class I’m in assigns idea files each week where we can bring in an example of design that we love or hate, nothing in between, to share with the class. This has helped me learn different ways to arrange elements in a document, and it is also very helpful to keep these ideas somewhere either on your computer or have a hard copy to look back to when you’re feeling in a design rut.

Getting inspiration from another designer isn’t cheating, it’s actually very helpful! So, if you find yourself using the same pictures, text, or colors and want to change it up I would suggest searching the internet or finding stuff in person and storing these away for when you need the extra inspiration. Find designers whose style you really like or relate to, and try to learn as much as possible from them.

I’ve used this is multiple of the online designs that I have created, and I feel that in order to grow as designers we have to observe what other designers are doing constantly. It’s just like how authors say they are constantly reading. Authors read other authors work to get inspiration, and to keep their own minds in shape. As web designers, we have to be searching for inspiration through others, and that is how we will grow and come up with our own designs.

Another thing I find very useful when I am feeling frustrated and don’t know what to do with my designs, is to get off of my computer and try and draw my ideas with a pencil and paper. Keep in mind I am no artist, but this helps me better visualize what I want to do, and then I can get back onto my computer and deal with the specifics. A lot of the times I find myself getting stuck on maybe the size of an image, or the placement of text, and once I figure it out I then realize that another section or element I want to add requires me to change or move what I was working on for so long, and I find myself wasting time. This is why I would highly recommend roughly sketching your ideas down so that you know what you want to go where before you have to move stuff around.

Finally, don’t be too hard on yourself. Use others as inspiration but don’t compare your progress to theirs. Take time to figure out your style, and try to have fun with it.