Pinterest Stumbleupon Whatsapp
Advertisement

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

Advertisement
  • 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.

Leave a Reply

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