- \n
- Hero image<\/a><\/strong><\/li>\n\n\n\n
- UX <\/a><\/strong><\/li>\n\n\n\n
- Wireframe<\/a><\/strong><\/li>\n\n\n\n
- Information Architecture<\/a><\/strong><\/li>\n\n\n\n
- Mobile-responsive<\/a><\/strong><\/li>\n\n\n\n
- HTML, CSS, and JavaScript<\/a><\/strong><\/li>\n\n\n\n
- CMS<\/a><\/strong><\/li>\n<\/ul>\n\n\n\n
\n\n\n\nHero image <\/strong><\/h2>\n\n\n\n
When designing a website, you\u2019ll often hear the term \u201chero image\u201d in reference to the website\u2019s home page. Although the term may conjure up images of Batman and Superman, it doesn\u2019t mean your designer is putting an image of superheroes on your website.
<\/p>\n\n\n\n![\"An](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/11\/What_is_a_hero_image-784x441.png\")
The hero image is the large feature image or video in the top section of a website’s homepage.<\/figcaption><\/figure>\n\n\n\n The hero image<\/a> is the large feature image or video background in the top section of a website\u2019s homepage. People started to refer to this area as a hero image because it\u2019s such an important part of the site. It\u2019s the first thing that any visitor sees when landing on your website and therefore, the design needs to be captivating and meaningful.\u00a0 <\/p>\n\n\n\n
Although the term \u201chero image\u201d has the word image in it, this section of the website doesn\u2019t necessarily need to be a static picture. Today, hero videos are very common, usually playing in the background behind some text. Depending on the goals for the site and the design style, you may even see animation used in this area of the site. <\/p>\n\n\n\n
\n\n\n\nUX or User Experience<\/strong><\/h2>\n\n\n\n
UX is shorthand for user experience. Some web designers specialize in UX design\u2014the process of enhancing a website visitor\u2019s total experience of your website. UX design<\/a> is considered a specialization because the designer doesn’t just create the look of the site, but considers how a visitor experiences their first (and subsequent!) visits to the site.<\/p>\n\n\n\n
A simple analogy for user experience is to compare it to the experience you might have in a new restaurant. The food may be great, but if the restaurant takes forever to seat you and the bathrooms are gross and parking is a nightmare, then you\u2019ll probably pass on going there again. There are many more factors than the food that can impact your experience at a restaurant.<\/p>\n\n\n\n
The same can be said about websites, and that\u2019s what user experience is all about. Engaging and keeping a visitor on your website isn\u2019t just about having a nice design. A web designer that understands UX design considers how everything on the site affects the user\u2019s overall experience. <\/p>\n\n\n\n
\n\n\n\nWireframe<\/strong><\/h2>\n\n\n\n
During most website projects, your web team will first create a wireframe of a web page before creating a design mockup.\u00a0<\/p>\n\n\n\n
A wireframe is basically a blueprint and it shows where certain elements and text will be placed on the page.\u00a0<\/p>\n\n\n\n
![\"An](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/11\/What_is_a_wireframe-1-784x441.png\")
A wireframe is a blueprint that shows where certain elements and text will be placed on the page. <\/figcaption><\/figure>\n\n\n\n Building a website is similar to the process of building a house.You start with an architect and create a blueprint before you have the interior designer start their work, otherwise you may end up with a bathroom in the kitchen. A wireframe is an extremely useful tool because it allows you to collaborate with the web strategist or designer and move things around more easily than a design mockup.<\/p>\n\n\n\n
If you\u2019ve ever seen an example of a wireframe, you\u2019ll notice that it has similarities to a building blueprint; the wireframe is typically black and white with basic boxes and outlines to show where elements will be placed. <\/p>\n\n\n\n
\n\n\n\nInformation Architecture (IA)\u00a0<\/strong><\/h2>\n\n\n\n
In addition to a wireframe, you\u2019ll typically work on the Information Architecture for your website early on in the process. Information Architecture, often called IA, refers to the process of organizing, prioritizing, and labeling the content on the website.\u00a0<\/p>\n\n\n\n
At this stage, you\u2019ll be deciding which website pages will be included in the top navigation of the website and how the content will be structured. The top navigation is the series of links at the top of the page. This top navigation is on every page of the website and helps to guide web visitors to the most important content.\u00a0<\/p>\n\n\n\n
Similar to the wireframe, the final Information Architecture<\/a> is an organization representation of your website. It often looks like a diagram and is a critical tool to guide the web team in order to make sure the final website is logical and intuitive to navigate.\u00a0<\/p>\n\n\n\n
\n\n\n\nMobile-Responsive<\/strong><\/h2>\n\n\n\n
Today, every website needs to work for a variety of devices, such as phones, tablets, and desktop computers. It is in this context that you\u2019ll often hear a web designer use the term \u201cmobile-responsive.\u201d<\/p>\n\n\n\n
![\"\"](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2019\/11\/What_is_mobile_responsive-784x441.png\")
Mobile-responsive means there is already technology built into the platform itself.<\/figcaption><\/figure>\n\n\n\n The majority of website platforms like WordPress are mobile-responsive, which means that there is already technology built into the platform itself so that content automatically adjusts to the user\u2019s device size.\u00a0<\/p>\n\n\n\n
Think of how your mobile phone works. If you turn your phone horizontally, then the content of the phone automatically adjusts.<\/p>\n\n\n\n
This is very similar to what happens on the website. Because of mobile-responsive technology, web designers and developers no longer need to create a 2nd version of your website for smaller devices. The same content and design will show appropriately on different device sizes.\u00a0<\/p>\n\n\n\n
A skilled web designer takes this into consideration while designing the site and can guide you to write content that works on both mobile devices and larger screens. <\/p>\n\n\n\n
\n\n\n\nHTML, CSS, & JavaScript<\/strong><\/h2>\n\n\n\n
Don\u2019t let these technical terms intimidate you. Each one relates to how your design goes from a static image to becoming a live, interactive web page. Typically, you\u2019ll begin creating your website with a web designer who specializes in how the site will look and be organized. Then you\u2019ll move on to working with a web developer or development team who will code the site.<\/p>\n\n\n\n
You\u2019re more likely to hear these terms during the development stage of building your site, but they may pop up in design discussions, too.<\/p>\n\n\n\n
HTML<\/strong> stands for HyperText Markup Language and it allows a web team to tell a web browser how to display a piece of text. HTML uses different tags to denote whether text is a heading, subheading or paragraph. You may see a designer label a heading in your design as H1. This is referring to the HTML tag that will be used to tell the browser that all text with this label should be in the same font size.\u00a0<\/p>\n\n\n\n
Cascading Style Sheets (CSS) <\/strong>help a web designer & developer define the look and feel of the website. HTML by itself is not attractive or enticing. CSS makes all the difference in creating a beautiful web page design.<\/p>\n\n\n\n
JavaScript<\/strong> is a scripting language that developers use to create the interactions on the website. With just HTML and CSS, you have a nice looking web page, but nothing can happen with just those two. When looking for a web developer or development team, look for someone who knows a lot more than just JavaScript and make sure your team is experienced in the platform that you are building the site on.\u00a0\u00a0<\/p>\n\n\n\n
\n\n\n\nCMS<\/strong><\/h2>\n\n\n\n
We\u2019ll wrap up with a pretty easy term: content management system, otherwise known as a CMS. You\u2019ll often hear this term in relation to WordPress (another content management system).<\/p>\n\n\n\n
In fact, WordPress is the most popular content management system<\/a> in the world. A CMS is a back-end tool on the website and it allows you to easily edit or add content to the site.\u00a0<\/p>\n\n\n\n
The huge benefit of building your site on a CMS like WordPress is that you don\u2019t have to be a web designer or web developer to change the text, add images, or add pages after the website launches. You won\u2019t have to call your web developer every time you need to add a comma to a page.\u00a0<\/p>\n\n\n\n
Because WordPress is extremely flexible and customizable, you get the best of both worlds with a beautiful website that is still easy for your business to manage. <\/p>\n\n\n\n
\n\n\n\nCheck Out More WordPress Content!<\/h2>\n\n\n\n
![\"local-wordpress-development-environment-why-large\"](\"https:\/\/getflywheel.com\/layout\/wp-content\/uploads\/2017\/05\/local-wordpress-development-environment-why-large-1-784x218.jpg\")
<\/figure>\n\n\n\nWordPress is the most popular content management system in the world and is being used by more and more creatives every day. <\/p>\n\n\n\n
Learn more about WordPress here<\/a>. It doesn’t matter if you’re a beginner or know WordPress like the back of your hand, we have resources and articles for everyone!<\/p>\n\n\n\n
- UX <\/a><\/strong><\/li>\n\n\n\n