One place for hosting & domains

      Design

      10 Web Design Lessons You Can Learn From StarWars.com


      Learning to wield a lightsaber. Building the Death Star. Destroying the Death Star. These are all very technical, difficult things. But a few lessons that we can learn from a galaxy far, far away that aren’t so tough? How to design a website, courtesy of StarWars.com.

      With the official fan site picking up Webbys, it’s obvious there’s plenty to emulate regardless of your star system. And while we don’t all have Disney’s pile of Imperial Credits, StarWars.com provides design takeaways for website owners on every budget. Here are the top 10.

      1. Clean Navigation

      StarWars.com is packed with tons of options. You can read up on the latest news, watch clips, and find games, to name a few. The amazing part isn’t the wealth of choices and information — it’s how easy it is to find it all.

      No matter what your site is about, having smooth and simple navigation is crucial. Design your site so that everything is categorized into logical groups, with straightforward navigation that allows visitors to jump from one section to another fluidly. And while there’s a lot on StarWars.com, the number of items in the top nav is limited, which prevents guests from feeling overwhelmed.

      2. Bold Graphics

      Can you imagine Star Wars without the opening crawl credits? And where would the flicks be without the Millennium Falcon going into hyper speed or Luke Skywalker facing off against Darth Vader? The striking, iconic images from the Star Wars films are a huge part of the series’ success. StarWars.com captures that bold, recognizable aesthetic on every page.

      The StarWars.com homepage

      Your site needs bold graphics to capture visitors’ attention. And although your logo probably doesn’t have global recognition, that doesn’t mean you shouldn’t play it up. Make that front and center on your home page so that clients know they’ve come to the right place.

      Using custom imagery that is a fit for your site is also crucial since you want to use these photos to convey what your website is all about. If you rely on too many stock photos, it could make your site feel generic, and that’s never a good thing.

      3. A Smart Search

      One could spend days scrolling through all the content on StarWars.com — but an efficient search tool means visitors can find exactly what they’re looking for with just a few keystrokes.

      There’s no point in having great content if visitors can’t easily find it, and a strong search engine is the simple answer. Don’t think too hard about the design for this one — the standard magnifying glass icon works every time. The top right corner is the most popular location, so stick to that to make it easy to spot.

      The StarWars.com search bar

      4. A Call to Action

      In most cases, this is getting people to sign up for your newsletter or updates from your site. On StarWars.com, that button is at the top right corner of the page, and the site makes it a cinch to register for an account.

      Make sure the call to action on your site is equally strong and clear to find, with a design that naturally draws the eye toward it. After all, one of the main reasons to have a website is to make a sale or gather contact information from clients, and this is often the best way to do so. The form should be quick and easy to fill out. Finally, make the language of the call-to-action button clear, such as “Buy Now,” “Join,” “Sign Up” or “Download.”

      5. Informational Footer

      When visitors come to your site on a mission looking for something in particular, it should be quick and easy to find. A footer is the ideal solution — visitors expect to scroll down and find a wealth of information, and by putting it at the bottom of the page, it won’t disrupt your design.

      This is where you should include contact information, background on your company, and a lot more — here are 27 footer ideas.

      The StarWars.com footer

      But aside from all those helpful links, your footer’s design should be simple, clean, and easy to use, visually playing off the rest of the site. For example, StarWars.com features a subtle image of Darth Vader with a gray font. Simple touches like that tie the site together.

      6. Community Forum

      What’s the key to any successful film franchise? Their fans, of course. And StarWars.com gives them a place to virtually meet and mingle — they’ve got a “Community” tab, which has tons of information on how people can get involved, plus all things created by fans: organizations, blogs, news sites, podcasts, collecting sites, and fan film awards. StarWars.com also allows comments on blog posts; by allowing visitors to interact with each other, they’ve created another avenue for engagement.

      To get your audience engaged — with you and other visitors — create specific places on your website for interaction. This could even be as simple as a monitored message board just to get the conversation going.

      7. Good Fonts

      These should play off your logo and general aesthetic. However, don’t go overboard on a font that looks great but is hard to read. StarWars.com sticks to an easy-to-read font in white, which makes it pop from the dark background, and color is only used as an accent so it never feels overwhelming.

      The StarWars.com blog

      Make sure that the font you choose looks good across browsers and devices and that you have the rights to use it. If you need help narrowing down your options, check out this list of the 40 best Google web fonts. They’re all open source and completely free for commercial use.

      8. A Social Media Toolbar

      StarWars.com displays how to find their galaxy on Instagram, Facebook, Twitter, YouTube, Tumblr, and Google+ not once, but twice — with a toolbar at the top left of the home page and again with a “follow us” bar at the very bottom. They know the importance of building a following not just on their site, but across all social media.

      StarWars.com social icons

      There are more social platforms than ever before. Which ones should you use to promote your website?

      9. Engaging Videos

      From behind-the-scenes clips to a weekly digital series direct from Lucas Headquarters, StarWars.com has mastered the art of using videos to engage visitors. Luckily, you don’t need George Lucas to create footage of your very own.

      With all the easy-to-use programs out there, it’s easy enough to play director. Videos are a fun way to get your message across, such as explaining what your site or business is all about — and it tells the story in a faster and more engaging way than a ton of text can. Just make sure that you optimize your videos so they don’t slow down your site.

      10. A Mobile Site

      More and more people are surfing the net on their phones and tablets, so your site has to be equipped for more than desktop perusing. On top of that, Google now filters sites that don’t offer a mobile option for users. StarWars.com is designed to look just as good on a tiny screen as a big one. Make sure that your site translates across devices as well.

      You Don’t Need the Force to Design a Great Website

      Make your site stand out with a professional design from our partners at RipeConcepts. Packages start at $299.



      Source link

      How to Design a Website: 6 Key Tips for Success


      Designing a website is easier than it has ever been. Long gone are the days of manual coding and restrictive print-based layouts. Today, almost anyone can create a gorgeous, responsive, functional site in minutes — as long as you know where to start.

      Fortunately, the basics of website design are relatively easy to understand if you apply some common sense and careful planning. Your goal should always be to create a site that’s not just visually striking but is also easy to navigate and use.

      In this article, we’ll discuss the basics of designing a website and show you how to get started with six key tips. We’ll also introduce you to the Remixer website builder and demonstrate how you can use this tool to create a site quickly and easily.

      1. Plan Your Design Thoroughly

      Before you do anything, you’ll need a concrete and thorough plan. At this stage, you should clearly define your goals and expectations for your site and outline what you hope to accomplish with it.

      Here are just a few of the questions you’ll want to have clear answers to:

      1. Is the site personal or commercial?
      2. Do you want it to make money and if so, how?
      3. Will you be using advertisements or affiliate marketing?
      4. How much traffic are you expecting?

      Put your thoughts and ideas down on paper and start drawing up a plan. We mean that literally, by the way. A smart method of planning your site is to create sketches of how you want it to look and operate. You should also take everyone’s ideas into account if you’re working with other designers or collaborators.

      By the end of your planning phase, you should have a blueprint of the site’s top-level framework. This includes a plan for its user interface (UI), sidebars, and other page elements, as well as an idea of how navigation will work. Doing this first will make it much easier to bring your vision to life.

      2. Create Your Site’s Visual Identity

      When you’ve got an idea of what the structure of your site will be, it’s time to look at its appearance. You’ll need to choose the fonts and typography you’ll want to use. If you’re working from an established brand identity, consider how your choices match up to offline materials. It’s also worth exploring how well the fonts you choose work with multiple languages and how effectively they scale up and down on differently-sized screens.

      You’ll also need to decide on a color scheme. Again, if you’re creating a site based on a brand with an established visual identity, you’ve done most of the hard work already. Otherwise, picking a color scheme requires you to consider color theory and ensure your choices are accessible.

      Thinking about the ‘feel’ you want your site to have can make this decision easier. Colors represent different emotions and meanings, after all. For example, red is typically seen as an aggressive and impulsive color, while green is associated with health and the environment. You should take time to choose your colors carefully since they can help you create a cohesive visual identity.

      3. Consider the Layout and Navigation

      If you planned ahead as we discussed earlier, this step will be a lot easier. You’ve already considered how navigation will work on your site. It’s now time to dig deeper and think about your visitor’s journey.

      The visitor’s journey refers to the possible paths that people can take on your website. In other words, you’ll need to consider how users will access other parts of the site from any given page. After all, you won’t always have control over how users first arrive on your site, so you can’t just rely on a homepage to serve as your hub. Navigation needs to be available across your site, and it has to be accessible and easy-to-use.

      You also need to plan out the layout of each page carefully. To do this, ask yourself what each page on your site is trying to achieve. For example, if you want people to fill out a contact form, you’ll need a strong CallTo-Action (CTA) button. Your CTA should always be prominent and clear.

      Every element on a page should be designed to promote the overall goal. It’s best to start simple and add elements over time to ensure you aren’t adding unneeded information or features.

      4. Pay Attention to the Details

      When you’ve completed the overall design and layout of your site, it’s time to shrink your scope and focus on the details. These are the seemingly minor things that create the general look and feel of your site, such as buttons, menus, image placements, and so forth.

      Treat each component on your site as a stand-alone object and give it proper attention. This is the kind of precise work that can seem excessive but will greatly help to refine your site overall. Your goal should be to make the final product better than the sum of its parts, and spending appropriate time and effort on those parts is the best strategy.

      One way you can make your site ‘pop’ is by adding engaging elements like microinteractions. We’ve previously discussed that these are a popular trend — and for good reason. They help make your site feel more interactive and living since it’s able to respond to the user in small ways.

      You should also work on avoiding common mistakes, such as bad font rendering and poor color contrast. These are the kinds of issues that are easy to miss if you don’t get up-close with the individual components of your site. For that reason, make sure you give them the attention they require.

      5. Prototype and Share Your Design

      Prototyping is an important part of the design process. A prototype is simply a demo version of your site that you can share with others. It can be presented as images or you can create a static HTML representation of how each page is meant to look with little-to-no functionality.

      Creating a prototype is an important way to give others an idea of what the site will look like when it’s done. If you’re working for a client, they will naturally want an overview of your plans and the chance to suggest changes. You should, therefore, show them a prototype early on so they can provide feedback. This will save you time down the line, as they won’t be surprised or displeased with your work when it’s nearing completion.

      One thing to remember: site builders make creating a site so quick and easy that you often don’t need a separate prototype. You’ll be able to quickly put together a new idea and solicit feedback from others without creating a demo (more on this later).

      6. Challenge Yourself and Be Willing to Experiment

      Finally, remember that web design is a creative endeavor, and you should always be willing to challenge yourself. This applies when you’re creating your first website or your 50th. For example, you can consider new ways of approaching a particular design goal. Maybe you’ll experiment with different color schemes, images, or a more accessible navigation layout.

      This step is more important than it might seem. Not only will it help you to grow as a creator, but it will also give you an extra incentive to find new solutions. It’s easy to get stuck in a rut. Giving yourself a challenge in each new project is an excellent way to keep yourself focused and invested in your work.

      One smart way to get started is by finding inspiration in recent design trends. You can consider how you can implement those trends yourself or even improve on them.

      How to Design a Website With Remixer

      When it comes time to put the tips we’ve discussed into practice, you’ll need the right tool for the job. With that in mind, allow us to introduce Remixer. This is a website builder that requires no coding and enables you to create your site using an intuitive visual editor.

      The best thing about Remixer is that it enables anyone, regardless of experience, to create a website using the basics we’ve outlined throughout this article. With Remixer, you don’t need to know your way around HTML, CSS, PHP, or any other coding language to create functional and visually-striking websites.

      To start using Remixer, you just need to sign up for a free account. When you have signed in, you can start creating your site in two ways. The first is to choose a theme.

      When you hover over a theme, you can either preview it or select it as your starting point. This will open the Remixer editor, which we’ll look at soon. However, you can also choose the Create option in the upper right-hand corner. This will instead give you the choice of three different types of website.

      After you select one, you’ll be able to choose your site’s color palette. Remember to consider color psychology when making your decisions. You can select an option to see a preview of how it will look.

      Next, you can click on the Choose Images link in the bottom right-hand corner of the page. This will enable you to select a series of stock images to use on your site. You will be able to replace these later, so consider them more as a guide for yourself as you design your site’s appearance.

      Finally, you’ll select Choose Fonts to proceed to the next step. As you might imagine, this is where you’ll pick the fonts to use on your site. Find and select a font pair that matches the visual identity you’ve settled on.

      When you’re happy with your choices, click Preview Site. You’ll now be shown a snapshot of how your site will look. To preserve your preferences, select Save and edit this site. This will open your site in the Remixer editor, where you can edit its layout and content freely.

      Remixer is a click-to-edit builder. So to make any changes, you just need to click on an element on the page. For example, to update text, you just need to select it and make changes right in the editor.

      Other elements, such as images, can be changed with the menu on the left. Select the element you want to manage, and relevant settings will appear in this menu.

      To add new elements to the page, click the New buttons, which appear between existing sections. This will expand a selector, where you can pick the element you want to add to the page.

      At this point, you can freely make changes to your site. Every edit will be shown in real-time so it’s easy to experiment and see how your changes will affect the final result. As long as you remember the tips we’ve discussed throughout this article, you should be only a short time away from creating an excellent website with all the functionality you require!

      Need a Beautiful Website?

      Design it yourself with Remixer, our easy-to-use website builder. No coding required.

      Ready to Design Your Site?

      Even if you’ve never touched a line of code in your life, you can still create a great-looking, functional website. All it takes is understanding the basics of what makes a successful site and using an intuitive tool like the Remixer website builder to put it all into practice.



      Source link