Web Design

Class 1: Welcome & Course Orientation/Content


I create a simple "About" page for Class 1. It definitely is just plain text on the page. I had hoped that I would be able to use the Ctrl-B short cut to bold my text. However, that was not possible. It turned out to be Ctrl-Shift-B. That's going to take some getting used to. This issue led me to find a list of shortcuts that can be used for Muse. Here's what I found, updated on June 8, 2014 - Adobe Muse Keyboard Shortcuts for Macs.

Class 2: Introduction to websites and learning plan


The goals for my site are to provide tutorials, examples and review materials. My target audience includes students, instructors, staff and others who come to the site. After talking with a few people, it sounded like having both printed materials and videos would be advantageous. I’m planning to group material by program - i.e. Google, Photoshop, Illustrator, Blackboard, Canvas, etc. I need to make sure that the videos and printed instructions are written as simplistic as possible. I am also going to aim all of my materials towards a single audience. While different groups will be viewing the information, it should be presented with the idea that no one has a background in what I will be discussing.

Since I am creating tutorials, I will be needing to add a fair amount of images. I am going to need to make sure I scale down all of my pictures to a manageable size for quick download. I also need to consider the appropriate alt text for each image. I prefer to embed images so that they are less likely to be copied. I’m hoping there is a way to do that with margins like there is in Dreamweaver.

I’m glad that I have the Dreamweaver background. It’s making the concepts much easier to learn. All of the tools we have learned, I already knew from my work in Dreamweaver. The locations are different and some of the processes are different, but the overall concepts are identical. It’s going great so far.

Class 3: Wireframes, Master Pages and Widgets


I have to admit that I was excited to use the widgets. However, I found out that I really missed the manipulation of the code to make them do what I specifically wanted. I honestly didn't think it would be that difficult and it wasn't - another drag and drop motion. I am used to adding effects with CSS3, so I felt like I didn't have as much freedom as I would have enjoyed. With so many things going on right now, it was nice to just pop something into the web page without having to go through the code. My problem is that I want to know WHY something works. With Muse, I’m having a difficult time knowing why items are doing what they are doing. It is nice, but there is always a student who wants to know why it does what it does. I’m not sure what I would tell them when using Muse.

As for the widgets in my classroom, I can see lots of potential. Most of my students would not have a programming background and thus this option makes the most sense. Rather than having to teach them what needed to be manipulated to obtain the result they wanted, they would be able to drop in the widget and experiment. I do see a great advantage to this. I also think that the widgets would help to educate students that they can make their site(s) look as professional as the next person.

Class 4: Explore all things mobile and create an alternate layout of your site


I was disappointed in how mobile versions of my website had to be created. This was the first class where I really missed Dreamweaver. I prefer having a stylesheet that automatically adjust the site to the size of the system. I opted to use what I had, but it still felt like I was creating the mobile versions from scratch. It seemed to me that there should be an easier way to “convert” the desktop into the tablet and phone. I’m interested to know which screen size the phone actually applies to. With phones getting larger and larger, it’s possible that the content originally created for the phone would not be enough. If phones continue to increase in size, will we still need a phone option? I would love to push a button and have it automatically adjust for the mobile environments.

Showing students the importance of the different screen sizes would be extremely easy to do in Muse. It would allow me to discuss responsive and adaptive design in a way that they would easily understand. Using the different mobile versions would also allow me to teach students how they could adapt the different screen sizes to include different (not all of the original) content.

Class 5: Finishing touches on your site and publish for peer review


Publishing the site was extremely easy. Muse does all of the converting for you which is kind of cool. I was shocked that it had 98 pages to upload to my site. That aspect was crazy to even consider. I really thought that it would be shorter. I am wondering if there is a way to shrink the number of files?

The screenshot of the site I created can be found here.

I was able to link it directly into another site that I have. Like many of us, I really haven’t had much time to put into the course. I mainly wanted to create a site that had the basic functions to learn about Muse. I already see one alignment issue on the Phone version. This is a site that I believe could be useful, but I’m not sure what topics would really be advantageous and useful for others. So, feedback as to what should be on a training and tutorial site would rock. Thanks in advance for checking it out.

Class 6: Animations and Applications


My goals for this course were to learn Muse. Presently, I have a good foundation of Muse and where it can ultimately take me. I’m glad that I’m learning the program, but I really do like coding. I like knowing why something is working and being able to create my own items as needed. Muse is great for those that don’t want to learn coding or need something ASAP. It has definitely been a great experience and another program to add to my list. I would definitely consider using Muse when teaching web design to beginning students and faculty/staff.

I do plan to continue learning muse and maybe I’ll use it for a portfolio site I’m working on. There is always more to learn. But with all of the advancements of bringing a Photoshop file into Dreamweaver, Muse really isn’t what I’m looking for :-) I would like to see another course where we dive into scrolling, animation and other advanced topics. The interface of Muse is like other Adobe programs, so it’s easy to figure out where to find what you need.

My biggest takeaway is that I was able to create a barebones site quickly.

Final Assignment