Muse-Website tutorial with Tim Part 1

As this project is about digital media and building websites, in Tim lessons we started learning the basics of making a website in the software Muse. We did a lesson where we went through all the basics to help us get to grips with the software and see how the program works.

screen-shot-2017-02-20-at-15-37-27

Here is where you can create menus such as home contact about etc. You start with a master page then you add further pages depending how many you want. You do this by simply clicking on the plus box next to page then you can rename them whatever you want. One thing we learnt is that If you want something to appear on every page, you need to create it on the master page. To start editing and creating the websites features you just double-click on the page your designing.

screen-shot-2017-02-20-at-15-37-53When you click on the page, this is what appears. This is where you start creating the website and start adding features. As you can see it looks quite similar to Illustrator and Photoshop. It contains guides and lines to help with placement etc. The first thing I did was create a header at the top of the page. screen-shot-2017-02-20-at-15-43-03I did this by using the rectangle tool, like I would in Illustrator. There was no specific reason for choosing the colour pink, this is just a mock-up and an experiment on how to use the software. The font as well was just an experiment, again I used the type tool which I have used in previous softwares.

 

As you can see, where I have made a design on the master page, it has copied onto the rest of the pages within the website. This is a good technique for menu bars, social media icons etc. This shows you a clear layout of what your website includes and what pages I have within the website.

To create the menu bar at the top of the page, you click on the tab Widget Library and then clicking menus and horizontal. Then drag it onto the design and re-scale it to the size you want and colour.Here I can change the colour and font style to match the rest of the page.

After adding the menu bar, Tim told us that there was a way of changing the effect that happens when you move the mouse/ cursor over the box. For example Rollover, mouse down and active etc. This is done when the box or menu is selected and you then go to menu item and you can change the style a well as colour and appearance. With these menus you can add further pages (not on the master copy) and add edition information.

I went on to add drop down boxes and finish the whole top bar of my mock-up website. This task really helped me with learning about muse software and I intend to use my web design research and this lesson together to help create a really good website for this project. I intend to do further research into websites and their page layout and why they are so effective. I also want to build up my skills in muse so that my website is to the best of my ability. I know we are going to do more tutorials with Tim in weeks to come.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: