One place for hosting & domains

      Design

      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

      How to Design an LGBTQ-Inclusive Website


      At DreamHost, we care a lot about accessibility and inclusive web design. The idea is simple: make your website as easy to use (and as welcoming as possible) for each and every visitor.

      Of course, you’re going to think about the abilities of your users and the demographics of your target market. But there is a huge population that many small business owners forget to consider when designing a website: individuals who identify as LGBTQ (an initialism for lesbian, gay, bisexual, transgender, queer, and questioning).

      “Wait,” you say. “People are people, and love is love.” And you’re not wrong!

      However, there are so many things you can do to make a website that is more inclusive and welcoming for all your visitors, regardless of orientation or identity. We’ll walk you through some of the key reasons you should consider the needs of your LGBTQ customers when designing a website (spoiler: it’s good for business) and then we’ll give you 12 key pointers to get started.

      Why Having an LGBTQ-Inclusive Website Matters

      “Making your site more inclusive for LGBTQ people can improve the user experience for everyone,” explains Jaymie Strecker, a non-binary Drupal developer at Kosada in Athens, Ohio. “Your site’s audience almost certainly includes people who are LGBTQ themselves or have LGBTQ friends and family. To provide the best user experience, you have to understand how that facet of their lives intersects with your site. Why would you want to alienate a significant percentage of your users?”

      Strecker points out that some people hesitate when they hear the word “inclusive” because they equate it with “politically correct” and are afraid it will take away their creative freedom in crafting content for the site. “They think it’s about following a bunch of rules about what you’re not allowed to say,” Streker says. “In reality, being inclusive is about understanding your audience and making your site resonate with them. It’s about breaking away from marketing clichés and reaching out to your users in a more authentic way. A more LGBTQ-inclusive site will come across as more vibrant, fresh, up-to-date, and friendly.”

      Another factor in having an LGBTQ-friendly site, the one we teased above, is that it’s simply good for business. “It’s 2018, we live in a capitalistic society, and online shopping is a must nowadays,” says Laura Egocheaga, Lead Digital Marketing Strategist at DivibeTech in Tampa, Florida. “Money does not discriminate, and analysts at LGBT Capital estimated the LGBTQ buying power at $965 billion in the U.S. and up to $5.4 trillion globally.”

      According to a Gallup poll in 2016, 7.3 percent of U.S. millennials identify as LGBTQ. In its 2017 Accelerating Acceptance report, media watchdog GLAAD put that figure much higher: 20 percent. On top of that, Egocheaga notes, younger people — especially Gen Z — are more embracing of queer culture overall.

      “No matter if you’re a startup or big brand, your objective is to capture the attention of a younger generation to increase the lifetime value of your consumer,” Egocheaga says. “An LGBTQ-inclusive website matters because you don’t want to be turning away that buying power, let alone be considered a horrible brand in Generation Z’s eyes.”

      For Queen of Surfing, a Hawaii-based expert on online publicity and marketing, the proof is in the numbers. “If you go online and research the top 100 followed entities on Twitter, 8 percent of them are gay or lesbian or transgender,” she says. “Even more awesomely shocking: 30 percent of the top 10 most followed people on Twitter are gay or lesbian or transgender. To make the error of excluding us from any version of online presence and not considering us as a demographic when creating your website is akin to losing out on 8–34 percent of your possible profits.”

      There are perks to having an LGBTQ-inclusive site within your company as well. It can help your employees feel safe and valued, regardless of how they identify. It will also help LGBTQ customers — and prospective LGBTQ employees — find you. For example, at DreamHost, we are champions of diversity — that’s why two of our core values are to empower people and give everyone a voice.

      12 Ways to Create an LGBTQ-Friendly Website

      So how can you tweak your site to be welcoming to all? Simply follow these 12 tips to create an LGBTQ-inclusive website.

      1. Use gender-neutral terms.

      Being inclusive when it comes to pronouns is crucial, especially in drop-down forms. “Gender forms should contain more than just binary options,” says Andrew Becks, co-founder and COO of 301 Digital Media, based in Nashville. “More to the point, why collect gender at all? Sign-up form completion rates will likely be higher with one less question, so maybe just avoid asking altogether unless absolutely necessary.”

      In addition to male and female, be sure to include ‘non-binary’ or ‘other’ as an option. “If ‘other’ is chosen, give them the option to write in what they want their gender to be,” Egocheaga says. “This will give you an in-depth look into that consumer’s mind so you can retarget them with specific marketing content.”

      If it’s an option on your site, a text field is the best bet since that will provide options that cover all of your users, explains Streker, who prefers to use the gender-nonspecific pronoun ‘they.’ “This allows people to write in options that you may not have considered, such as the Native American term two-spirit or the Native Hawaiian / Tahitian Māhū,” they says. “It irks me, as a gender non-binary person, to be forced to choose between radio buttons ‘male’ or ‘female.’”

      2. Include a variety of images.

      “Avoid clichés like featuring only opposite-sex couples in photography,” Becks says. Use pictures and graphics that represent individuals and couples from the LGBT community.

      “Facebook does a great job at this when they have two males or two females get married and share it as a milestone post, showing an icon of two males or an icon of two females dressed up,” Egocheaga says. “It’s the little things that make a huge difference.”

      Though there aren’t many LGBTQ-inclusive options on popular stock photo sites that you can buy, there are sites that offer inclusive content that reflect the diversity of your audience, such as TetraImages.com, the LGBT section at Twenty20, Blend Images, PhotoAbility, and the Getty Images Lean In Collection.

      “Drawings can include LGBTQ people, too,” Strecker says. “For one of my company’s websites, to explain our product in a fun way, we commissioned a comic from artist Kelci Crawford that features a genderqueer character.”

      3. Show targeted products.

      “Where appropriate, have a section of the website dedicated to an organization’s LGBTQ-community outreach efforts or LGBTQ-targeted product offerings,” Becks says.

      “And definitely include that page on the menu so it catches everyone’s attention right away,” Queen of Surfing says. “A ‘straight’ person coming across your site might now forward it to their LGBTQ friend, having noticed that mention on your menu.”

      Want a real-world example? On its LGBTQ community page, Kimpton Hotels and Restaurants spells out the organization’s commitment to diversity. In 2014, the hospitality giant became the first national hotel sponsor for The Trevor Project (the country’s largest organization that works toward crisis and suicide prevention for LGBTQ youth), donating hotel rooms, meeting spaces, and catering, in addition to hosting fundraisers for the organization across the country. Additionally, Kimpton often caters to LGBTQ guests through their blog, Life Is Suite, with posts like 5 Unique Trips LGBT Travelers Will Love and Our Favorite 10 Gay Bars from San Francisco to Philly.

      4. Use SEO to Promote Your Site

      When you have an LGBTQ-inclusive site, you want to ensure the community finds it — and there are tricks for making that happen. “Build external links and partnerships from LGBTQ-community websites and blogs to diversify and improve a site’s SEO backlink profile,” Becks advises.

      Queen of Surfing emphasizes the value of a meta-tag to drive an audience. Essentially, a meta-tag is how people find your website. When you go online and input search terms in a search engine, those very words are meta-tags. To make your site pop up in first in searches, use these words repeatedly in your website.

      “In a nutshell, to attract the lesbian, gay, and transgender community to your website, meta-tag it by repeatedly mentioning the words ‘lesbian,’ ‘gay,’ and ‘transgender’ along with your matching product or service organically and wherever appropriate within your website,” Queen of Surfing advises. The keyword opportunities are limitless, she says:

      • If your site promotes cruises, include content that specifically mentions ‘lesbian cruises.’
      • If you focus on charity events, create content targeted around the phrase ‘gay charity.’
      • If your site covers healthcare topics, include an article about ‘transgender healthcare.’

      “You better believe when we go online, we don’t just search for a product or service,” Queen of Surfing adds. “We definitely input the words ‘transgender,’ ‘gay,’ or ‘lesbian’ with any product or service when we perform online searches.”

      5. Educate yourself about LGBTQ issues and terminology.

      “You can’t improve the user experience for your LGBTQ users until you understand where they’re coming from,” Strecker says. “This is an ongoing process. There are many ways to do it.” Here are a few examples:

      • Hire speakers to talk to your team about LGBTQ awareness.
      • Attend or sponsor events for LGBT people and allies in tech (for example, DreamHost sponsored an LGBT+Allies meetup during WordCamp US).
      • Follow blogs of LGBTQ advocacy organizations.
      • Get involved with local LGBTQ advocacy groups.
      • Support policies that promote diversity in the workplace.
      • Make LGBTQ resources available for employees.
      • If you have an LGBTQ person on your team, get their feedback. “They may have some valuable suggestions,” Strecker says. “But don’t put all the burden on them. Every member of your team should take responsibility for making the site more inclusive.”

      Strecker points out that the LGBTQ community is an incredibly diverse group with many communities and different points of view, consisting of people of all races, ethnicities, and nationalities. “LGBTQ people are wealthy and poor, urban and rural, and across the political spectrum,” they says. “Different LGBTQ people talk about their identities in very different ways.”

      Be sure to consult with the LGBTQ community for different aspects of your website. “Include LGBTQ representation in the website design, development, testing process, hiring, and vendor selection,” Becks adds.

      6. Collect only the data you need.

      “If your site is intended to be GDPR-compliant, you should already be doing this,” Strecker says. “Do you really need to ask your users what their gender is? If you don’t have a specific plan for how you’re going to use that data, don’t ask for it. If your users are participating in an online community, they may not need to know another user’s gender, but it can be helpful to know the pronouns to refer to that user (she/her, he/him, they/them, etc.). So, your user registration form can ask for the user’s preferred pronouns. To protect users’ privacy, this should be optional.”

      Remember to think about why you are collecting this data in the first place. Consider your present and future needs, and what you plan to do with the details you amass. If there isn’t a valid purpose for it, reconsider your approach.

      7. Tell users how you’re going to use their data.

      If you do ask users for their gender, sexual orientation, or other personal information, Strecker advises telling them how you’ll use that information:

      • With whom will it be shared?
      • Will it be shown publicly?

      “Because trans people may go by different names in different situations, when asking for a user’s name you should provide help text or other context to explain how that name will be used,” Strecker says.

      For example, if you’re asking for a phone number, inquire what name they want to be addressed by if you’re going to call them. When you ask for an address, have a name field that goes with that address. If you’re collecting donations, what’s the name that should appear on the tax receipt? What’s your billing name if you’re asking for credit card information? If you’re hosting an event, ask what name should be on the badge.

      8. Watch your language.

      “When writing the content for your site be mindful of non-binary terms,” Egocheaga says. “Gender fluid people are not confused, and you must be mindful of that. All LGBTQ people want is to be respected and acknowledged for who they are.”

      When asking for a user’s sexual orientation, there are so many possibilities — it’s not just lesbian, gay, or bisexual — so your best bet is to provide a text field, Strecker advises. When asking for a user’s title, in addition to the usual “Ms.”, “Mr.”, and so on, include the gender-neutral title “Mx.” and make the field optional.

      Questions about relationship status should consider more than just married or single. “With more and more kids growing up in households with same-sex parents, it’s time to retire the perennial security question: ‘What is your mother’s maiden name?’” Strecker says. “These may seem like small things, but they can make a big difference in making LGBTQ users feel welcome on your site.”

      9. Protect users from harassment on your site.

      “More and more online communities are instituting community agreements that protect users from harassment and hate speech,” Strecker says. “A web search will turn up many templates and examples to help you get started.”

      To make sure users understand your expectations, your community agreement should list some of the kinds of harassment that are banned, for example: “on the basis of race, ethnicity, disability”. This list should also include sexual orientation, gender identity, and gender expression.

      “Have a plan for how to respond to homophobic and transphobic comments,” Strecker says. “This may include deleting the comment, speaking to the user, and/or suspending the user’s account. Empower users to protect themselves. Many sites let users flag inappropriate comments to bring them to the attention of a moderator (who should be knowledgeable about LGBTQ issues). If your site has private messaging, enable users to block other users.”

      10. Use security best practices to protect users’ data.

      “Leaked data is bad for any user, but the consequences can be especially dire for LGBTQ users,” Strecker says. “For LGBTQ people who are not out at work, being publicly outed could get them fired. Twenty-eight states in the U.S. still have no laws protecting private employees from discrimination based on sexual orientation and gender identity. LGBTQ youth who are not out at home are incredibly vulnerable. If their family finds out, they could be abused, subjected to conversion therapy, or kicked out of the house.”

      In fact, a national survey by the University of Chicago found that lesbian, gay, bisexual, and transgender youth had a 120 percent increased risk of experiencing homelessness compared their peers who identified as heterosexual and cisgender.

      11. Support a cause.

      “If you’re a social enterprise make sure to showcase it on your site by showing exactly how you’re giving back to the LGBTQ community,” Egocheaga says.

      Whatever you decide to support, show how you’re helping on your website. “The LGBTQ community is known for having an open heart, and we tend to align ourselves with entities whose products or services are either sustainable in themselves, or entities who donate to worthwhile charitable causes and activism,” says Queen of Surfing. “Is your product or service eco-conscious in some way? I highly recommend overstating everywhere on your website wherever energetically appropriate each and every way your product or service is eco-friendly. This is guaranteed to attract the lesbian*gay*transgender*bisexual*queer pocketbook.”

      12. Avoid making homophobic and transphobic remarks.

      “I can’t tell you how many times I’ve seen someone do this, then dig themselves in deeper by saying, ‘It was only a joke,’” Strecker says. “If you mess up, own up to it, apologize, and be more mindful in the future.” This goes for all of your platforms. In addition to being careful about your website, keep the same policy in place for social media and any additional marketing materials.

      “The more you educate yourself about LGBTQ terminology and issues, the more you develop a sense of what is and is not appropriate to say,” Strecker says. “You can relax and be spontaneous in your online interactions without accidentally saying something hurtful.”

      Creating a Welcoming Website

      We all want to be treated with dignity and respect, regardless of who we are or where we come from. Your LGBTQ visitors deserve the same consideration you give your other users. And human rights aside, it just makes good business sense to make this diverse group feel at home when they visit your corner of the web.

      So tell us, how have you created an LGBTQ-inclusive website? Any other tips you’d add to this list? Share with us on social media or join the DreamHost Community to start a discussion.



      Source link