Web tasarımı yapmayı öğrenmek istiyorum

ibrahimkekec · 28 Mart 2021

Merhaba, yaklaşık 6 yıldır grafik tasarım sektöründe aktif olarak rol oynuyorum. Çizim ve görsel güzellik konusunda hiç sorunum yok, ortaya gayet güzel şeyler çıkarabiliyorum fakat web tasarım konusunda hangi ölçüde yapmalıyım nereye ne koymalıyım vb. temel öğeleri bilmiyorum. Elinde 1 adet web tasarım dosyası olan varsa benimle çalışma dosyasını paylaşabilir mi. Maksadım temel hatlarını inceleyerek olayın mantığını kavrayabilmek. Şimdiden yardımcı olanlara teşekkür ederim.

................................................................................................................................................................................................
Sanırım yanlış anlaşılma olmuş. Ben işin kod kısmıyla hiç ilgilenmiyorum.
Sadece tasarım dosyası istiyorum. (ai,psd,id gibi formatlar olabilir.)

emiirhans · 28 Mart 2021

Buraya bakabilirsiniz.

BlackShadow · 28 Mart 2021

Hocam web tasarım öğrenmek istiyorsanız ilk işiniz temel seviyede HTML ve CSS öğrenmek olmalıdır. Photoshop ile yaptığınız tasarımları sadece CSS ile koda dökebilirsiniz. Web tasarım standartları sürekli değişiyor. 10 sene önceki kod ile bugünkü kod kesinlikle aynı olmayacaktır.

ibrahimkekec · 28 Mart 2021

BlackShadow dedi:
Hocam web tasarım öğrenmek istiyorsanız ilk işiniz temel seviyede HTML ve CSS öğrenmek olmalıdır. Photoshop ile yaptığınız tasarımları sadece CSS ile koda dökebilirsiniz. Web tasarım standartları sürekli değişiyor. 10 sene önceki kod ile bugünkü kod kesinlikle aynı olmayacaktır.

@emiirhans @BlackShadow Teşekkür ederim ancak kod kısmıyla ilgilenmiyorum sadece çizim kısmını kavramak istiyorum Örnek dosyadan kastım çizim dosyasıydı yardımcı olabilecek varsa çok sevinirim.

mburaktekin · 28 Mart 2021

ibrahimkekec dedi:
@emiirhans @BlackShadow Teşekkür ederim ancak kod kısmıyla ilgilenmiyorum sadece çizim kısmını kavramak istiyorum Örnek dosyadan kastım çizim dosyasıydı yardımcı olabilecek varsa çok sevinirim.

O zaman siz tasarımcı olmak istiyorsunuz?

BlackShadow · 28 Mart 2021

ibrahimkekec dedi:
@emiirhans @BlackShadow Teşekkür ederim ancak kod kısmıyla ilgilenmiyorum sadece çizim kısmını kavramak istiyorum Örnek dosyadan kastım çizim dosyasıydı yardımcı olabilecek varsa çok sevinirim.

Templatemonster gibi sitelerden ücretsiz HTML template indirip inceleyebilirsiniz o halde hocam.

emiirhans · 28 Mart 2021

ibrahimkekec dedi:
@emiirhans @BlackShadow Teşekkür ederim ancak kod kısmıyla ilgilenmiyorum sadece çizim kısmını kavramak istiyorum Örnek dosyadan kastım çizim dosyasıydı yardımcı olabilecek varsa çok sevinirim.

Css kodundan mı bahsediyorsunuz anlamadım. Eğer öyleyse;

[CODE lang="css" title="CSS"]*{
box-sizing: border-box;
}

/*CSS Değişken Kullanımı*/
/*değişken tanımlama ve değer atama*/
:root{
--yazi-renk:#fff;
--bg-renk:#ff6b81;
--bg-aktif-renk:#ff4757;
}

h1,
h2,
p,
ul,
li,
body{
margin:0;
padding:0;
}

body{
background: url(gorsel/bg2.jpg) fixed; /*fixed arkaplanı sabitler*/
font-family: 'Montserrat', sans-serif;
}
.sayfa{
width: 960px;
margin:10px auto;
background: var(--yazi-renk);
border:3px solid var(--bg-renk);
border-radius: 15px;
overflow: hidden;/*taşan kısımlar temizleniyor*/
}
#logo img{
width: 100%;
vertical-align: middle;
}
#ust-menu > ul{
position: relative;
list-style: none;
display: flex;
background: var(--bg-renk);
justify-content: space-around;
}

#ust-menu > ul > li{
position: relative;
flex-grow: 1;
}

#ust-menu > ul ul{
display: none;
list-style: none;
position: absolute;
background: var(--bg-renk);
width: 100%;
border-radius: 0 0 10px 10px;
overflow: hidden;
}
#ust-menu > ul > li:hover ul{
/*display: block; yada flex kullanılabilir*/
display: flex;
flex-direction: column;
}
#ust-menu ul li:hover{
background:var(--bg-aktif-renk);
}
#ust-menu ul li a{
text-align: center;
display: block; /*bulunduğu alanın içinde 100% olarak duracak*/
height: 40px;
line-height: 40px;
color:var(--yazi-renk);
text-decoration: none;
font-size: 1.2em;;
}
main{
padding:20px;/*margin de kullanılabilir*/
}
main p{
margin:5px 0;
}

footer{
background:var(--bg-renk);
padding:15px;
text-align: center;
color:var(--yazi-renk);
}

/*diğer css kodları*/
.yatay-cizgi{
border-bottom:1px solid #a4b0be;
margin:10px 0;
}[/CODE]

ibrahimkekec · 28 Mart 2021

emiirhans dedi:
Css kodundan mı bahsediyorsunuz anlamadım. Eğer öyleyse;

[CODE lang="css" title="CSS"]*{
box-sizing: border-box;
}

/*CSS Değişken Kullanımı*/
/*değişken tanımlama ve değer atama*/
:root{
--yazi-renk:#fff;
--bg-renk:#ff6b81;
--bg-aktif-renk:#ff4757;
}

h1,
h2,
p,
ul,
li,
body{
margin:0;
padding:0;
}

body{
background: url(gorsel/bg2.jpg) fixed; /*fixed arkaplanı sabitler*/
font-family: 'Montserrat', sans-serif;
}
.sayfa{
width: 960px;
margin:10px auto;
background: var(--yazi-renk);
border:3px solid var(--bg-renk);
border-radius: 15px;
overflow: hidden;/*taşan kısımlar temizleniyor*/
}
#logo img{
width: 100%;
vertical-align: middle;
}
#ust-menu > ul{
position: relative;
list-style: none;
display: flex;
background: var(--bg-renk);
justify-content: space-around;
}

#ust-menu > ul > li{
position: relative;
flex-grow: 1;
}

#ust-menu > ul ul{
display: none;
list-style: none;
position: absolute;
background: var(--bg-renk);
width: 100%;
border-radius: 0 0 10px 10px;
overflow: hidden;
}
#ust-menu > ul > li:hover ul{
/*display: block; yada flex kullanılabilir*/
display: flex;
flex-direction: column;
}
#ust-menu ul li:hover{
background:var(--bg-aktif-renk);
}
#ust-menu ul li a{
text-align: center;
display: block; /*bulunduğu alanın içinde 100% olarak duracak*/
height: 40px;
line-height: 40px;
color:var(--yazi-renk);
text-decoration: none;
font-size: 1.2em;;
}
main{
padding:20px;/*margin de kullanılabilir*/
}
main p{
margin:5px 0;
}

footer{
background:var(--bg-renk);
padding:15px;
text-align: center;
color:var(--yazi-renk);
}

/*diğer css kodları*/
.yatay-cizgi{
border-bottom:1px solid #a4b0be;
margin:10px 0;
}[/CODE]

Hayır ben işin kod kısmıyla hiç ilgilenmiyorum. Sadece grafik kısmıyla, tasarımıyla ilgileniyorum. Her hangi bir web tasarım çizim dosyası (ai,psd,id gibi formatlar olabilir.) istiyorum.

mburaktekin dedi:
O zaman siz tasarımcı olmak istiyorsunuz?

Zaten tasarımcıyım ama ne var ki web sitesi tasarımı yapma şerefine nail olamadım henüz. Bunun peşindeyim...

BlackShadow dedi:
Templatemonster gibi sitelerden ücretsiz HTML template indirip inceleyebilirsiniz o halde hocam.

HTML diyil çizim dosyası demek istedim. (ai,psd,id gibi formatlar olabilir.)

................................................................................................................................................................................................
Sanırım yanlış anlaşılma olmuş. Ben işin kod kısmıyla hiç ilgilenmiyorum.
Sadece tasarım dosyası istiyorum. (ai,psd,id gibi formatlar olabilir.)

Web tasarımı yapmayı öğrenmek istiyorum

ibrahimkekec

Hectopat

emiirhans

Kilopat

BlackShadow

Kilopat

ibrahimkekec

Hectopat

mburaktekin

Kilopat

BlackShadow

Kilopat

emiirhans

Kilopat

ibrahimkekec

Hectopat