Diese Seite– Webdesign & Prototyping

Bianca Schlich

WordPress

Theme & Builder: Themify Ultra
Child-Theme
Custom CSS

Design & Layout

Illustrator
Figma | Prototyping
Photoshop

Andere Tools

Adobe Express
Canva
InDesign

Entwicklung

Nachbau dieser Website in HTML & CSS

WordPress

Ich habe das Theme Ultra als Basis genutzt und mit dem integrierten Builder umgesetzt. One-Pager-Feeling mit Section-Scrolling, dennoch weitere Details auf Unterseiten.

Um Updatesicher zu arbeiten, läuft die Seite über ein Child-Theme.

Besonders wichtig ist mir die DSGVO-Konformität.

Anpassungen & Funktionen

Theme-Anpassung: Feinanpassungen am Layout über den Builder und zusätzlich mit eigenem CSS.
Child-Theme: Eigene custom.css für Update-Sicherheit.
Custom Post Types: Portfolio-Einträge sind als eigener Post Type angelegt.
Plugins: Reduziert auf das Wesentliche, neben den nötigen Themify Plugins z. B. BBQ Firewall, Complianz, OMGF, Security Optimizer, Speed Optimizer.

: Builder Pro von Themify

: Arbeiten mit dem Customizer

: Child-Theme Themify Ultra

: Custom Portfolio Post Types

: Builder Pro von Themify

: Arbeiten mit dem Customizer

: Child-Theme Themify Ultra

: Custom Portfolio Post Types

Custom CSS – Code Snippets

    /**** NAV ****/
#main-nav .current-menu-item > a,
#main-nav .current_page_item > a {
    color: #FCB858 !important;
    border-bottom: 3px solid #FCB858;
}
#main-nav a:hover,
#main-nav a:focus {
    color: #90b854;
}
#main-nav .highlight-link > a {
    border-bottom: 0 !important;
    border-radius: 3px;
}

    /**** BULLETS ****/
.bullet-about li::marker {
	color: #596b59 !important;
}
.bullet-red-4a1c1c li::marker {
	color: #4a1c1c;
}
.bullet-olive-2f382f li::marker {
	color: #2f382f ;
}
.bullet-petrol-112a38 li::marker {
	color: #112a38;
}
.bullet-narrow ul, ol {
	line-height: 1.4rem;
}
li {
	margin-bottom: 0.6rem;
}

    /***** "TEXTMARKER" *****/

::selection { 
   color: #444; 
   background: #fcb858; 
}
::marker { color: #9fb249;
}

    /***** BACK HOME *****/
.back-home-btn a {
	font-family: "Road Rage";
	font-size: 28px;
	text-transform: uppercase;
	display: inline-block;
	color: #333 !important;
	padding: 10px 20px !important;
	text-decoration: none;
	background-color: #FCB858 !important;
	transition: background 0.3s ease;
}
.back-home-btn a:hover {
	background-color: #90b854 !important;
}

    /***** CONTACT FORM *****/
.required {
	color: #90B854 !important;
}
.module-contact .contact-success {
    background-color: #51bcbd;
    color: #293807;
}

Design & Layout

Das erste Layout entstand in Illustrator – als frühere Werbetechnikerin liebe ich die Arbeit mit Vektorgrafiken.
Den Prototypen habe ich anschließend in Figma aufgebaut und die Bilder in Photoshop optimiert.

Highlights

Illustrator: UI-Elemente als Vektoren (skalierbar & präzise)
Figma: Klickbarer Prototyp zur besseren User Experience
Photoshop: Bildbearbeitung & Optimierung

ZUM FIGMA PROTOTYPE

: Illustrator - Layout, Grafiken, Seamless Pattern, Icons

: Website Layout - Vektorpfade in Illustrator

: Figma Screenshot „Diese Seite“ Interaktivität

: Navigationspfeile & Verknüpfungen

Andere Tools

Um die Seite auch in anderen Formaten präsentieren zu können, habe ich sie mit weiteren Tools nachgebaut:

InDesign: Interaktive PDF-Präsentation zum Verschicken
Adobe Express: Online-Präsentation mit Animationen
Canva (Free-Version): Einschränkungen bei Fonts und Brushstrokes – deshalb habe ich ähnliche Schriften anstelle der Originalschrift Road Rage verwendet und auf Full-Width-Brushstrokes verzichtet.

ZUR ADOBE EXPRESS PRÄSENTATION

: Adobe Express Präsentation – Einleitung Skills

: Screenshot Canva

: Screenshot Canva Website Preview

: Adobe Express Präsentation – Einleitung Skills

: Screenshot Canva

: Screenshot Canva Website Preview

Entwicklung [HTML & CSS]

Parallel zur WordPress-Version baue ich die Seite Schritt für Schritt in HTML, CSS und JavaScript nach – aktuell noch lokal.
So kann ich Layout und Funktionen unabhängig von WordPress umsetzen und gezielt Code-Details optimieren.

Einblicke [Work in Progress]

HTML-Grundgerüst mit semantischen Strukturen (Header, Main, Footer)
Eigene CSS-Klassen beispielsweise für Navigation & Textmarker
Erste Layout-Screenshots und Code-Snippets (PrismJS-Style)

Code Snippets HTML

    <!------------------------- NAV -------------------------->
    <nav>
        <div class="nav-container">
            <a href="#intro" class="logo">BIANCA SCHLICH</a>
            <ul class="nav-links" id="navLinks">
                <li><a href="#intro" class="nav-link active">Intro</a></li>
                <li><a href="#about" class="nav-link">About Me</a></li>
                <li><a href="#skills" class="nav-link">Skills</a></li>
                <li><a href="#experience" class="nav-link">Experience</a></li>
                <li><a href="#portfolio" class="nav-link">Portfolio</a></li>
                <li><a href="#contact" class="nav-link">Contact</a></li>
                <li><a href="#downloads" class="nav-link">Downloads</a></li>
            </ul>
            <div class="hamburger" id="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!----------------------- INTRO ----------------------->
        <section id="intro" class="section">
            <div class="brushstroke-top">
                <img src="images/bg/brushstroke-top.svg" alt="Brushstroke top">
            </div>            
            <div class="section-content fade-in">
                <!--<p>Creative Professional & Digital Designer</p>-->
                <p>Hi! Mein Name ist</p>
                <h1>Bianca Schlich</h1>
                <img src="images/Bianca-Schlich-WordPress-Webdesign-Content-Management-Editor-masked.png" alt="Bianca">
                <p>Passion: [Web]Design</p>
                <h2>Curriculum Vitae & Portfolio</h2>
            </div>
            <div class="brushstroke-bottom">
                <img src="images/bg/brushstroke-bottom.svg" alt="Brushstroke bottom">
            </div>
        </section>

Code Snippets CSS

    /* ====================================================================
   1. FONT DEFINITIONS
   ==================================================================== */
/* Road Rage - Headlines H1/H2 */
@font-face {
    font-family: 'RoadRage';
    src: url('../fonts/RoadRage-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Special Elite - Subheadlines H3+ und Navigation */
@font-face {
    font-family: 'SpecialElite';
    src: url('../fonts/SpecialElite-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* ... */

    /* ====================================================================
   2. CSS VARIABLES
   ==================================================================== */
:root {
    /* Primary Colors */
    --primary-yellow: #FCB858;
    --primary-green: #90B854;
    
    /* Background Colors */
    --black: #171717;
    --black-pattern: #121212;
    --darker-black: #1E1E1E;
    --dark-bg: #333333;
    --light-bg: #EBEBEB;
    
    /* Section Colors */
    --sage-green: #596B59;
    --light-olive: #596B59;
    --forest-green: #2F382F;
    --mint-green: #AABDAA;
    --blue-gray: #8195A1;
    
    /* Typography */
    --font-heading: 'RoadRage', 'Arial Black', 'Impact', cursive;
    --font-subheading: 'SpecialElite', 'Georgia', 'Times New Roman', serif;
    --font-title: 'SailorsDiarySans', 'Comic Sans MS', 'Brush Script MT';
    --font-body: 'OpenSans', 'Arial', 'Helvetica', sans-serif;
    
    /* Spacing */
    --nav-height: 70px;
    --section-padding: 1rem;
    --container-max-width: 1200px;
    --content-max-width: 800px;
}

    /* ====================================================================
   3. BASE STYLES & RESETS
   ==================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

body {
    font-family: var(--font-body);
    line-height: 1.5;
    background-color: var(--black);
    color: var(--light-bg);
    overflow-x: hidden;
}

    /* ====================================================================
   4. TYPOGRAPHY
   ==================================================================== */
h1 {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 1;
    color: var(--primary-yellow);
    margin-bottom: 0.2rem;
    font-weight: 300;
    text-transform: uppercase;
}

h2 {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    color: var(--primary-green);
    margin-bottom: 0.2rem;
    font-weight: 300;
    text-transform: uppercase;
}

h3 {
    font-family: var(--font-subheading);
    font-size: 1.2rem;
    margin-bottom: 0.3rem;
    font-weight: 300;
}

p {
    font-family: var(--font-body);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    font-weight: 300;
}