Category Archives: Website Design

Final Muse Site

Final Website Link:

http://rhyswatts02.businesscatalyst.com/index.html

Here are mock ups of my finished web based portfolio. I’m extremely happy with what I produced and I feel I have successfully managed to go through the learning outcomes to produce something that meets the needs of the brief.

Note:

As this was designed mostly in time outside of tutorials I used my Macbook to do so. This however has a different screen size and resolution so the outcome looks different on Mac desktops. The parallax transitions do not meet up the same on the desktop as they do on  my laptop which is something I would like to try and solve, but I’m aware many of my peers also are facing the same issue.

 

Advertisements

Evaluation and Reflection

In what ways does the visual communication/message of the piece meet the needs of the brief?

My visual communication meets the needs of the brief firstly by being a web based portfolio successfully showcasing my design work. I have designed it on Adobe Muse and have an easy process of how images can be added to my build in slideshows and galleries. I have also have considered choices about what work is presented, not only in a design sense but also thinking about being a socially conscious designer. I have thought about all potential audiences that I’m targeting and could reach. I have been decisive in what work is shown as well as making important changes to the layout and functionality of my website.

In what ways does the visual communication/message of the piece fail to meet the needs of the brief?

I would of liked to looked more deeply into semiotics in website design as I haven’t covered a great deal about it and the role they play in website design. I have thought about colour theory and the semiotics behind that, but I want to look into typography in contrast with design layouts and imagery used.

What are the strengths of the visual communication? Why?

The strength of my visual communication lies within the layout and deign of my website. I chose to battle with a parallax website layout that proved to be very challenging at first using Muse, however with persistent attempts I finally produced something I was happy with. I feel this layout is engaging for my target audience and works well as a design portfolio.

What are the weaknesses of the visual communication? Why?

The weaknesses I feel is in my typography. As this was my first time using Muse software I was unaware of certain web fonts that you could use, and I didn’t understand at first why my typography was turning blurry and pixelated. The class also had a problem with blurry imagery that wasn’t resolved which I feel lets down my visual communication but I understand this will be noticed in marking.

In what practical ways could the piece be developed or improved?

If I spent some more time investigating some downloadable widgets I could have include more engaging items in the website, such as a built in Instagram page so users wouldn’t have to be directed to another page. Small things such as looking into web based fonts that worked with Muse could of also developed my site.

Reflections:

How was my time keeping?

My time keeping was good in the early stages of this project, however progressing through it I didn’t get on too well with the Muse software and abandoned it for the online Wix service, but after creating a website on there I didn’t feel challenged enough and wanted to push myself to learn Muse for this project and future work. I’m glad I done this however I was running short of time after learning to use Muse and develop my final site. I feel it has balanced itself out now with a web based portfolio I’m happy with.

How did I use research to generate and develop ideas?

My research was vital for me to generate ideas as I needed to see what techniques designers were using on their own web based portfolios, and other websites in general discovering things like splash screens and animated imagery. I used a lot of sketching to help brainstorm ideas which I found really helpful in my design stage.

How did I use evaluations to help with my ideas generation and development?

I evaluated my work throughout the process which resulted in several changes to the main layout of the site. This is why evaluations are so important as you can develop and improve your existing work by taking a step back, looking at what you’ve produced and seeing what’s good and what’s bad about it.

How did I use experimentation during the project? How can I make this more effective?

Most of my experimentation came from sketches, and then experimenting with digital processes on Muse and Wix to develop my site. I would of liked to make this more effective by doing more experiential work before designing, such as collaging to give myself some more ideas on layouts, semiotics and colour schemes for the site.

In what ways did I show that I had achieved the Learning Outcomes? How can I improve this next time?

‘Begun to understand computer applications and their creative use.’ – I showed I have achieved many of the learningg outcomes through my blog, but especially understanding computer applications and their creative use as I have learnt key skills from Muse that will be transferable to many other projects, I have also used Wix online service and can see how that can be used to create creative outcomes especially with animated text and imagery.

What parts of the project did I enjoy most? Why was this the case?

I enjoyed researching the most in this project as I discovered some amazing websites that have been designed, and I can only begin to image the skills needed to create some of them especially with animated parallax sites that move with the user. Researching into these sites made me think about possible job opportunities as this was something I enjoyed doing overall.

What parts of the project did I enjoy least? Why was this the case?

The beginning stages of using Muse was my least favourite as I found it really difficult to use. I had a lot of frustrating moments with it but I eventually managed to create my portfolio using its tools.

How can I go about developing and improving  the parts I found difficult?

The only thing I can suggest to myself is practice, practice and practice as this is the only way I will be able to develop my skills using this software.

Overall this was an enjoyable project and I’m pleased to have learnt the basics of a new software with new transferable skills. I’m happy with my final outcome and I believe it is fitting and works well for target audience.

Good Design Evaluation: Muse Site

  • In what ways have you considered the sustainability of your project process and outcomes?

Sustainability in this project was a bit different to most as nearly all of my work was done digitally onscreen with no need for paper or printing. The only paper I used was in my sketchbook to draft up designs and layouts.

  • In what ways have you considered the ethical implications of your project process and outcomes?

When uploading my design work I was cautious of all pieces that could cause any offence to somebody or give me a negative name as a graphic designer. I also took into things such as copyright laws that could cause any issues with images and typography.

  • In sustainability and ethical terms in what ways was your work in this project an improvement or a backward step for you as a socially conscious designer?

This project has only strengthen my knowledge as a socially conscious designer as I have taken into consideration ethical implications of my website through what I present through it, along with sustainable practices using mostly digital software to create my final outcome. Learning the software ‘Muse’ has also helped me develop my skill set and broaden what I can produce, and I feel I have shown myself as a socially conscious designer throughout.

  • What targets can you make at this point for your work in the future as a socially conscious designer?

My next target would be to think about the overarching message my design work gives out and what connotations it will have to the audience and wider public, if any negatives can be given out from the work to any religion, political and social beliefs. And there is also always room to improve my knowledge as a socially conscious designer.

 

 

Muse: Pages

In my plan and sketches I decided on four pages: Home, photography, contact and social. Through my research I found these to be most popular for designers to use.

I wanted to show photography in my site to show the viewer another skill I am learning, and something that can set me apart from other designers. Do to this I used one of my pages in my parallax site as a gallery. This gallery would showcase some of my photos, this would be the second page as my design work is my main area and skill set.

Screen Shot 2017-03-19 at 20.31.13Here is my gallery, it features mostly automotive photography that I am mainly interesting in, along with a few other shots from my travels. This gallery auto plays upon opening and I have included thumbnails to the right of the gallery to show the other photos.

 

 

Screen Shot 2017-03-19 at 21.11.54.pngThe next page in my parallax site is contact information. Muse offers a contact sheet widget that is simple and easy to use and edit. I used the simple contact sheet in my site that asks for a name, email and optional company, along with their desired message. This only needed to be simple as if there was more boxes to fill out it would lengthen the process and potentially annoy the user and not get the message to me.

Designers often include links to external social media sites such as Facebook, Instagram, Linkedin, Pinterest, ect. As I have a design Instagram and Facebook page I wanted to link these from my website.

Screen Shot 2017-03-19 at 21.14.25.pngI decided to create .png icons of the two logos. I done this as I wanted the transparent background a .png file provides, this was also needed for me to create a rollover witScreen Shot 2017-03-19 at 21.15.22.pngh.

I created a fade to 50% opacity with the icons to show that they were buttons, I also included of my Instagram page that can be clicked on and take the user directly to the site.

 

 

 

 

 

Muse: Subtle Touches

To give the website some life and more engaging to the user I wanted to include some small rollover techniques.

To do this you simply need to click on the desired text, icon, image and then at the top left of the Muse screen you can access the properties of the selected element. You can then change four options, the normal look, rollover, mouse down (clicked) and when it is active.

I wanted to include a subtle light blue colour through the site with the black and white scheme. Looking at the semiotics and colour theory of blue which states the color is one of trust, responsibility, honesty and loyalty. It is sincere, reserved and quiet, and doesn’t like to make a fuss or draw attention. These are all qualities that I want to convey through my portfolio as a responsible and trustworthy designer that I believe I am.

I have blue rollover on my menu text items. This also has a small short fade into the colour which is something small but gives more depth to button. I think rollover is something you need in a website for users to know that the text actually acts as a button.

Screen Shot 2017-03-16 at 13.38.59

On the main page slideshow I also put a 50% grey fade effect on each image when they are rolled over to show they are clickable and take you to another page, without this in preview mode I could see people missing out on the pages linked to the slideshow, which is also why I added the text underneath.

 

Muse: Adding Elements

Screen Shot 2017-03-18 at 21.37.24Upon opening the page I wanted the viewer (potential clients looking at my portfolio) to see a slideshow of my design work, that they could then click on to see more information and imagery.

Using the widgets tab I could simply drop a slideshow onto the page and resize it to the size I wanted it. Placing images was the same as the full size slideshow using cmd + d. I turned of cations, thumbnails, and counter and altered the playing options, as I wanted this to automatically play once the page is opened. I changed the transition speed to 0.7 seconds and the actual transitions to 2 seconds, I felt this was enough time for the viewer to see each piece of work and click on it if they wanted to see more.

Page Design

Screen Shot 2017-03-18 at 21.56.03.pngUsing a logo I had previously I set about designing the layout of my site, the logo placement, menus and navigational tools. I had planned a few different layouts and wanted to see how each of them worked on Muse. Firstly I wanted a standard horizontal navigation menu that would then take you to each page.

 

Screen Shot 2017-03-16 at 11.20.03

Here is what I tried first with a vertical menu. I had my logo situated the top left of the page with the tabs underneath. However once I did this and linked each tab to its anchor I noticed an annoying problem inside preview mode. The problem was when you click on a tab and it takes you to a page you then have to manually scroll to the next page or back to the top. I thought about putting a home button on each page, but this didn’t solve the problem or look very professional.

 

 

Anchors a vital tool when designing a wScreen Shot 2017-03-18 at 22.09.28.pngebsite, especially a parallax design. You can click
the anchor tool which
you can then mark where the beginning of each page starts, you can see on the left picture my 4 anchors for my menu bar. You link an anchor to a piece of text, image or button by selecting it and going to the hyperlink tab.

 

 

To solve the problem I had with my page navigation I done some quick research into static menus that stay stuck to the screen no matter where the viewer navigates to. This was exactly what I needed to do so my site worked fluently. To do this I used the ‘pin’ menu on the top tool bar.

This image above (left) is where I started to experimented with a pinned menu bar. I wanted to try and use icons for the menu, the logo as the home button, a camera and photography section ect. However I felt this was too minimal to use so I developed a wider menu with the logo and 4 tabs, all pinned to the left side of the screen so it followed the user where ever they went to.

 

File Organisation

Screen Shot 2017-03-19 at 23.16.52.pngSomething that was vital do in this project was to organise files so I can efficiently access them when inside Muse. This really helped me as it saved me trawling through my laptop to find design work and photography, this way I could have everything where I needed them.

As Muse is not coding it can be completed without the need for any files, however this creates a lot more effort for the designer as well as wasting  a lot of timeScreen Shot 2017-03-19 at 23.25.47.png

Muse: Designing Layout

Screen Shot 2017-03-13 at 15.53.12

After doing a few sketches of different websites I have decided to design a parallax website to show my portfolio as a designer. Using the same method as learnt in class, I created a document 960 x 4000 to give me my long rectangular page. Then adding a full page slideshow and placing my images in uses cmd + d. Then I had to change a few options in the slideshow properties to get the transitions correct and remove all of the onscreen buttons. Next was to add white boxes on top of the slideshow which act as the website pages. I created these boxes the same size as my laptop screen, so when the parallax moves the page fills the screen.

Screen Shot 2017-03-18 at 21.24.59.pngFrom looking at my plan I know I wanted 4 pages, so I created 4 equally spaced white boxes on my site. Having a plan beside me whilst designing really helped me with this process as I knew what I wanted to achieve rather than going straight in without any ideas. With the slideshow selected I then went onto scroll effects, which is what makes the slideshow transition when the user scrolls or clicks a tab.

This part used a lot of trial and error to make sure the transitions changed behind the white box, so when the viewer moved down past the page they were on the image would of changed. Eventually I got it how I wanted it and I am really happy with how it works. Using this parallax layout adds another engagement to the site as the viewer gets a chance to see more of your work whilst scrolling through, it also looks like the website has been developed more than a standard flat layout.

Once I was happy with how the scroll effects worked I then moved onto my designing. With my sketches next to me again, I wanted the first opening page to feature a slideshow of all my design work, with each piece linking out to another page with a brief descriptions and more imagery. I didn’t want to include a great deal of text in my site as some of the better websites I looked at in my research didn’t and let their work speak for themselves.

 

 

Wix: Mobile

One of the benefits of using Wix’s online editor is that it comes with a mobile editor too. This is important because of the amount of users that browse websites on mobile devices. Wix automatically tries to rearrange your main desktop site into a mobile version and does a good job of it, allowing you to change into the mobile version, edit it and not effect the main desktop version.

 

WIX Development

From my sketches that I have carried out I wanted to include a photography page on my website to show another aspect to my skill set. I didn’t want these to be the at the forefront of my site as it is not want I want the audience to see first. I created a tab on my navigation bar which linked to a photography page. I created a gallery of some of my photos from automotive photography to my travels.

 

An about page is also a common feature to designers websites, which gives a brief bio about who you are, what you have accomplished and what you can do. I have included my own photography in this page as a background.

Screen Shot 2017-03-15 at 21.04.55

 

For my contact page I included a simple contact form as well as my contact number and email. The contact form makes it easy for people to contact me directly through the website which I can then reply too. This is particularly useful for possible clients with questions or potential job offers.