DASPOOT sucht das Superdesign!

Dieses Thema im Forum "Offtopic" wurde erstellt von DASPOT, 7. November 2014.

  1. DASPOT
    Offline

    DASPOT Moderator

    Registriert seit:
    1. November 2011
    Beiträge:
    1.445
    Ort:
    minecraftnews.de
    Minecraft:
    DASPOOT
    Hallo Leute

    Ich bin gerade dabei, meine Website zu Designen. Allerdings habe ich überhaupt keinen Plan, wie diese aussehen soll.

    Deshalb dachte ich. Ich frag euch einfach mal. Was ich suche, sind einfach Musterbilder von Designs. Evtl. wäre es auch praktisch, wenn das Design bereits irgendwo existiert, muss aber nicht, da die endgültige Umsetzung auch ich übernehmen kann/will.

    Also. Wenn ihr Designs habt, dir euch richtig gut gefallen, schreibt es mir drunter. Oder ihr habt Lust, mir einen Designvorschlag zu bringen, dann macht da doch dann ein Bild davon und schreibt es auch. Bitte schreibt da dann drunter, ob ich dieses Design dann auch, wenn ich es umsetze, für "meine Referenzen" nutzen darf, ob ihr da irgendwie erwähnt wollen würdet,...

    Meine prinzipiellen Ideen für das Design:
    - Modern
    - Schlicht gehalten. Sowohl Farb(Auswahl), als auch der Umfang der Seite.
    - Themen, mit denen sich die Seite beschäftigt:
    -- Webdesing
    -- Musik
    -- Downloads,...
    - Dachte evtl. an "Win-8-stil", gerne auch anders.

    Es gilt natürlich prinzipiell: Diese Ideen müssen nicht alle mit einbezogen werden! Könnt ruhig auch mal mutig sein und was andres machen. Und je mehr Designs ich gesehen habe, desto genauer kann dann wahrscheinlich sagen, was ich will.

    Mal schauen, ob sich n paar Leute finden, die genug Langeweile haben :D. Falls irgendjemand mit mir persönlich darüber sprechen will, einfach melden. Z.B. Auch, wenn man da Ideen hätte und die mit mir gerne besprechen würde.

    Ich würde mich über jeden freuen der sich die Mühe macht. Mal schauen, was dabei rauskommt. Wenn ich Zeit habe, mache ich dann vielleicht auch eine Sammlung der besten Ideen mit ggf. Name.

    Da ich während des Schreibens dieses Threads irgendwie meine Meinung leicht geändert habe, hier ein kleiner Nachtrag: Ich suche allerhand Designvorschläge in alle Richtungen, wie gesagt, für evtl. kleine Sammlung.
     
    #1
  2. Angel
    Offline

    Angel Moderator Redakteur

    Registriert seit:
    2. März 2012
    Beiträge:
    1.442
    Ort:
    Niedersachsen
    Minecraft:
    BeatingAngel
    Ich hätte da was kleines zusammengeschrieben :D

    Der Code für das Dopdownmenü ist von designyourweb.info ^^^

    [​IMG]

    Dropdownmenü würde dann so aussehen.

    [​IMG]
    (variiert je nach font-size)

    In der Mitte wäre dann halt Platz für anderen Content

    Am Besten du probierst es einmal selbst aus :D (Es gibt allerdings ein Problem beim Zoomen was dir schnell auffallen wird + eine Menge Anfängerfehler xD

    Code (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html>
    4.  
    5. <head>
    6.     <title>DSDS</title>
    7.  
    8.     <meta charset="ISO-8859-1">
    9.     <meta name="description" content="HTML Zeugs">
    10.     <meta name="author" content="4ngelKiller + Code von designyourweb.info">
    11.     <meta name="keywords" content="">
    12.     <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
    13.  
    14.     <link href="Design/style.css" type="text/css" rel="stylesheet">
    15. </head>
    16.  
    17. <body background="1517171.jpg" id="lolwut">
    18.     <div id="Eins">
    19.     <nav>
    20.         <ul>
    21.             <li class="dd1">
    22.                 <a href="#">Musik</a>
    23.                 <ul>
    24.                     <li><a href="">Platzhalter</a></li>
    25.                     <li><a href="">Platzhalter</a></li>
    26.                     <li><a href="">Platzhalter</a></li>
    27.                     <li><a href="">Platzhalter</a></li>
    28.                 </ul>
    29.             </li>
    30.             <li class="dd2">
    31.                 <a href="#">Webdesign</a>
    32.                 <ul>
    33.                     <li><a href="">Platzhalter</a></li>
    34.                     <li><a href="">Platzhalter</a></li>
    35.                     <li><a href="">Platzhalter</a></li>
    36.                     <li><a href="">Platzhalter</a></li>
    37.                 </ul>
    38.             </li>
    39.             <li class="dd3">
    40.                 <a href="#">Downloads</a>
    41.                 <ul>
    42.                     <li><a href="">Platzhalter</a></li>
    43.                     <li><a href="">Platzhalter</a></li>
    44.                     <li><a href="">Platzhalter</a></li>
    45.                     <li><a href="">Platzhalter</a></li>
    46.                 </ul>
    47.             </li>
    48.         </ul>
    49.     </nav>
    50.     </div>
    51. </body>
    52. </html>
    53.  
    Hier ist der CSS Code :D

    Code (Text):
    1.  
    2. #Eins{
    3.     font-size: 30px;
    4.     background-color: #D5E0EC;
    5.     width: 80%;
    6.     height: 1200px;
    7.     margin-left: 10%;
    8.     margin-right: 10%;
    9.     opacity: 0.5;
    10.     margin-top: 5%;
    11. }
    12.  
    13. #lolwut{
    14.  
    15. background-image:url(1517171.jpg) no-repeat  bottom left;
    16. background-size: cover;
    17. }
    18.  
    19. nav
    20. {
    21.     width: 100%;
    22. }
    23.  
    24. nav ul
    25. {
    26.     margin: 0px;
    27.     padding: 0px;
    28. }
    29.  
    30. nav ul:after {
    31.     clear: both;
    32.     content: " ";
    33.     display: block;
    34.     font-size: 0;
    35.     height: 0;
    36.     visibility: hidden;
    37. }
    38.  
    39.     nav ul,nav ul li{
    40.     background-color: #404040;
    41. }
    42.  
    43.     nav ul li {
    44.     list-style: none;
    45.     float:left;
    46. }
    47.  
    48. nav ul li a {
    49.     text-decoration: none;
    50.     display: block;
    51.     color: #FFFFFF;
    52.     padding: 14px 34px 14px 34px;
    53. }
    54.  
    55. nav ul li:hover > ul {
    56.     visibility: visible;
    57.     }
    58.  
    59. nav ul li ul{
    60.     display: inline;
    61.     visibility: hidden;
    62.     position: absolute;
    63.     padding:0px;
    64. }
    65.  
    66. nav ul li ul li{
    67.     float: none;
    68.     }
    69.  
    70.     nav ul li ul li a:hover{
    71.     color: #FFFFFF;
    72. }
    73. nav ul {
    74.     padding: 0px;
    75.     margin: 0px;
    76.  
    77.     box-shadow: 2px 2px 2px #dfdfdf;
    78.     -moz-box-shadow: 2px 2px 2px #dfdfdf;
    79.     -webkit-box-shadow: 2px 2px 2px #dfdfdf;
    80. }
    81.  
    82. nav ul li {
    83. list-style: none;
    84.     float:left;
    85.     border-right: 1px solid #dfdfdf;
    86. }
    87. nav ul li a {
    88.     text-decoration: none;
    89.     display: block;
    90.     color: #FFFFFF;
    91.     padding: 14px 34px 14px 34px;
    92.  
    93.     -webkit-transition: background 0.3s ease-out 0s;
    94.     -moz-transition: background 0.3s ease-out 0s;
    95.     -o-transition: background 0.3s ease-out 0s;
    96.     transition: background 0.3s ease-out 0s;
    97. }
    98. /* Hier wird die Farbänderung des ganzen Menüs definiert */
    99. nav ul li.dd2:hover a, nav ul li.dd2:hover > ul li a  {
    100.     background-color: #6D6D6D;
    101. }
    102. nav ul li.dd3:hover a, nav ul li.dd3:hover > ul li a  {
    103.     background-color: #6D6D6D;
    104. }
    105. nav ul li.dd1:hover a, nav ul li.dd4:hover > ul li a  {
    106.     background-color: #6D6D6D;
    107. }
    108. /* Ende der Farbänderungs"definierung" */
    109.  
    110. nav ul li:hover > a {
    111.     color: #FFFFFF;
    112. }
    113. nav ul li ul li a {
    114.     color: #FFFFFF;
    115. }
    116. nav ul li ul li a:hover{
    117.     color: #000000;
    118.     background-color: #FFFFFF !important;
    119. }
    120.  


    Ist das was für ne kleine Sammlung :D? (bisschen common, ich weiß^^) Und stark dem Design hier angelegt.
    Mfg 4ngel
     
    #2
    DASPOT und Majoox gefällt das.
  3. Majoox
    Offline

    Majoox

    Registriert seit:
    6. Mai 2014
    Beiträge:
    833
    Ort:
    Deutschland
    Minecraft:
    Majoox
    #3
    Arko93, DASPOT, MrPyro13 und 2 anderen gefällt das.
  4. Arko93
    Offline

    Arko93

    Registriert seit:
    9. März 2012
    Beiträge:
    529
    Minecraft:
    Arko93
    lass dich inspirieren
     
    #4
    DASPOT und Majoox gefällt das.
  5. Majoox
    Offline

    Majoox

    Registriert seit:
    6. Mai 2014
    Beiträge:
    833
    Ort:
    Deutschland
    Minecraft:
    Majoox
    #5
    Arko93 und DASPOT gefällt das.
  6. Xhadius
    Offline

    Xhadius Administrator

    Registriert seit:
    9. März 2012
    Beiträge:
    762
    Ort:
    Freiburg im Breisgau
    Minecraft:
    Xhadius
    #6
    DASPOT gefällt das.
  7. AnonymusChaotic
    Offline

    AnonymusChaotic

    Registriert seit:
    22. November 2013
    Beiträge:
    762
    Ort:
    Wien, Österreich
    Minecraft:
    AnonymusChaotic
    Wenn du nur entwickeln willst fände ich live-versionen aller gängigen Desktops (ohne lauffähige Programme, nur als ansichtversion) echt cool.

    Meines Erachtens nach gibt es das noch nicht ...
     
    #7
  8. DASPOT
    Offline

    DASPOT Moderator

    Registriert seit:
    1. November 2011
    Beiträge:
    1.445
    Ort:
    minecraftnews.de
    Minecraft:
    DASPOOT
    Interessante Idee. Allerdings dumme Frage: kann man da bei Windows iwie copyright Probleme o.ä. Haben? :D. Denke auch, eine Live Version eines Desktops hebe ich mir ggf. Noch für später auf, erstmal paar "normale" Webdesigns :D
     
    #8
  9. AnonymusChaotic
    Offline

    AnonymusChaotic

    Registriert seit:
    22. November 2013
    Beiträge:
    762
    Ort:
    Wien, Österreich
    Minecraft:
    AnonymusChaotic
    Ob es Copyright-Probleme gibt, weiß ich nicht. Beantwortet Microsoft aber sicher gerne (Support anschreiben o.ä.).
    Schließlich wäre es für die ja auch ein Vorteil, wenn User das neue 1.8 oder 1.9 Design ausprobieren können. Ein Link zu Amazon (Affiliate), die das Windows verkaufen kann Dir dann auch ein wenig Geld bringen.

    Mit Gnome u.ä. sollte es keine Probleme geben.

    Apple könnte auch Probleme machen...
     
    #9