Website
Intro -
leonardodicaprio.com
My task is to create a website to self promote my work. It will consist of not only a webpage, but also internal and external hyperlinks. This will be used to separate each of the topics into their own individual slides. Amongst these, external hyperlinks will be used to take the user off the site.
What does a website consist of?
Webpage -
The difference between a website and a webpage is that webpage refers to just one page of the entire website.
A Navigation bar -
This is the table of links that take you to different pages on the site. These all vary between sites, but usually run along the horizontal line at the top of the page.
Internal Hyperlink -
An internal hyperlink is a clickable item in a website. The internal refers to the location that the link will send you. Internal hyperlinks will take you to a part of the website you are in. And never out of this.
External Hyperlinks -
An external hyperlink is a clickable item in a website. The external refers to the location that the link will send you. External hyperlinks will take you out of the website. This will usually include a prompt asking if you are sure you would like to leave.
Widget -
A widget is something non text related that is embedded into a website. This can be anything from a 'download' button to a playable mp3. The idea with widgets is that you can use outsource items without leaving the webpage.
Url -
The Uniform Resource Locator is the invisible code locating the webpage online. Think of this as a digital postcode.
The address will consist of a 'https://www.____.__'
Here are a few examples of some websites I have looked at. I am strictly keeping to celebrity sites as they are created to distribute their work. These particular sites include their professional work and contact information. Many artists own a blog space which is embedded into the site.
Their pages mostly consist of a Home page, Merchandise page, Content page, Contact page.
This webpage is extremely minimalistic. The Homepage scrolls through 3 pages before we reach any hyperlinks.
As you scroll through the site, the colors change. However, they all keep within his color scheme of: salmon pink, grey, white. The paragraph font is an artistic, almost handwritten, design. The headers are all of a bold and angular font. The two fonts work well together as they contrast against each other. These are the only fonts used, and they scroll with the page.
The website flows in an artistic way. No blocky navigation bar, no contrasting colors. Everything fits together perfectly. Although the foreground scrolls as you command it, The background always remains static. This gives the page a 3D dynamic, creating layers in the webpage.
The navigation bar works on a 'toggle' system.
This means that the navigation bar can be shown or hidden. This is important because, in this particular site, the navigation bar takes up most of the screen.
The toggle is located at the top right of the screen. When clicked, the screen fills up with a half opaque solid color. The text is layed out unconventionally. Rather than being composed horizontally, these move vertically. The pages are as follows:- Home
- Podcast
- Books & Course
- Videos
- Articles
- Mailing List
- Photos
- Contact
When hovered over with the mouse, each selected word glows an autumnal orange (as opposed to the original grey).
When an item is pressed, they will remain orange until the page changes. To 'un-toggle' this menu, there is an 'X' located where the original toggle was.
Overall, I believe that the website is of a professional quality. I could not find any flaws.
This particular website is very busy in comparison to the previous analysis. The fonts and widgets are much smaller, compacting more information into each page.
Secondary to this, I will mix earthy colors to contrast the lightness of the primary. I believe that, if done correctly, I can successfully mix these two color tones into a seamless website.
Here is where the earthy colors made their appearance. I wanted to give the gallery an alternative design to the rest of the site. This was achieved by changing the background. I opted for one of WIXs premade designs, this was a live image with the color scheme I was intending.
The podcast page is a subsection of the gallery, accessible by hovering over the gallery tab.
Soundtrack -
The homepage scrolls through slides of information. These are, headlines detailing the actors recent achievements.
The first, is what is known as a revolving slide. This is where one portion of the page changes on a timed basis. In this instance, the slide changes every 5 seconds. This is an ideal time to let the user know that there is a revolving slide, while still giving them time to read the headlines. The following slides use a theme. This is that an image will fill the entire width of the screen, followed by a black slide, followed by a picture, and another black slide. This is a consistent style choice throughout the website. It is used to separate different categories.
The Navigation bar is static, and can be located in the top right of the website. As before, when hovered over, the links glow orange. Font is also consistent. There is nothing stylistic about it, but is kept professional.
The pages are as follows:
- Leonardo DiCaprio
- Films
- News
- Biography
- LD Foundation
Pre -
Before I began production on my own website, there was some things that I needed to pre-plan.
I needed to have an Idea of 3 things.
- Content
- Page Brief
- Visual Style
My website content will be self promotional, and therefore promote my personal work.
This will be split into different sections:
Bio, Picture collage, Video collage, Podcast, Soundtrack, Contact.
Bio will include a quote from myself. This is because the site will be written in 3rd person, and so will detail information that a first person account could not.
The picture collage will be linked to my Instagram. As my Instagram feed changes, so does the feed on the site. This way, the site is kept up to date. Video collage will be a manual revolving slide, with a brief paragraph explaining why my film work is important.
The Podcast page will be linked to my Spotify, and will include a popup that takes the user there.
The soundtrack page will detail the music that I listen to. The concept of this is, the page will be split in half, with two different genres and 10 tracks each. This is a space that will be updated regularly to keep the information fresh. Lastly, the contact page will be used to let viewers directly contact my email. I will create a unique dedicated email address to help keep them all in one location.
I want this space to be all about me and my interests. Written in third person, I will document notable information about my life as a film student.
Page brief :
Home - Self Portrait, Bio
Gallery - Instagram feed, film paragraph, film feed
Podcast - Podcast information, Direct download and stream link
Soundtrack - 'Chill tracks' 'Heavy tracks'
Contact - Email, Phone number, Instagram
Visual Style -
For my visual style, I want something very clean but with a vintage tone. I will use pastel colors, mixed with desaturated/grainy images.
The pastel colors are trending in professional level websites, and will work great as primary colors.
The Images will consist of the promotional material that I shot for the Podcast.
Because of this, they will be of a high DSLR quality, and not take up any of my production time (as they have already been taken for the previous projects).
-
I want my website to take inspiration from the russellbrand.com. I love the minimalistic design and parallax background. I wish to use this in my website.
For the gallery page, I will use the 'revolving slide' idea used by leonardodicaprio.com.
These were my favorite design choices in the websites and I am going to reproduce this.
Production -
For my website creation, I used WIX. Wix is a free to use website creation tool. It allows you to create from existing templates, or build from scratch. There are two creation modes to choose from. Express and Manual.
Express mode is very easy to use. You can choose from 'page inserts' where you can customize premade designs.
I began using this to become familiar with the WIX creation engine. However, I quickly found that the tools were too basic. And I could not customize the website as much as I intended to.
So, I started over in the manual mode. Here I could work from background to foreground to create every detail as I wanted.
The background image was first manipulated in Photoshop. I sharpened the image and removed the saturation. I realized that those tools were already available in WIX. You could manipulate images without ever leaving the site. This changed everything.
I was able to change the background color with the press of a button, and customize the basics of image correction tools. I was now familiar with the creation engine, and even added a 'Parallax' scrolling effect, as seen on russellbrand.com.
The Navigation bar was next. I imported a white rectangle, and stretched it to fit. A noise and a 'hide on scroll' effect was added. The internal hyperlinks were a navigation preset. The preset added the buttons and the pages. All I had to do was rename them.
Now for the Page content. I wanted 'Jack Godfrey' to rise onto the screen as the webpage is opened. This was achieved by adding an animation to a text box. The command was set so that every time the HOME page is opened, the animation will play out. I had experimented with a drop shadow but did not like the way that it looked; I preferred the minimalistic design.
As a mirror to this, I imported a 30 second clip and converted it into a PNG. There are masking effects available, and I chose the 'ripped paper' design. Among this, a light 'noise' effect was added to match the rest of the design style.
The lower portion on the page is focused on 'About Me'. It is written in third person and explains a brief overview of my work. Obviously, the quote is not something documented that I have said. But, it works to add the first person element to a third person account. The Headline has a 3D effect added. This has no real meaning to the page, I just enjoy the style that the effect brings. The attached image was also taken during the podcast project. Unlike the first, I only used the WIX photo editor to achieve the look. Changing the background to that of a charcoal color. This entire row is 'anchored' together so that they move together while the page scrolls.
GALLERY -
Next, I first had to connect my Instagram with WIX. When you connect to Instagram, you have the ability to present your feed on your site. This meant that I had to convert my 'Private' account to a 'public' so that the feed would show.
It was a very fiddly setup. I struggled to scale the widget, but eventually made it work.
Below this, was the 'revolving slide', as seen on leonardodicaprio.com.
This was actually a preset in the WIX engine, and allowed me to connect both YouTube URL links, and PC files. I added a few videos that I had some part in, and condensed the slide into a dark grey box. The text here was mostly used just to fill the negative space. I did not want a page with no explanatory text, and so included a brief paragraph explaining the importance of the videos.
PODCAST-
The page consists of one large widget, added through the 'apps' tab in WIX engine.
The purpose of this page is to present my previously created podcast in one location. Here, you can both download and stream the first episode without ever leaving the site.
This works by adding the RSS code of my podcast into HTML of my WIX site.
There is also a link to save the podcast on Spotify. As its the Spotify steam which I am trying to promote, there is an additional popup that can be triggered at random.
This was created by adding what is called a 'light box'. A light box is a toggle able prompt that can appear on screen at a chosen time. This was the most challenging widget on the site as it had lots of commands and hyperlinks to work.
The idea is, when on pages 'gallery' and 'soundtrack', there is a 3 second delay before you are greeted with a popup. The popup is a prompt to download the podcast.
To access the podcast, simply press 'stream now' and it will take you to an external hyperlink in which you will be forwarded to my Spotify page.
To exit, simply press 'continue to site'.
The idea for this page is that I will display the music that soundtracks my daily life. As music is a contributing influence on the website, I needed to show this on its own page.
I used a 'Spotify player' widget and duplicated this 20 times.
Upon publishing, I opened the site on my mobile device. I figured that mobile would be the most common device the site is accessed through. And, so I demoed this.
The differences also effected the navigation bar.
To link a song to the widget I needed to paste the songs URL code into the HTML of the webpage.
I needed to do this for each widget and then set the color to correspond with the cover art.
The page was split down the middle using a pastel yellow line. The line was that of a consistent tone to the color scheme, and lined up perfectly through the center of the page.
The tracks were divided into two categories: Chill Tracks & Heavy Tracks. This was shown with the heading cards.
There was also two separate widgets lining the top right of the page. These are the 'artist radio' playlists for both of my favorite bands. Here, the user can play the widgets to shuffle the bands top 5 tracks.
On the left side of the page is a Header card that matches the design style of the other two. This text box is used to describe the purpose of the webpage and why it is important.
If the day comes where I release my own music, it would be found here.
Additional -
The final page is that of a 'contact' slide. This includes my personal contact information and working text boxes for the user to contact me through email. The email itself is unique to my WIX site. This means that all emails through WIX arrive to me as its own address.
Socials are logos linking your website to your social media. These are:
Spotify - for promoting my podcast
YouTube - for promoting my documentary
Instagram - to promote my contact details
Here is where I discovered an issue with the site.
What I found was that the layout was not correctly formatted to the phone screen. This meant that I would have to go back and reformat the site manually. Luckily, WIX includes a mobile edit mode. The changes you make on mobile mode do not affect that on desktop. So I was able to create two differently designed layouts under one URL.
Rather than a long, horizontal hyperlink bar. I opted for the russellbrand.com design. When the icon is clicked in the corner. The entire screen fills with vertical navigation. I believe that this is the most effective layout for a mobile website. Almost every page has had a slight adjustment to better the layout but, ultimately, the site is at its optimal state.
Evaluation -
On Thursday the 25th March, I completed my Website.
Overall, I am extremely pleased with the final design. It was a very enjoyable process, seeing the website come to life after all my planning. After finding issues and resolving them to create more issues... I eventually mastered website creation.
Even so, there are still some performance and aspect ratio issues that I cannot troubleshoot.
For instance, the 'soundtrack' page contains many externally linked widgets. Because of this, the page takes a long time to load the external information. On low spec systems, or weak internet connections, the page crashes entirely. With more experience, I would be able to optimize the loading times for a wider audience base. Among this, I noticed that aspect ratios affect the overall layout.
The site was created at '100%' browser zoom. When zooming in or out, the entire layout distorts itself. This means that the site will not look as intended on all devices. I do not know how to fix this, but next time, I will find a way to lock the items in place.
Research was not incredibly thorough for this project. This is because I did not know the tools and limitations that I had available to me. Because of this, I did not want to plan for something that I wasn't even sure was possible.
Eventually, I decided to create a page plan. I knew exactly what I wanted on each page, but did not yet know the layout.
The project was based entirely off of experimentation. For instance, I knew that I wanted a parallax background featuring an image of myself; However, was not sure how to achieve this. If it was not for the research into other websites, then I would have never encountered that design idea. This goes with the gallery page. After spending time on the Leo DiCaprio site, I was influenced to include a revolving slide. I enjoyed the idea of condensing a pages worth of information into a single 16:9 horizontal sliding image.
Feedback on the site was mostly positive. Positive comments consisting of 'Nice Layout and easy usability'. This was good to hear. Knowing that the extra attention to details and the optimization for mobile devices meant that users enjoyed their time on the site.
Negative comments were focused on content. These users explained that they would have liked to see more focus on the documentary side of the project - as opposed to the podcast. This is very helpful criticism. I agree that more explanation and development should have gone into the 'Video' section of the site. In future, I will add this.
Another user also did not like the images used. In future, I am likely to create new content specifically for this site.
Overall, I am extremely happy with the results. I did not expect to create a site with such complex functionalities. I have some experience with Adobe Dreamweaver but could never get the same results. It is because of the simplicity of WIX that I was able to create a high quality site in such a short amount of time.
In the future, I plan to use the site as a place to promote more of my work. Think of it as a digital portfolio. To better suit the professionalism, I will purchase a domain under my own name. Therefore, truly owning my own site. However, I will only do this when I have a substantial amount of work to share.
-
Comments
Post a Comment