Pinterest Stumbleupon Whatsapp
Ads by Google

personal landing pageThere are two main stages involved in the website design process. The first is designing the look of the pages and the second is translating the design into the actual product – the webpages. The first stage requires design skill while the second stage needs coding expertise. The problem is, finding an individual who has both skills is difficult.

For those who have better eyes for design (and no interest in coding), there’s Muse from Adobe. The company claims that this multi-platform AIR application can help anybody to design and publish HTML websites without having to write any code whatsoever.

Start Planning Your Personal Landing Page

One question before we begin. Why would anyone use a web building tool like Muse when you can use WordPress and its themes instead? The answer is “customization”. Even though there are literally thousands of WordPress themes out there, customizing the theme to really fit our needs is difficult. Another reason is that using a WordPress advanced database system for a simple and linear site would be overkill.

You can download Muse from the website. It’s available for free until the v.1.0 release in early 2012. The application works under Windows and Mac, but it requires that your system has AIR installed.

To better understand how Muse works, let’s try to use it to create a simple personal landing page Five Tips To Create A Cool Looking Personal Landing Page Five Tips To Create A Cool Looking Personal Landing Page Read More , something along the lines of Flavors.me Flavorsme - Create Your Own Free Personalized Webpage Flavorsme - Create Your Own Free Personalized Webpage Read More or About.me. Start by choosing “Create New Site” from the startup window or from the File menu.

personal landing page

Ads by Google
  • Then you will be asked to customize your site by choosing the page width, the number of columns, margins, etc.

create landing page

  • The first step in building a website is deciding how many pages it will have and what the relation is between the pages. You can easily add, delete, and rearrange pages in the “Plan” window.

create landing page

  • Click the “+ (plus)” button to add, and the “X” button to close. Click on the page name to rename, then drag and drop to rearrange.

create landing page

  • At the bottom of the page, you can see the A-Master page. This is the template that will be used throughout your site. So if there are elements you want to keep on all your pages, it would be so much easier if you define the elements at A-Master instead of repeating them over and over.

create landing page

Start Building

  • If you double click one of the pages, it will be opened in a new tab. You can start building and designing the pages using the tools at the top toolbar.

create landing page free

  • Other tools that will help you along in the design process are the “Panels” on the right. You can show or hide these panels via the Window menu.

create landing page free

  • To build our personal landing page, let’s change the background by inserting an image. You can customize the image by changing the scale and position.

create landing page free

  • Next, let’s add a navigation menu by choosing it from the Widget panel, then dragging and dropping it into the webpage.

03b insert menu

  • You can customize the navigation menu using the “Options“. Click the small blue arrow to summon the Options window.

03d widget options

  • You can also change the text appearance (type, color, size) using the “Text” tab in the right panels.

03e modify text

  • Then you can add Texts and Rectangles using the tools on the toolbar. Drag these elements to the position that you want, and customize them via the right panels. To add external links (or other HTML elements), use the “Insert HTML” menu under “Object“.

06a insert html

  • Write down the HTML code of the links in the pop-up window and click OK to add it to the site.

06b html code

  • Similar to the other elements, the inserted HTML code is highly customizable. Unfortunately, we still can’t change the link color. Hopefully this feature will appear in a future version of the app.

06c inserted link

  • After everything is set, you can see the result by clicking on the “Preview” link.

07a preview

The Last Step

  • After everything is set, you are ready to put your site out on the web. To do that, use the “export as HTML” menu under “File“.

08a export html

  • Decide on the location to save the project, and click “Export” .

08b Export to HTML

  • If you want to attach your personal landing page to a URL you already own, use any decent FTP client to upload everything inside the folder to your web hosting account. Since different hosting providers use different settings, please consult your hosting provider about this.

personal landing page

This short experiment has shown us that creating a personal landing page using Muse is as simple as adding and customizing elements. But Muse is also capable of creating more complicated sites with multiple pages. There are many examples of websites showing what Muse can do on their “Showcase” page. To learn more about Muse, you can visit their “Learn” page.

What do you think about Muse? Will you try this tool to help you build your website? Share your thoughts in the comments below.

  1. jino jose
    October 22, 2011 at 7:23 pm

    When we we export it to HTML, the text is not editable.. muse cuts the page to Pixels? is there any way to avoid tat?

    • Tina
      October 27, 2011 at 6:53 pm

      Jino,

      I'm afraid Jeffery, the author who wrote this article, no longer works for us. If you are still looking for an answer to your question, feel free to post it on MakeUseOf Answers with a link back to this article. Thank you!

  2. Anonymous
    August 26, 2011 at 12:02 pm

    can it be used for Tumblr too??? awesome article btw

  3. HaMaDa
    August 25, 2011 at 9:05 pm

    Thank you Jeffry, but can we use it to build a wordpress theme?

    • Anonymous
      August 26, 2011 at 7:30 am

      I haven't tried that. I think it's not impossible, but the conversion process wouldn't be simple. Let's hope that Adobe will add "convert to WordPress theme" feature in the future version. :)

  4. Colorartist
    August 25, 2011 at 7:48 pm

    Please, please, please, Jeffry... Check your grammar! "There are...", not, "There's..." when you have a plural! (...two main stages...) Please make the correction. Thanks. That is such a big mistake, particularly at the very beginning, that I couldn't bear to continue with your article.

    • HaMaDa
      August 25, 2011 at 9:03 pm

      Didn't you forget to tell him thanks for his effort and time before asking him to check his grammar ?!
      and by the way it's not his problem that you couldn't bear to continue with his article, it's your problem that you don't have desire to learn something new whatever the situation is.

      • Colorartist
        August 26, 2011 at 12:27 am

        Yup! Thanks, Jeffry. Thanks, HaMaDa.
        I love to learn the tips and tricks of the trade. I do learn from those who put forth effort. I'll read through this article after Jeffry makes his edit(s) needed for correctness. It's just a pet peeve of mine. If an author chooses to write directions on how to accomplish something, I need to see good grammar, logical steps, thoroughness, and clear explanations. So far, as just one person willing to learn, I have glanced at the article with great expectations, but, it is very important to be professional, and that includes good grammar.
        Thanks, HaMaDa, for the reminder to be thankful!
        Looking forward to reading this article soon.

        • HaMaDa
          August 26, 2011 at 8:12 am

          Actually i have nothing to say after your reply :-)
          Thank you.
          P.S.: there are many non-native English speakers who have lot of knowledge and tips which you will not find somewhere else, if you will continue to stick to your principle to not read any article if it contains grammar mistakes, you will miss a lot.  

        • Tina
          August 26, 2011 at 8:42 am

          So you're saying native speakers who have a lot of knowledge and valuable tips don't ever make grammar or spelling mistakes? ;)

        • HaMaDa
          August 26, 2011 at 9:21 am

          I'm not a native English speaker by myself to answer your question :-) but if @Colorartist was very upset and couldn't continue to read the article because of a little grammar mistake, then it seems to me that it must be a big issue if a native English speaker will make such grammar or spelling mistake (otherwise, no one will read anything written by him) :-)

        • Colorartist
          August 26, 2011 at 3:28 pm

          I'm not "very upset," especially toward non-native English speakers. I make allowances frequently as I read various articles. Many times, if I am reading something written by a non-native English speaker, their syntax may be off a bit, but I still read and learn from their point of view and from what is being said. I'm just trying to encourage all authors, no matter their background, to improve their communication.
          With spelling and grammar checking capabilities of computers, it doesn't hurt to use what is available as an assist.
          Mistakes happen all the time. I make them myself. Edits are always needed. (I wish FB allowed for an author's own edits!)
          Let's all move forward, learn from the errors, and make the necessary corrections.
          Thanks, HaMaDa, for letting me know that my own communication seemed intolerant toward mistakes. I'm just trying to encourage improvements.

    • Anonymous
      August 26, 2011 at 7:37 am

      Thanks for pointing that out. I can't believe that I missed it. I'll make sure that the mistake is corrected ASAP.

      • Colorartist
        August 26, 2011 at 2:44 pm

        You're welcome.
        I hope I didn't come across as upset. I just like to see excellence and if I can help someone better achieve what they are trying to accomplish, (just like what you are offering,) it is my hope that it will benefit everyone.

        Hey, we all make mistakes––myself included. Glad to know you care enough to make it better!

        Again, Jeffry, thanks for the article. I really like all of the red arrows you used to direct attention to your point! I appreciate all of the visual aids.
         @font-face {
        font-family: "Times New Roman";
        }p.MsoNormal, li.MsoNormal, div.MsoNormal { margin: 0in 0in 0.0001pt; font-size: 12pt; font-family: "Times New Roman"; }table.MsoNormalTable { font-size: 10pt; font-family: "Times New Roman"; }div.Section1 { page: Section1; }

        “Perfection is not attainable, but if we chase perfection,
        we can catch excellence.”

            
        —Vince Lombardi

  5. RealTimeTricks
    August 25, 2011 at 7:24 pm

    Before reading this i was thinking Google Site is much convenient option to create FB landing page but now i think i should bookmark your article to read when i need my FB landing page to be created. 

  6. Rendy Ho
    August 25, 2011 at 5:25 pm

    Wow,Its Simple

Leave a Reply

Your email address will not be published. Required fields are marked *