mollyschambers

[mollyschambers]

CINEMAGRAPHS

Some good years ago, I came across cinemagraphs. Which are part video and part photography put together in such a way that it is like a gif with an endless loop with a cinematic approach.

Here are some of the cinemagraphs that I created for different projects.

Ideas for perfect endless loop with a cinematic approach inspiration!

And I was thinking that using this again for a website might be interesting. The cinemagraph should be something related to the topic for which the website is built and the action would be completely related to it.

I still have a lot to learn and experiment regarding HTML and CSS but I can definitely have been starting to have some ideas that I want to try and experiment with.

[mollyschambers]

HERO WEBSITE

A hero image is a website design term used to describe an oversized banner image at the top of a website. Sometimes called a “hero header”, it serves as the introduction of your company because of its prominent placement.

Here are some important things we should have in mind before starting:

HERO IMAGES. The images used usually have one or more of the following characteristics:

- A high-quality photograph or engaging video

- An image slider or media carousel

- An animated or static illustration

- Headings and descriptions next to or in front of the visual content

Regarding the design, some very common styles are:

Background images or videos with background overlays

Fixed or sticky positioning

Hover effects the change the transparency or overlay

Elements of contrast that differentiate the image from the header above it or from the content.

First impressions matter, especially when it comes to how users relate to website aesthetics. The hero image we choose and how we present it on our page influences user sentiment and behavior(s) in a major way.

If the hero image and its surrounding content are clear, engaging, and well-representative of your company or service, the user is more inclined to stay exploring your website.

According to Elementor. com there are 4 Types of Hero Images:

1. Product Hero Image

A product hero image is a large, high-definition image of the brand’s product. These images can be presented in static or in motion and are commonly found on e-commerce sites.

2. Customer Hero Image

This image is used to show the customer or consumer using the product.

3. Founder Hero Image

Is a large image of the founder or business owner, placed in the hero section to greet the site visitor immediately.

Founder hero images are often used in independent portfolio websites, individual business owners like a psychologist, makeup artists, or musicians.

4. Non-Contextual Hero Image

Non-contextual image shows the user what the product or brand is about, but in an indirect way. The hero image should be easy to identify and users shouldn’t need to spend time thinking about its relevance. In this case, it's necessary to put the hero text in conjunction with the image and it must be directly related to its visual content to be effective.

After all this, some considerations will be taken to build those websites!

[mollyschambers]

Website design inspiration:

As I am starting to think about my project, I am doing research and getting inspired. I came across a website that collects trends and brings innovative designs for websites. It has a lot of interesting material, from coding, fonts, galleries, color gradients and even promotes and give a link to the best design agencies.

Building a website requires a lot of research, inspiration and then executing everything to bring to life such design.

To build a website you need to consider a lot of aspects, such as what or for whom is the website, what is the target audience, what are the colours that will represent the person, company or service. And every decision has a reason behind why it is been used, every detail has a purpose.

This website also has a lot of information about HTML, CSS, Javascript, tips, tricks and tutorials. A lot of content that will inspire me through my quest to create my very own website.

The more I see I can learn the more I realize how little I know!!!

[mollyschambers]

Unconventional websites

Every year there are new trends but there are sometimes, some people thad defy them and do something completely unexpected and it actually works!

I was looking for inspiration for some projects and I came across some really different looking websites, the way the audience interacts with them is totally different yet, intuitive.

I was trying to figure out how they built those websites or at least some parts of it but I realize that I still have a very long road ahead of me to build something like that but at least I felt inspired by seeing all the compositions that can bring a totally different look and sensation to the audience. And some day, hopefully, I will be able to create something different, intuitive and visually stunning.

Here are two of my favorites in no particular order:

1. SIRUP is a website created for the sole purpose of listening to a playlist. The designer created a horizontal scrolling experience incorporating the playlist and the visuals as part of the scroll movement.

https://tote.design/sirup/

2. Dilinger, is a Film Production company based in Paris, the entire website has dynamic fonts which change accordingly when an option on the menu is selected. The transition of the typography helps navigate the website and creates a different grid each time.

When the user hovers the mouse over the images, a video plays automatically, the typography changes and it looks simply beautiful.

If I had to pick just one of the above, it would be the second one. I found the kinetic typography mesmerizing and I just couldn't stop looking at it. And another factor that catched my eye completely was that it looks so elegant in black and white plus the incredible footage that plays in some pages, the quality of the videos. All this makes complete sense when if we remember that this website is for a film production company. I think they deliver perfectly the message of what they do.

[mollyschambers]

Great Fonts Pairing

There are countless fonts, but to make them work together efficiently is a real challenge. Choosing fonts for a project is a very important decision. Most projects will need at least 2 fonts and finding the perfect combination is tricky.

What makes a good font pairing?

Typefaces have distinct identities that can add meaning to the words they display. First, for headings you need to consider what or who is the typo representing. For body you need a font that is easy on the eyes.

Some fonts are font-family and they have different stylistic variations.

You can establish hierarchy with font, sizes and colours.

Here are some combinations that were created with all that in mind:

There are also some website where you can find and download typos for free:

https://www.1001fonts.com/

https://www.dafont.com/es/

https://www.fontsquirrel.com/

Also you can find fonts that were used for blockbuster movies:

https://fontmeme.com/movie-fonts-collection/

[mollyschambers]

COLOR PALETTES

Color is a very important element in design. Colors give meaning to design. They spur emotions and express values.

There are a few things to keep in mind when developing a color strategy: psychology, culture, trends, and context.

There is a very useful website Adobe has put out there to help us create color palettes that are extracted from a specific image. You just drop the image and the website gives you a palette of color based on the image.

On this way we can get a powerful and efficient color palette for our designs and in this case, for our website.

The context will be very important. We need to think what the website we are building is for and from there, think about the color and typography that best matches that purpose to convey the message and information we want.

To obtain the color palettes go to: https://color.adobe.com/

It is easy to use and a very powerful tool to our disposal.

[mollyschambers]

WORDPRESS PLUGINS

As I want to build my own website and in class we were talking about plugins I decided to do some research to find useful plugins for photographers.

I find myself quite often looking at other photographer's websites and portfolios, whether is to get inspired or just to see what are they up to.

The most renewed photographers have very clean and simple websites, the images are impeccable and all the content loads quickly without loosing any quality. Now that we are learning about Wordpress and digging deeper, my self-imposed task was to find plugins that I could add to my own website to create the best interactive-clean-friendly blog I can.

In this post I share my findings of the 2 best plugins that will help you to keep your hi-quality images while reducing loading times:

1. SMUSH.

Is a plugin designed to improve page load times on image-rich sites. With this free tool, you can resize and compress up to 50 images at a time without compromising image quality. This way, users won’t get frustrated waiting for your site to load your photographs, and you’ll improve your SEO rankings.

It has 1 million active installations and over 4,000 five star ratings.

You can find it here: https://wordpress.org/plugins/wp-smushit/

2. IMSANITY

Imsanity is another SEO plugin that minimizes site load times by resizing your images. You can use this free plugin to compress your images without reducing their quality in bulk. Because of this tool’s bulk-editing capabilities, you’ll spend less time manually resizing images and more time taking high-quality photographs to add to your site.

You can find it here: https://wordpress.org/plugins/imsanity/

[mollyschambers]

About entering the world of WordPress!

This time around we will be learning about Server-Side Development. We will be using WordPress, the most popular open source software used to create websites and blogs in the world.

We will be learning to customize the theme, to post and edit most of the features to make our website or blog look exactly as we want it.

I have used WordPress before, I created a blog for artistic purposes but stopped using it because I found it difficult to maintain, not because of the complexity of the software but because of time and quality of content that I wanted to share. I was working at the moment and I had no much time and energy to keep going so I just stopped posting.

At this point the situation has not changed much but there is a big difference, this time, managing the WordPress software is part of the Masters program so I will learn to use it and apply the acquired knowledge, no excuses.

Keeping a blog or website updated is a real challenge. And knowing that it has become easier to create and post content through different platforms means that millions of people have the opportunity to do so and put out in the world whatever what they want to say.

Sometimes can be discouraging when one realises that are millions of blogs that have the same idea or topic in which we are interested in but at the same time, no one has gone through the same experiences we have and that can make a differene.

I found these two quotes that I liked and inspired me to keep going.

[mollyschambers]

Scrolling through Instagram I found a very helpful account. The user's name is @coding_.master and explains in a very simplistic way HTML, CSS, Javascript, and Python.

It shows on Instagram, and as Instagram is for images, graphics that visually show what, my now favourite account, is talking about on each post.

Last week we were learning about 'GRIDS' during the class and we did some exercises in the lab. I am still slow to do and complete the exercises but I am doing it and that makes me feel happy, no my speed needs to catch up.

Here is the result of the first CSS sheet we needed to get done.

I am starting to like this Web Authoring class more and more.

[mollyschambers]

ASSIGNMENT TIME!

This is the second assignment so far for the Web Authoring subject but the first one that actually will be graded.

In this 2-page assignment, we had to put into practice basically everything that we have been learning since we started the Masters and well, of course, I found some challenges.

This is the kind of subject in which you need to be completely focused during the class because if you miss a tiny detail then you will start to have problems coding your HTML or your CSS style sheet and I must admit I found myself in that situation when I was writing the HTML for the assignment.

In general, I was able to put everything without much hassle but suddenly I was struggling with some alignment tags, properties and values so I had to rewatch some lectures. God bless the technology and the recordings! That saved the day, over and over again!

And yes, some tiny little details I forgot, but those tiny things were the ones that seal the deal to put everything together and finally make the 2-page assignment look as similar as I could possibly do.

After every little thing that I started to solve, I felt powerful and then my enthusiasm was stopped by the next little 'detail' that was not working as I expected. Sometimes was a misspelled tag or the wrong order. Other times I simply had no idea what I was doing wrong and that is when I started to rewatch some lectures and well, I found what I was doing wrong.

I think the most challenging part for me was to use <div> a magical thing now that I consider the savior of those who are lost and in despair.

I found quite challenging the 'flexbox' element. After a lot of struggle and revising again and again my notes, the slides and Google's help I finally solved the mystery and sit the image side by side with the content and I can assure you that the feeling after achieving my goal and being sitting in front of my laptop and appreciating such beauty was overwhelming and glorious.

The interesting part is that after all the struggle you definitely learn and get a deeper understanding of HTML, grouping things and the gigantic power of CSS.

It can be a love/hate relationship but mainly love.

After this assignment, I found myself with a renewed interest and love for everything related to web authoring.

Here's to more learning and more improvements!

Sláinte!

[mollyschambers]

Using CSS!

We have been using CSS to make some changes to the previous exercises.

We have been using container, main, aside, background-color, different font-stacks, different font-styles, padding, margin, headers, footer, links, ul, nav, hover, and many more.

This is how it looked after we changed the logo

[mollyschambers]

IMAGES, LISTS, AND LINKS!

We had our second lab practice and we used images and links.

The final result looks like in the picture above, pretty basic and simple but it is just the core of any website. The 'style' part will come after with CSS.

We had to follow some instructions to create the website and the link that directed us to another page. It was fun to do. So far, I can say that I remembered most of the attributes and how they work.

Having successfully completed the exercise made me feel happy but I know that this is just the beginning and I cannot wait to start with CSS! I have been waiting for this moment for a long time.

I am ready, bring it on!

[mollyschambers]

First lab practice!

We finally had our first day at the lab and I can tell you that it was fun.

After so many years, HTML and I are meeting again but this time in another country, who knew? It was a sweet reunion and from what I saw it is going to be a whole better and new chapter.

Long ago, I learned the basics of HTML and I realized that I still remember most things so I can state that it was love at first sight. Back then, destiny had other plans so I had to put on hold my relationship with HTML and after many years we are back together.

I am thrilled at the moment, I just hope this excitement stays with me for the rest of the Masters and to be honest, the rest of my life.

We used: <heading, strong, br, em, and blockquote> and some randomly generated text and a nonsensical (like our lecturer says) poem.

Anyway, show it to me! Right? Well, here is the visual part of the very basic coding we did at our first practice.

[mollyschambers]

MsC in Interactive Digital Media

WEB AUTHORING

The Visual Diary

September 21st, 2021.

Another year, another creative tumblr blog but this time with a more formal and academic approach, this means that I, and whoever finds-follows-sees this visual diary will be able to take a peek and hopefully understand my processes of creation and of course, see the progress of the learnings I will go through my Masters in Interactive Digital Media during a whole year (Sept 2021- Sept 2022).

This blog is focused on web authoring learning and everything related to it.

Hi, this is Patricia, a. k. a. Molly, I am a former Visual Artist, photographer, and this is my journey…