Komplette Redesign WmTipp 2018 zu Material Design V1.0.3

Ich habe einen Blog Artikel verfasst - Wie benutze ich die Suche richtig - Bitte diesen beachten und auch umsetzen bevor Ihr ein Neues Thema eröffnet!
  • Hallo Zusammen


    Ich bin auch schon seit einigen Jahren dabei und freue mich sehr über dieses tolle Skript von euch! Tolle Arbeit!

    Mir kam aber das Design für das Jahr 2018 sehr altbacken rüber. Diverse Dinge störten mich ^^ (Bsp. Farbverläufe, Schatten, Spiegelungen, etc. sind sowas von out)

    Ich weiss, der Fokus liegt auf den Funktionen des Skripts und nicht auf dem Aussehen. Durch meine Kenntnisse als Webdeveloper dachte ich mir, ich vergebe dem Skript ein neues Design, welches auf Material basiert.

    Die Grundstruktur und die Navigation habe nicht verändert, da ich will, dass sich trotz neuem Aussehen immer noch alle zurecht finden.

    Ich habe so ziemlich alle Bilder durch neue moderne ersetzt und an allen Ecken und Kanten etwas herumgeschraubt. Zusätzlich wurden alle Flaggen durch neue Flat-Flags ersetzt.

    Der Aufwand war ziemlich gross und ich wäre bereit dazu, dies euch zum Download anzubieten sofern Interesse besteht.

    Der Mobile-Bereich habe ich nämlich noch nicht angepasst. Wäre auch in meinem Umfeld nicht relevant. Deshalb würde ich diesen Teil auch nur umsetzen, wenn jemand Interesse an dem Design hätte.


    Also lasst doch ein Feedback da und ob ihr daran interessiert seid. Wünsche können natürlich angebracht werden.

    Das Design basiert auf der Version 1.0.3.


    Konkret wurde geändert:

    - Menü oben und Navigation, Aussehen

    - Schriftart im ganze Script

    - Alle Flaggen von klein bis Gross wurden durch neue ersetzt

    - Emojis im Chat wurden erneuert

    - alle Buttons durch Material Buttons ersetzt

    - Dropdowns durch Material Dropdowns ersetzt

    - alle Input-Felder durch Material Input felder ersetzt.

    - Schriftfarb in Tabellen-Header

    - Alle übrigen Icons (im Menu und allg. auf der Seite)

    - Profilbild-Icon

    - Links werden besser dargestellt

    - Design-Richtlinien nach Material-Design, wenn möglich umgesetzt und eingehalten.

    - Tabellen im Material-Desing



    Ich finde es wirkt um einiges moderner. Am besten vergleicht ihr es mit dem Aktuellen Design, dann seht ihr sicher die Unterschiede.:)


    Hier ein paar Eindrücke:


    pasted-from-clipboard.png

    pasted-from-clipboard.png

    pasted-from-clipboard.png

    pasted-from-clipboard.png

    pasted-from-clipboard.pngpasted-from-clipboard.png



    Liebe Grüsse & eine schöne Woche :P


    Mike



    ---- 01.06.2018 ---

    Das Design-Addon findet ihr unter https://www.mikegmuender.com/wmTippMaterial.zip.


    Das sind nur die Dateien die es benötigt um das Material Design zu erhalten. Sind ca. 190 Dateien, da sieht man, war eine menge Arbeit, und ist jetzt noch nicht zu 100% fertig...


    Könnt mir aber gerne melden falls ihr noch etwas entdeckt.


    -- 04.06.2018 --

    Changes:


    -Css Anpassung der nicht schön dargestellten Checkboxen korrigiert.

    5382-dbrefresh-jpg

    Datei 'materialize.css' in den ordner css/ überschreiben.

    css.zip



    -- 04.06.2018 -- 2

    index.zip


    Fix: Background wurde, wenn Tippspiel nicht im Rootverzeichnis liegt, angzeigt.
    Einfach index.php überschreiben im root-Verzeichnis des Tippspiels. (VOHER SICHERN und bei eigenen Modifikationen zuerst vergleichen!!)

    2 Mal editiert, zuletzt von Arboncity () aus folgendem Grund: Das Design-Addon findet ihr unter https://www.mikegmuender.com/wmTippMaterial.zip. Das sind nur die Dateien die es benötigt um das Material Design zu erhalten. Sind ca. 190 Dateien, da sieht man, war eine menge Arbeit, und ist jetzt noch nicht zu 100% fertig... Könnt mir aber gerne melden falls ihr noch etwas entdeckt.

  • Sieht sehr gut aus :thumbup:

    Ich hätte großes Interesse.

    Wenn es dann sogar noch responsive wird ist es Weltmeisterlich!


    gibt es einen Link zu einer Live-Version?

  • Hi Achillix


    Das Design ist nich Full-Responsive. Dazu müsste ich wirklich die ganze Seite von Grund auf neu designen, und das ist ein ziiiiemlich sehr grosser Aufwand..

    Das Tippspiel leitet aber wie bis anhin auf die mobile Webseite um, welche ich eben bei Bedarf auch neu designe. So etwa in diesem Stil:


    pasted-from-clipboard.pngpasted-from-clipboard.pngpasted-from-clipboard.png

  • Hallo Mike,


    nach den ersten Impressionen und screens denke ich das ich gut auf responsive verzichten könnte, da auch die mobile Version sehr elegant und wie du es schon selbst beschrieben hast, modern erscheint. Zeitgemäss halt :-)
    Also ich bin aufjedenfall interessiert und würde sogar dieses Design als Standardlayout vorschlagen !!!


    Wirklich tolle Arbeit!!!


    gruss