Die Verwendung von Buttons auf Webseiten

Die Verwendung von Buttons auf Webseiten

Blogpost Bild für den Gebrauch von Buttons

Buttons auf deiner Webseite sind nicht nur Elemente auf die der Besucher klickt, sondern sie haben das Ziel den Besucher dazu aufzufordern etwas zu tun, mit deiner Seite zu interagieren und vor allem auf deiner Seite zu bleiben

Gestaltung und Platzierung von Buttons

Buttons sollten so kurz und klar wie möglich bezeichnet werden, um dem Nutzer die Möglichkeit zu geben Informationen leicht zugänglich zur Verfügung zu stellen. Das Ziel ist es, den Besucher auf deiner Webseite zu halten, ohne ihn zu verwirren und frustriert die Webseite zu verlassen.
Buttons sollte auf der ganzen Seite geich aussehen damit sie als Buttons zu identifizieren sind.
Plaziere Buttons immer da, wo der Nutzer Schaltflächen erwarten, wie z.B, oben rechts auf der Webseite oder bei Kontaktformularen. Verwende dafür A/B Tests, um die Gestaltung und Platzierung zu testen.
Buttons dürfen gerne dem Branding entsprechend angepasst werden. Und zum Schluss sollte die Anpassung an Mobilversionen nicht vergessen werden.

Die bekanntesten Buttons

Da wir an Buttons auf Webseiten so gewöhnt sind, fallen uns die geläuftigsten oft gar nicht mehr auf.

Bei Amazon, zum Beispiel, ist eine ganze Bandbreite an Buttons zu finden:

Einer davon ist der Anmelde Button, der dazu dient Zugang zu etwas zu bekommen. Dieser Button wird oft auch folgendermassen bezeichnet:

  • Registrieren
  • Jetzt starten
  • Loslegen

Der „Buy now“ Button ist wohl der bekannteste im Bereich E-Commerce und wird auch

  • Jetzt kaufen
  • In Einkaufswagen
  • In Warenkorb

aber auch

  • Zur Kasse

genannt. Durch diesen Button bekommt der Besucher die Möglichkeit eine Handlung auszuführen.

Spotify zeigt mit dem Download Button, dass der Besucher in den Besitz einer Sache gelangen kann. Obwohl der Download Button dem „In Warenkorb“ Button sehr ähnlich ist, setzt der Download Button grosse Vertrauen voraus. Denn nicht jeder Nutzer lädt sich willkürlich Produkte und Angebote herunter.

sportify

Auch mit dem „3 Monate Gratis“ Button stellt Spotify seine Dienste zur Verfügung mit dem Ziel, dass der Besucher das Produkt testet.
Andere geläufige Bezeichnungen sind:

  • Gratis Testperiode
  • Live Demo
  • Demo testen
  • Jetzt testen

Dieser Button ist insofern wichtig, da er Text oder den Inhalt auf Webseiten verkürzen kann und auch bei wenig Platz unterzubringen ist. Sollte dich der dahinter verborgene Inhalt nicht interessieren, musst du nicht weiterklicken oder umgekehrt, du kannst dir aussuchen, ob du weiterklicken möchtest oder nicht. Weiter Buttons dieser Art sind:

  • Weiterlesen
  • Mehr
  • Entdecken
  • Mehr Info
  • Mehr Details
subscribe button

Mit dem Abonnieren Button bekommt der Nutzer Zugang zu weiteren Information, Plattformen, Mitgliedschaften und mehr.

  • Beitreten
  • Abonnieren
  • Einloggen
  • Anmelden
  • Senden und Abschicken

    Buttons und SEO

    Buttons sind Verlinkungen und somit für das Ranking relevant. Durch internen Verlinkung werden Suchmaschinen Anhaltspunkte geben, was wo zu finden ist.
    Das gute daran ist, dass du interne Links zu 100% selbst kontrollieren kannst.

    Viel Spass bei der Gestaltung deiner Buttons!

    Signature

    12 amazing designers to follow on Instagram

    12 amazing designers to follow on Instagram

    designers-to-follow

    Instagram is no longer just the social platform for sharing pictures but actually a tool to find inspiration in your area of interest and on the other hand to share your portfolio and creative work and connect with people with the same interests from all over the world.

    Here’s the list of Instagram designers that I think will bring inspiration, fun and drama into your feed.

    @aykutmaykut

    Aykut Aydoğdu is a designer who specializes in Fine Art. His work is a pairing of surrealism and the daily dilemmas of life. Check out his Instagram if you like some kind of drama in your feed.

    @aykutmaykut

    @terryrunyan

    Terry Runyan is a visual artist and creative encourager and loves cats. That you can see in her daily work. Terry is active on Skillshare and Youtube and is a real inspiration for creatives.

    @terryrunyan

    @mirdinara

    Dinara Mirtalipova is a self-taught illustrator and designer. Her work is influenced by Russian folklore. Her feed is an explosion of colours and detail-focused patterns – and I am sure you will love it!

    @mirdinara

    @ndtank

    NDTank is a freelance illustrator and designer. I noticed his artworks on Redbubble and Society6. His often darker use of backgrounds and relation to nature makes for an inspiring page to have on your feed.

    @ndtank

    @jessicavwalsh

    Jessica Walsh launched her own studio &Walsh in 2019 after working together with Stefan Sagmeister at Sagmeister & Walsh. Her Instagram is an inspiration. She describes her creative philosophy at foldmagazine.com like this: „I want people who view my work to experience or feel something, whether it makes them think, brings them joy or offers them inspiration. I always aim to create functional work that achieves our clients‘ goals.“

    @jessicavwalsh

    @mattcrumb

    Matt Crumb is Time’s Top 50 Artists and captures people, places, and things in a colourful way. He inspires thousands to create their candy-coloured photos that you can follow @candyminimal.

     

    @mattcrump

    @naranjalidad

    Beatriz is an illustrator based in Madrid. Her focus is illustrating portraits in combination with nature and colours.
    You might recognize some of her work because her clients range from Vogue, Oysho, Adobe, Huawei, Lenovo, Hyundai, Editorial Planeta to Danone and more.

     

    @naranjalidad

    @alishylishy

    Alisha Cohan is a photographer, stylist and creative director. Her service includes photography, live videos and stop motion animation cleanly and creatively. If you like colours and videos that can give your feed a fresh feeling – check out Alisha’s feed.

    @alishylishy

    @poopikat

    I was fascinated by Kate Pellerin’s illustrations from the minute I found her on Instagram. She is specialized in picture book illustrations – if you want to learn more about it, you can join her mentorship.

    @poopikat

    @martinaflor

    Martina Flor is a Dutch Letting Artist, Author and Educator. I saw her works the first time when I followed an online course here in Denmark with her. Check her feed if you love lettering – you will not be disappointed.

    @martinaflor

    @amyjpeg

    Amy Blackwells Instagram feed is full of patterns, colours and gives your feed a feeling of happiness. Amy is an illustrator, painter and doodler.

    @amyjpeg

    @ella_lama

    Ella Lama lives in Manila, Philippines. She works as an illustrator and letterer, most of her time with Photoshop and Procreate. With a feed full of colour and dynamic designs, her Instagram is to keep your eye on.

    @ella_lama
    Signature

    How to find free fonts for commercial use

    How to find free fonts for commercial use

    free-fonts-for-commercial-use

    I recently had a customer who had a beautiful logo created by a freelance graphic designer. She then needed a website and flyer to go with it. The lettering was „free for personal use“.
    What does „free for personal use“ mean? In short: the font may not be used for commercial purposes. The font licenses often differ slightly – depending on the designer. Nevertheless, it is advisable to read the licenses carefully before using the fonts.

     

    Do I need a license to use fonts?

    The short answer is: YES.
    Because although this is your project, you are only allowed to use fonts for private use to a limited extent.

    For example, Canva allows the use of private fonts to create T-shirts or other print-on-demand products. However, the use of the fonts in logos and on websites is not permitted.

    Therefore: If the use of the font is not clearly stated when it comes to your branding, logo or website, ask the designer if you are allowed to use the font commercially. Commercial licenses can often be acquired for little money. The alternative is to use free fonts that can also be used commercially or create your own font.

    Where can I find fonts for commercial use?

    Google Fonts is my first place to go. Google Fonts are commercially viable and also work well for any web project.

    Creative Market provides new designs, fonts, posters, and much more for free download every Monday. Find „Free Goods“ in the footer. But again, read through the licenses to make sure that your favourite font is for commercial use.
    Creative Market is furthermore a good place for purchasing beautiful fonts for a manageable price.

      Creative Market
      Font Squirrel

      At Font Fabric you will find the category “Free Fonts” in the footer. You often get the free fonts with a „simple licensing“, which is often sufficient for freelancers, self-employed or small companies, and can be used for websites and logos.

      Font Fabric
      Creative Fabrica

      6. Canva

      This link to the Canva site contains 50 fonts that are free for commercial use and that you can use for your projects.

      7. Befonts

      Befonts is for sure a page that I have to take a closer look at. Befonts offers quite unusual fonts for commercial use.

      Befonts

      What I particularly like about Fontbundles? The selection and clarity of the page.

      Fontbundles

      9. Behance

      Behance is a product from Adobe to dicover creative work. Also here designers provide free fonts for commercial use.

      Behance

      10. Dribble

      Dribble is used for self-promotion for creatives and digital designers and is a portfolio platform. Still a good place to go to look for fonts.

      Dribble

      With 1001 fonts, the download is simple and easy. The fonts, available for commercial use, can be found in the navigation under „Special – Free Fonts for commercial use“.

      1001fonts

      At Fonts Space you will find over 82,000+ free fonts (as of 08/2021).

      Font Space

      13. Fontesk

      At Fonts Space you will find over 82,000+ free fonts (as of 08/2021).

      Fontesk

      How can I combine fonts?

      If you are looking for information on how to combine fonts, I can recommend the blog post from 99Designs. In this blog post, you will find 20 free font tools for typeface pairing.

      Download and install fonts

      Now it’s just a matter of finding the right font, downloading and installing it.

      And as I said, always pay attention to the details of the licenses as a precaution. If anything is unclear, sent a message to the font designer.

      Signature

      How to create a logo without being a designer?

      How to create a logo without being a designer?

      create-logo-without-being-a-designer

      Creating logos was not easy for me and were not naturally in my genes. Besides, it was an incredible challenge to create something that has to connect with my customer on an emotional level so that they are so enthusiastic about my proposal that further collaboration was possible.
      But how can you create a logo for your project, company or blog without being a designer?

       

       

      Why do you need a logo?

      A logo is part of your visual identity and what the customer uses to recognize and perceive you. A logo usually consists of one or more letters and often a visual symbol. Since your logo is part of your branding, the logo will appear everywhere, such as on your business card, stationery, and packaging. That’s why your logo should of course be perfect. That might give you sleepless nights. But to get your perfect logo, however, there are a few questions you can ask yourself.

      Understand yourself

      What makes me unique compared to my competitors?

      How would I describe my brand in 3-5 adjectives?

      How do I want my customers or readers to describe my product?

      Which colours do I want to use?

      What do my favourite colours mean in colour psychology?

      How do I want to communicate – what is my tone of voice?

      What values ​​do I want to convey?

      Write down everything that you can think of.

      Find inspiration

      And now – get inspired! I like to use Pinterest and I always make a board for every project. You can keep these boards secret so that only you can see what you’ve pinned.
      However, keep the questions and answers from above in mind that you already have worked out.

      Create a mood board

      Select your favourite inspirations and copy these on a sheet of paper. To make a final decision think about the following question

      Which typographic fits your product best?

      Which shapes, illustrations and graphics appeal to you the most?

      Which style suits you? Do you like it more feminine, clear, playful or maybe minimalistic?

      Feminine

      feminine logo

      Found on Pinterest

      Clear

      The German company Logona, for example, has a very clear logo.

      Playful

      Playful logo

      Found on Pinterest

      Minimalistic

      Ilva logo

      Source: Ilva

      Choose your colours

      Colour psychology is an aspect that should not be underestimated, as colours have a certain effect on people and trigger feelings in us – and that can be positive but also negative.

      You can find good insight into the psychology of colours, for example, at Oberlo.

      Typography 

      To complete your logo, make sure that you choose the right typography. In “How to chose the right typography for your website” I dive deepter into this topic. Ultimately I can say that you can choose from sans-serif, serif, script and display fonts.

      Now, you have chosen your font for your text, including a possible tagline. You have defined an icon or symbol and the colours for your logo. I think it is the time to connect the elements.

      Build your logo

      How can you now create your logo? What can you do that everything fits into each other?
      When designing your logo, make sure that you make it as simple as possible. It has to be printed in black and white and if possible should not be in line with the latest trend – trends pass.

      If you want to design your logo yourself and don’t want to work with a designer, you can simplify the process. My favourite platform to use in this case is Canva. Quite simply because many shapes and elements are available for free. Also, you can try different things for free until you then decide on a design. If you know how to use Photoshop or Illustrator, you can of course create your logo there. If you choose a hand-drawn or playful logo, I recommend the try out Procreate App.

      Logo Maker

      Believe me, I tried a lot of Logo Maker. Here are my favourites so far:

      Tailerbrands:  This is my favourite. Here I got the best results so far.

      Canva: Within Canva you can create beautiful designs. A lot of fonts, elements and even pictures you can get for free.

      Wix At Wix, you can hire your designer but also create your logo yourself. It is a possibility if you already have your website at Wix.

      Logomaker

      Ucraft At Ucraft, you are completely flexible if it comes to customizing your design.

       

       

      That was it for today! I would love to hear your comments or sent me your logo results!

       

      Signature

      How to choose the right typography for your website

      How to choose the right typography for your website

      right-typography-for-your-website

      Typography plays a fundamental role in web-projects. However, it often seems to be overlooked. But what is a web typography and how to use it?

       

      Print and web design

      Typography is such an important topic because it is part of your visual identity, branding, communication, storytelling and much more.

       The major difference between print design and web design is that print design is fixed content. Reading text on a screen is dynamic, often changing and sometimes on a background. If we read something on a screen, our eyes often jump around, searching for as much information as possible in a minimum of time. 

       The text on websites should be readable on different devices (Desktop, Tablet and Mobile). Due to Statista is more than half of the website traffic worldwide generated by mobile devices. That means that your typography should look good on all devices.

       

      Font measurements for your web project

      You should not just choose your typography because you like it, but you should also think about readability. There must be a balance between the text and the elements around it.

      According to iHeartMedia, the font measurements are:

       

      Mobile Type:

      Mobile Type

      iHeartRadio

      Web Type:

      Web Type

      iHeartRadio

      You can also try out the type tool from Jeremy Church.

      Typefaces

      The typefaces, we use to design our website, can be categorized under serif, sans-serif and cursive.

        Sans-Serif typefaces

        Sans-serif typo

        Use sans-serif typefaces in headings, subtitles, buttons:

        • Arial
        • Avenir
        • Futura
        • Helvetica
        • Lato
        • Montserrat
        • Open Sans

        Fonts used in larger sizes are also called „Display Fonts“.

        Serif typeface

        Serif typo

        Serif typefaces are easily readable when written in small body sizes and therefore used in body text.  Serif typefaces are popular to use on screens, such as websites and blogs.

        • Garamond
        • Baskerville
        • Palatino
        • Times New Roman
        • Rockwell
        • Allegro

        Large Font families

        Large families like „Roboto“ make branding easier if you plan a long-term project because you need to handle different situations like f.ex., writing a Newsletter or Blog, planning a marketing campaign or creating a logo. You can use the variety of the font in using different weight, a condensed version end more.

         

        • Alegreya
        • Roboto
        • Nunito
        • Merriweather

        If you still don’t know which font you should choose, think about what you want to communicate with your brand. Who is your target audience? Read other articles like Google’s Beginners Guide about choosing web fonts or Canva’s Guide to font pairing.

        I hope you enjoyed reading this article and it could help you choose the right typography for your web project.

        Signature

        Font Tip December 2020

        Font Tip December 2020

        font-tips

        I love to search for the perfect font for a new web project. But during the time and experience, I started to prefer free fonts. Simply because they either are preinstalled already on your computer, or you can download them without any problems. You can download all fonts at Google or I recommend other websites in this post.

         

        Font tip
        Owald-Montserrat
        Playfair-Raleway
        Playlist-Bebas

        You can download Playlist Script Font for  example at Dafontfree for free.

        Advent-Poppins

        I love the clean and minimalistic look.

         

        What’s your favorite this month?

        Signature