Een donderslag bij heldere hemel

Inspiratie, dat is iets wat bij mij nogal vluchtig is.
De beste ingevingen komen bij niet door een techniek uit een boek maar komen plotseling naar binnen vallen.   ( medmec technieken zijn voor mij helaas niet echt behulpzaam. )
Dit is ook het geval bij mijn portfolio website.
Ik wil een rustige website omdat ik een hekel heb aan drukke websites. en zeker bij zoiets als je portfolio website moet je zelf tonen. dus iets tonen wat je niet bent gaat je zelf uiteindelijk toch de kop kosten. dus is beter om niet te doen.


Mijn nieuwe idee

Mijn nieuwe idee is om mijn portfolio meer te richten op mijn passie, gamedesign
De website krijgt een wat cartoony look.

Boven het menu bewegen wolkjes voorbij en  het menu is een balk die op een zeppelin zit.

De main content lijkt alsof het blijft zweven door de zeppelin ( mogelijk touw tussen zeppelin en de content)

 Onderaan de pagina is gras waar een character  op beweegt.
De footer is een houten balk die op het gras staat.

   

sharing the knowledge

Bij mijn groep en verder in de klas merkte ik dat de vooruitgang op het techniek gedeelte nogal mager was. Na wat na vraag bleek dit te zijn omdat ze bij hun php les nog niet zover waren gekomen.
De mensen die ik hier over sprak vonden dit vervelend.  omdat ze hierdoor niet in de kerstvakantie aan hun portfolio konden werken.

Ik heb toen besloten om wat scripts te delen. zodat ze er naar kunnen kijken en er van kunnen leren.
Ik heb ze meerdere malen op het hart gedrukt dat dit bedoeld was om van te leren en hoop dat ze dit ook doen. ( zeker omdat ik ook betwijfel of mijn manier de netste is )

Maar voor de zekerheid hier de code die gedeeld is.
source code gedeelde php script

iteratie design

 Screenshots iteratie design

Gekozen Kleurgebruik.

Kleurgebruik vind ik erg zelf moeilijk. dus had ik aan mijn teamgenoot gevraagd hoe hij het deed.
Hij gaf mij een link voor zulk soort dingen. en uiteindelijk heb ik een kleuren patroon gekozen en dit aan mijn teamgenoot laten zien en hij vond het ook wel werken.
kleurenselectie
Wel vond ik die laatste 2 van deze selectie niet passen en heb die dus achter wegen gelaten.

Wel heb ik nog lichte aanpassingen gebruikt zodat in mijn ogen beter zou passen bij het gebruik van gradients.

0F5E63

00293B

 

99d9ea

006760

Achtergrondkleur: #0F5E63  ( voor non cs3 browsers)
Achtergrond Gradient: bovenaan #0F5E63 en onderaan #00293B
Main div:  #99d9ea (non cs3 browsers)
Main div gradient: bovenaan #99d9ea en onderaan #006760
Menu div:  #99d9ea (non cs3 browsers)
Menu div gradient: bovenaan #99d9ea en onderaan #006760

Gekozen fonts.

Ik heb besloten om 2 verschilllende webfonts te gebruiken. dit om het contrast tussen menu en normale tekst wat meer aantebieden.

Ik heb via google fonts gekozen voor.

Voor het menu: Elsie

Voor de main content: Donegal One

Vond deze combo goed werken. verder neem ik backup fonts indien deze niet beschikbaar zijn.
PS: op het moment van schrijven word deze fonts opeens niet meer gekozen ga ik achteraan.


Overige aanpassingen.

• Na flink wat zoek werk. ontdekt hoe je makkelijk je borders met een boog kan maken.
• Verder gradients overgangen toegepast.
• twitter widget toegevoegd aan het openbare gedeelte van de website.

Feedback die ik gehad hebt van jaar genoten.

• misschien is het beter om text te centreren.
• Gradients word gezien als niet professioneel dus dat niet doen of minderen.
• Mogelijk schaduw toevoegen als effect.
• webfonts nakijken.
• Titels toevoegen aan projecten in overzicht.
• Kleuren zijn aan de saaie kant. ( en tip om webkleuren te gebruiken. via photoshop )
• Misschien projecten sorteren ( op datum of categorieën) 

Handelingen die ik verder nog naar ga kijken.

• gekozen webfonts werkt niet meer.
• kleuren nakijken.
• css schaduw toevoegen
• sql aanpassen.(artikelen)
• begin datum toevoegen
• eind datum toevoegen
• kijken naar paginate  ( zodat er niet teveel artikelen in overzicht staan.

 

Design inspiratie

Ik ben nogal kieskeurig qua design.


Ik wil zo rustig mogelijke website.
Maar ik snap dat ik op een of andere manier toch moet opvallen.
Moet op dit punt dus een balans zien te vinden voor mijzelf.
Optevallen door niet van de daken te schreeuwen.

Mijn grootste winstpunten die voor mij op het moment te halen zijn zit in design dus vandaar deze post.

Ik ga onderzoek naar verschillende aspecten van design.

kleurgebruik
lettertypes
Vormgeving
   -grids



Keuzes die ik al gemaakt heb.

Ik wil de knoppen op mijn portfolio andere lettertype geven zodat het meer opvalt.
De Titels van bijvoorbeeld de projecten wil ik ook meer laten opvallen door de lettertypen te veranderen.

Verder heb ik besloten om bij mijn keuzevak mijn website te laten aanvullen.
Keuzevak is 2d animatie te maken. En ben ook van plan een 2de bewegende logo te maken.


Inspiratie
shutterstock (met dank aan youandi)
voorbij 2.0 drie website tips 
 20 calm and subtle website
25 fresh examples of minimalist web designs

Wat ik uit inspiratie gehaald heb

Uit mijn inspiratie viel mij nog wat op.
Ik vind het voor mijzelf belangrijk dat een website constant is en niet heel de opmaak omgooit.




 

Update 16:51 5 december

Op het moment van schrijven zijn  opdracht 1 t/m 6 af.
Heb ik een slogan en een opzet naar mijn toekomstige design.
Verder staan de code ook op de blog.

Website

Dit is mijn link naar mijn portfolio.
Deze is op het moment nog flink in aanbouw.
http://eriatus.mwas.nl/Portfolio/index.php

Ik heb gekozen voor mijn eigen server omdat ik dan de sql kant van de website netter kan inrichten.
Uiteindelijk moet er een aparte host voor deze portfolio komen.
Maar voorlopig voldoet mijn eigen server prima.
Wel ben ik nog van plan om een kopie ergens anders te draaien als extra backup.

Code

index.php 


<!DOCTYPE html>
<html>
    <head>
        <title>Opdracht - Cristiaan</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="opmaak.css" media="screen">
    </head>
    <body>
        <div id="wrapper">
<?php
include 'menu.html';
?>

          
            <div id="main">
       
                <p>
                    Hallo, mijn naam is Cristiaan Schipper en ik ben 22 jaar oud.<br />
                    U bent aangekomen op mijn portfolio website.<br />
                    Deze is op het moment in aanbouw.
                   
                    <strong>hard en goed werken.</strong>
                   
                    <br />
                    </p>

               
       
       
            </div>
            <div id="footer"><footer>Webdesign door Cristiaan Schipper</footer></div>
        </div>
    </body>
</html>

opmaak.css



/*imports*/
@import url(http://fonts.googleapis.com/css?family=Quicksand);
@import url(http://fonts.googleapis.com/css?family=Rancho);

body{
    background-color: #8d8d8d;
    color:#000000;
 
}

/*overige elementen*/
a{

color:#000000;
}

strong{
  color:#000000;  
}

p
{
    text-decoration: none;
    color:#000000;
}

h3
{
 color:#FFCC00;  
}
h1
{
 color:#FFCC00;  
}
h2
{
 color:#FFCC00;  
}
li:first-child
{
text-decoration: underline   
}

/*DIVS*/
#wrapper
{
margin: auto;
padding-top:10px;



}

#menu
{
  
    width: 50%;

    min-height: 40px;
    margin: auto;
    margin-bottom: 10px;
    border: 2px;
    padding:3px;
 
    overflow:hidden;
  
 
}
#main
{
    background-color:#99d9ea;
   
    width: 70%;
    min-height: 600px;
    min-width: 50%;
    height:40%;
    border-color: #3f3b3b;
    border-style: solid;
    border-width: 1px;
 
    overflow:hidden;
      padding: 10px;
    width: 70%;
    margin-left: 200px;

 

}
#footer
{
    margin-left:200px;
   
}

/*CLASSES*/
.menubutton {

width:200px;
height:60px;
margin:4px;
position:inherit ;

font-size:16pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;

color:#000000;

}

a:hover {
   

 color: #000000;
}



.center
{
text-align:center;   
}

 menu.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="opmaak.css" media="screen"></head>
    <body>
<div id="menu">
        <a href=""     class="menubutton">Home</a>
        <a href="" class="menubutton">Opdrachten</a>
        <a href="" class="menubutton">Contact</a>
        <a href="" class="menubutton">About Me</a>
           
</div>
    </body>
</html> 
 

Design

Dit is mijn eerste versie van mijn design.
hier moet nog wel flink aan geknutseld worden.

Opdrachten

Opdracht 1


2 punten die je hebt geleerd en dit beter kan doen.

Wat ik heb geleerd over mezelf.


Dat ik meer om hulp en commentaar moet vragen.
Meer buiten de veilige omgeving komen van wat ik ken.

Wat ik beter ga doen.

Ik ga meer om hulp en commentaar vragen.


Dit ga ik bewijzen door de commentaar die ik krijg op mijn blog te zetten.

Ik wil met wat meer dingen experimenteren. Waaronder talen waar ik slecht in ben. Zoals javascript en jquery.


opdracht 2

Een portaal aanbieden waar ik mijn vaardigheden op kan laten zien. En om die manier een baan en of stage mee verdienen.

Slogan: hard en goed werken.

Randvoorwaarden

Portfolio site eisen:
1. Techniek (html/css/PHP/javascript)
2. Projecten toevoegen
3. Inlogsysteem
4. projecten weergeven.


opdracht 3

opdracht 4










opdracht 5

opdracht 6

Wireframe feedback 
Ik heb mijn wireframes laten zien aan mijn peer-groep en daarover gesproken daarover heb ik een aantal dingen als feedback gehad waar ik rekening mee moet houden.

Ontwerp is vrij simpel.
Verder moet ik goed opletten waar ik social feature implementeer.
Op het moment wou ik dat doen bij contact. misschien moet ik denken aan   een prominentere plaats.
Verder is design nogal simpel gepland.

Mindmap

Mijn mindmap die ik gemaakt heb naar aanleiding van het peer gesprek.