Sternwarte Stuttgart
Website Redesign
Sternwarte Stuttgart
Website Redesign
Die Sternwarte Stuttgart existiert bereits seit Juni 1920 und ist somit eine der ältesten öffentlichen Sternwarten Deutschlands. Sie wird ehrenamtlich vom Verein Schwäbische Sternwarte e.V. betrieben. Die Vereinsmitglieder sind stolz auf ihre weit zurückreichende Geschichte. Somit sollte die Seite auch bei einem Redesign einige ursprüngliche Elemente beibehalten.
Die Sternwarte Stuttgart existiert bereits seit Juni 1920 und ist somit eine der ältesten öffentlichen Sternwarten Deutschlands. Sie wird ehrenamtlich vom Verein Schwäbische Sternwarte e.V. betrieben. Die Vereinsmitglieder sind stolz auf ihre weit zurückreichende Geschichte. Somit sollte die Seite auch bei einem Redesign einige ursprüngliche Elemente beibehalten.
Die Challenge
Den Auftraggebern war es wichtig, sowohl das ursprüngliche Logo beizubehalten sowie die Farben der alten Website (Gelb und Blau, um Himmel und Himmelskörper zu symbolisieren).
Den Auftraggebern war es wichtig, sowohl das ursprüngliche Logo beizubehalten sowie die Farben der alten Website (Gelb und Blau, um Himmel und Himmelskörper zu symbolisieren).
Die Lösung
Die ursprüngliche Farbkombination war jedoch nicht mehr zeitgemäß, darum wurden die Farbtöne leicht angepasst. Als Hintergrund wurde ein Sternenhimmel gesetzt. Text wurde in einem hellen gelblichen Farbton auf die Seite gebracht. Bei bestimmten Blöcken wurde dieser Farbton als Hintergrund gesetzt und die Schrift wurde in ein tiefes Blau umgewandelt, angepasst an den Sternenhintergrund. Als Schriftart für die gesamte Seite, sowohl in Überschriften als auch im Fließtext wurde die Futura verwendet. Das Projekt wurde in Figma grafisch geplant und als Dummy zur finalen Freigabe abgegeben. Nach dem Go des Vorstands wurde die gesamte Seite (mit Ausnahme des Mitgliederbereichs) in Wordpress umgesetzt.
Die ursprüngliche Farbkombination war jedoch nicht mehr zeitgemäß, darum wurden die Farbtöne leicht angepasst. Als Hintergrund wurde ein Sternenhimmel gesetzt. Text wurde in einem hellen gelblichen Farbton auf die Seite gebracht. Bei bestimmten Blöcken wurde dieser Farbton als Hintergrund gesetzt und die Schrift wurde in ein tiefes Blau umgewandelt, angepasst an den Sternenhintergrund. Als Schriftart für die gesamte Seite, sowohl in Überschriften als auch im Fließtext wurde die Futura verwendet. Das Projekt wurde in Figma grafisch geplant und als Dummy zur finalen Freigabe abgegeben. Nach dem Go des Vorstands wurde die gesamte Seite (mit Ausnahme des Mitgliederbereichs) in Wordpress umgesetzt.
Das Ergebnis
Die Website enthält sowohl allgemeine Informationen über die Sternwarte (Anfahrt, Öffnungszeiten, aktuelle Events), als auch tiefergreifendes Wissen, beispielsweise zur Geschichte der Sternwarte. Ein Abschnitt der Website ist sämtlichen Teleskopen gewidmet, die die Sternwarte besitzt und gibt Fakten sowie andere interessante Infos wie die Entwicklung und Geschichte zu den einzelnen Teleskopen wieder. Für Vereinsmitglieder gibt es noch einen separaten Bereich, auf welchen man nur durch Login mit Nutzername und Passwort zugreifen kann.
Die Website enthält sowohl allgemeine Informationen über die Sternwarte (Anfahrt, Öffnungszeiten, aktuelle Events), als auch tiefergreifendes Wissen, beispielsweise zur Geschichte der Sternwarte. Ein Abschnitt der Website ist sämtlichen Teleskopen gewidmet, die die Sternwarte besitzt und gibt Fakten sowie andere interessante Infos wie die Entwicklung und Geschichte zu den einzelnen Teleskopen wieder. Für Vereinsmitglieder gibt es noch einen separaten Bereich, auf welchen man nur durch Login mit Nutzername und Passwort zugreifen kann.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path d="M 360.57 498.11 L 141.94 498.44 C 65.23 498.55 0.68 435.64 0.5 358.75 L 0 145.16 C -0.18 67.12 61.07 0.01 140.18 0 L 359.28 0 C 436.24 0 499.06 64.81 499 141.35 L 498.81 358.84 C 498.74 433.64 436.63 497.99 360.57 498.11 Z M 360.51 453.5 C 411.75 453.42 452.9 410.38 452.89 360.59 L 452.86 139.84 C 452.86 89.16 410.18 47.03 359.35 47.04 L 139.77 47.06 C 89.11 47.06 46.48 89.28 46.48 139.85 L 46.45 360.48 C 46.45 412.6 90.15 453.93 141.88 453.85 L 360.5 453.5 Z" fill="rgb(0, 0, 0)" height="498.4401440345196px" id="dVpKCH86J" transform="translate(0.02 -0.56)" width="499.0004386535455px"/><path d="M 259.14 129.57 C 259.14 201.13 201.13 259.14 129.57 259.14 C 58.01 259.14 0 201.13 0 129.57 C 0 58.01 58.01 0 129.57 0 C 201.13 0 259.14 58.01 259.14 129.57 Z M 213.43 129.59 C 213.43 83.28 175.89 45.73 129.57 45.73 C 83.25 45.73 45.71 83.27 45.71 129.59 C 45.71 175.91 83.25 213.45 129.57 213.45 C 175.89 213.45 213.43 175.91 213.43 129.59 Z" fill="rgb(0, 0, 0)" height="259.14px" id="yT2_78sOQ" transform="translate(120.13 120.22)" width="259.14px"/><path d="M 0 30.19 C 0 13.517 13.517 0 30.19 0 C 46.863 0 60.38 13.517 60.38 30.19 C 60.38 46.863 46.863 60.38 30.19 60.38 C 13.517 60.38 0 46.863 0 30.19 Z" fill="rgb(0, 0, 0)" height="60.379999999999995px" id="vzwM_fmG9" transform="translate(353.32 85.19)" width="60.379999999999995px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path d="M 497.749 234.22 L 497.749 263.38 C 497.059 265.34 496.989 266.97 496.839 268.85 C 487.699 386.44 395.789 481.46 279.219 495.54 L 279.189 300.82 L 339.069 300.62 L 348.009 231.23 L 279.219 231.18 L 279.599 179.27 C 279.659 171.17 283.379 163.06 289.949 158.72 C 296.059 154.69 303.679 153.19 311.049 153.14 L 350.369 152.87 L 350.389 90.92 C 331.109 88.92 312.229 87.9 292.699 88.28 C 258.199 88.95 227.539 105.79 214.769 138.66 C 209.879 151.25 207.569 164.28 207.529 177.93 L 207.369 231.3 L 147.439 231.3 L 147.439 300.68 L 207.439 300.84 L 207.389 493.92 C 92.879 474.22 7.189 378.46 0.539 263.04 C 0.019 253.99 -0.291 245.27 0.399 236.24 L 1.019 228.04 C 10.879 98.05 121.039 -0.25 249.419 0 C 377.849 0.26 486.559 99.07 496.949 229.06 C 497.079 230.69 497.129 232.66 497.749 234.22 Z" fill="rgb(0, 0, 0)" height="495.5404757834031px" id="ZcRZjMpEM" transform="translate(2.251 0.88)" width="497.7488562877468px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path d="M 499.01 433.54 C 499.01 469.06 468.04 498.96 433.02 498.96 L 65.57 498.91 C 30.66 498.91 0.05 468.76 0.05 433.73 L 0 65.52 C 0 30.6 30.15 0 65.2 0 L 433.78 0 C 468.85 0 499.05 30.55 499.05 65.54 Z M 433.18 460.69 C 448.58 459.89 460.79 447.45 460.79 432.17 L 460.76 66.34 C 460.76 50.81 447.59 38.22 432.24 38.22 L 66.74 38.22 C 51.69 38.22 38.32 50.59 38.32 65.94 L 38.29 432.58 C 38.29 447.74 51.21 460.64 66.36 460.64 L 433.18 460.7 Z" fill="rgb(0, 0, 0)" height="498.96000000000004px" id="oJXVzDSfe" transform="translate(0.19 -0.82)" width="499.04999999999995px"/><path d="M 230.45 230.43 L 153.64 230.43 L 153.62 113.38 C 153.62 107.42 153.1 101.95 152.22 96.24 C 150.16 82.8 143.61 71.38 129.46 68.25 C 120.65 66.3 111.52 66.6 102.83 68.97 C 78.59 75.57 77.14 102.44 76.81 123.36 L 76.81 230.45 L 0 230.45 L 0 0.02 L 76.71 0 L 77.17 34.33 C 89.17 12.07 106.09 3.22 129.99 0.55 C 147.78 -0.93 167.25 0.43 183.85 7.43 C 204.66 16.2 216.9 33.17 223.28 54.41 C 228.69 72.44 230.42 94 230.43 112.99 L 230.45 230.44 Z" fill="rgb(0, 0, 0)" height="230.45000000000002px" id="eyCGieQ9U" transform="translate(192.06 191.01)" width="230.44999999999993px"/><path d="M 0 230.45 L 0 0 L 76.82 0 L 76.82 230.45 Z" fill="rgb(0, 0, 0)" height="230.45000000000002px" id="rTlUZxD5P" transform="translate(76.84 191.01)" width="76.82px"/><path d="M 0 38.4 C 0 17.192 17.192 0 38.4 0 C 59.608 0 76.8 17.192 76.8 38.4 C 76.8 59.608 59.608 76.8 38.4 76.8 C 17.192 76.8 0 59.608 0 38.4 Z" fill="rgb(0, 0, 0)" height="76.80000000000001px" id="pJn3ngxrK" transform="translate(76.84 75.79)" width="76.79999999999998px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path d="M 305.264 345.17 L 191.194 345.19 C 149.274 345.19 108.794 342.69 67.604 338.29 C 34.804 334.79 12.064 312.38 7.444 279.35 C -2.486 208.43 -2.476 136.77 7.444 65.84 C 12.064 32.8 34.804 10.41 67.604 6.9 C 108.794 2.5 149.274 0 191.194 0 L 304.004 0 C 345.934 0 386.404 2.5 427.604 6.9 C 460.384 10.4 483.134 32.8 487.754 65.84 C 497.684 136.76 497.684 208.43 487.754 279.36 C 483.134 312.39 460.384 334.8 427.594 338.29 C 387.294 342.58 347.774 345.17 305.254 345.18 Z M 327.174 172.63 L 198.044 98.5 L 198.044 246.71 Z" fill="rgb(0, 0, 0)" height="345.18999999999994px" id="NSrIm8ury" transform="translate(1.846 76.06)" width="495.20125047229214px"/></svg>)